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

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?

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

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"
},

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"

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

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

• 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.

3. Después de ir a Su index.js cambio de archivo,

import ReactDOM from 'react-dom/client'

a

import ReactDOM from 'react-dom';

4. 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')
);

5. 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–

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

4. Ejecute el comando en bash/terminal npm install

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

5. (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.