¿Cómo usar create-react-app con una versión anterior de React?

6 minutos de lectura

Cuando usas crear-reaccionar-app con scripts de reacción personalizados Siempre termino con React 16 (último) instalado. ¿Hay alguna forma de crear un nuevo proyecto con una versión anterior, como React 15?

  • Puede especificar la versión del paquete en package.json. Esto podría ayudar: stackoverflow.com/questions/22343224/…

    – Rajesh

    04/10/2017 a las 14:00


  • Cambié directamente package.json a la versión 15.6.2 y, para mi sorpresa, ¡simplemente funcionó! Conviértelo en una respuesta, déjame votarte.

    – rodrigocfd

    4 oct 2017 a las 14:11

  • Me alegro de haberte podido ayudar. Si está satisfecho con la solución, puede eliminar la publicación, ya que la marcaría como duplicada de todos modos. Que tengas un buen día 🙂

    – Rajesh

    04/10/2017 a las 14:25


  • Posible duplicado de npm instala la versión exacta del paquete especificada en package.json

    – Rajesh

    4 oct 2017 a las 14:52

avatar de usuario de symplytheo
simplytheo

Si está aquí debido a reaccionar v18, y desea volver a la versión anterior sin cambios, esto es lo que hice:

en tus package.json reemplazar:

"react": "^18.0.0"
"react-dom": "^18.0.0"

con

"react": "^17.0.2"
"react-dom": "^17.0.2"

Luego vaya a su archivo de entrada index.js
En la parte superior, reemplaza:

import ReactDOM from 'react-dom/client'

con

import ReactDOM from 'react-dom';

todavía en tu index.js archivo, reemplace:

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

con

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
  • eliminar su node_modules y correr yarn install o npm install
  • Después de la instalación, ejecute yarn start o npm run start
  • Disfrutar

  • Recibí errores al intentar instalar un nuevo paquete. Para arreglar, también tuve que cambiar @testing-library/react a la versión 12 en mi paquete.json. Es decir: “@testing-library/react”: “^12.0.0” y “@testing-library/user-event”: “^12.0.0”

    – Mate

    21 de mayo a las 8:26


  • en el sistema unix puede ejecutar: APP_NAME='my-app' && npx create-react-app $APP_NAME && cd $APP_NAME && npm install react@17 react-dom@17 @testing-library/react@12 @types/react@17 @types/react-dom@17 @testing-library/react@12 @testing-library/user-event@12. Entonces solo necesita actualizar el archivo index.tsx como se describe anteriormente.

    – Jonathan

    26 de agosto a las 11:18

  • ¿React-Scripts: 5.0.1 es compatible con React 17? ¿O también tengo que degradarlo a la versión 4?

    – Mahoma

    18 de septiembre a las 13:05

Parece que puede continuar y usarlo para generar una aplicación React 16, luego editar package.json y ejecutar npm i (o npm install; npm i es solo un atajo).

acabo de dejar el react-scripts versión a la última versión y solo cambió las versiones de react y react-domY funcionó:

"devDependencies": {
  "react-scripts": "1.0.14"
},
"dependencies": {
  "react": "^15.6.1",
  "react-dom": "^15.6.1"
},

  • asegúrese de eliminar la carpeta node_modules antes de hacer ‘npm install’

    – Shamsir Ahammed

    5 de agosto de 2021 a las 7:44

Complementando las respuestas descritas anteriormente, después de toda la manipulación, tuve que actualizar estas bibliotecas (para la plantilla TS):

"@testing-library/react": "^12.1.1",
"@testing-library/user-event": "^12.5.0"

Avatar de usuario de Evren
Evren

Si ya creaste con React 18, puede degradar la versión 18 a versiones anteriores de reaccionar con unos pocos pasos. Deberá hacer modificaciones en dos archivos que son package.json y index.js . Deberías borrar también node_modules

Paso 1

Su index.js probablemente se vea así ahora

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Deberías cambiar la importación de ReactDOM y cancelar const root línea

nuevo codigo de index.js debería ser así

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Paso 2

Ir a tu package.json archivar y actualizar la versión de reacción deseada en las dependencias

"dependencies": {
    ...
    "react": "^17.0.0",
    "react-dom": "^17.0.0",
    ...
  },

Paso 3

Elimina tus node_modules y si estás usando npm hacer npm i. Si estás usando hilo hacer yarn install. Después de este paso, está listo para ejecutar la aplicación con npm start o yarn start.

Paso 4 (OPCIONAL: Si sigues teniendo problemas pero no te recomiendo hacerlo)

eliminar su package-lock.json (por npm) o yarn.lock archivo (para hilo) y empezar de nuevo desde Paso 3

Avatar de usuario de Dennis
dennis

Me encontré con este problema, especialmente con la nueva aplicación create-react-app v18. Todo lo que hice fue borrar mi package-lock.json archivo y también mi node_modules carpeta. edité package.json luego, reemplacé react-dom y reaccioné con la versión que quiero como se muestra a continuación:

"react": "^17.0.2",
"react-dom": "^17.0.2",

Finalmente, instalé mis paquetes nuevamente usando npm install

  • Creo que hubo algunos cambios importantes, y el índice CRA (y tal vez otros archivos) se actualizaron a la nueva forma de hacer las cosas en v18. Todavía no lo he intentado, pero es posible que deba deshacer los cambios descritos aquí. reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html

    – Justin L.

    13 abr a las 17:05


Avatar de usuario de Thirosh Madhusha
Thirosh Madhusha

  • Cuando usas
npx create-react-app app-name

siempre instalará los últimos paquetes de reacción. Entonces, en react 18.2.0Es algo diferente a la versión anterior.

  • Si quieres degradar su reacción actual versión para versión previa de reaccionar, prueba estos 5 pasos.
  1. Vas a la estructura de archivos de tu carpeta y Eliminar ambas cosas package-lock.json ( yarn.lock para hilo) archivo y node_modules expediente.

  2. Después de ir a su package.json archivar y cambiar y editar estas dependencias:

"react": "^18.2.0",
"react-dom": "^18.2.0",

a

"react": "^17.0.2",
"react-dom": "^17.0.2",

en tus package.json dependencias archivo como este.

  1. Después de ir a Su index.js cambio de archivo,
import ReactDOM from 'react-dom/client'

a

import ReactDOM from 'react-dom';
  1. Después de cambiar su index.js archivo y cambie debajo de la parte del archivo de índice.
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

a

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
  1. Finalmente, puede abrir el terminal y correr

si está usando npm –>> npm install

y después de la parte de instalación puedes ejecutar la aplicación npm start.

o

si estás usando hilo –>> yarn install

y después de la parte de instalación puedes ejecutar la aplicación yarn start.

–Gracias–
–Codificación feliz–

  • Creo que hubo algunos cambios importantes, y el índice CRA (y tal vez otros archivos) se actualizaron a la nueva forma de hacer las cosas en v18. Todavía no lo he intentado, pero es posible que deba deshacer los cambios descritos aquí. reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html

    – Justin L.

    13 abr a las 17:05


Avatar de usuario de Suraj Bhosale
Suraj Bhosale

  1. Primero cree la aplicación de reacción npx create-react-app . (. Significa archivo actual)

  2. Eliminar node_modules y package-lock.json

 "@material-ui/core": "^4.12.2",
    "@material-ui/icons": "^4.11.2",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "firebase": "^8.8.0",
    "firebase-login": "^1.0.0",
    "firebase-tools": "^9.16.0",
    "react": "^17.0.2",
    "react-currency-format": "^1.0.0",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"

Según la versión requerida de react & react-dom junto con otros requisitos

  1. Ejecute el comando en bash/terminal npm install

(descargará todos los datos según el paquete.json)

  1. (opcional) En el proyecto src/index.js
ReactDOM.render(`enter code here`
  <React.StrictMode>
  <App />
  </React.StrictMode>,
  document.getE1ementById( 'root' )
);
 
Replace this with 
 
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Este.

¿Ha sido útil esta solución?