Wie verwende ich create-react-app mit einer älteren React-Version?

Beim Benutzen Erstellen-Reagieren-App mit benutzerdefinierte Reaktionsskripte Am Ende habe ich immer React 16 (neueste) installiert. Gibt es eine Möglichkeit, ein neues Projekt mit einer älteren Version wie React 15 zu erstellen?

Wenn Sie wegen React v18 hier sind und zur vorherigen Non-Change-Breaking-Version wechseln möchten, habe ich Folgendes getan:

in deiner package.json ersetzen:

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

mit

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

Gehen Sie dann zu Ihrer Eingabedatei index.js
Ersetzen Sie oben:

import ReactDOM from 'react-dom/client'

mit

import ReactDOM from 'react-dom';

Noch in deiner index.js Datei, ersetzen:

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

mit

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

• Löschen Sie Ihre node_modules und Renn yarn install oder npm install
• Nach der Installation ausführen yarn start oder npm run start
• Genießen

Es scheint, dass Sie einfach weitermachen und es verwenden können, um eine React 16-App zu generieren, dann package.json zu bearbeiten und auszuführen npm i (oder npm install; npm i ist nur eine Abkürzung).

Ich habe die einfach verlassen react-scripts Version auf die neueste Version und nur die Versionen von geändert react und react-domund es hat funktioniert:

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

Ergänzend zu den oben beschriebenen Antworten musste ich nach all der Manipulation diese Bibliotheken (für die TS-Vorlage) aktualisieren:

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

Wenn Sie bereits mit erstellt haben React 18, können Sie Version 18 mit wenigen Schritten auf frühere Versionen von React zurückstufen. Sie müssen Änderungen in zwei Dateien vornehmen, die package.json und index.js . Sie sollten auch löschen node_modules

Schritt 1

Dein index.js sieht jetzt wohl so aus

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>
);

Sie sollten den Import von ändern ReactDOM und abbrechen const root Linie

Neuer Code von index.js sollte so sein

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

Schritt 2

Gehen Sie zu Ihrem package.json Datei und aktualisieren Sie die gewünschte Reaktionsversion in Abhängigkeiten

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

Schritt 3

Löschen Sie Ihre node_modules und If you use npm tun npm i. Wenn Sie verwenden Garn tun yarn install. Nach diesem Schritt können Sie die App gut ausführen npm start oder yarn start.

Schritt 4 (OPTIONAL: Wenn Sie immer noch Probleme haben, aber ich empfehle es nicht)

Löschen Sie Ihre package-lock.json (zum npm) oder yarn.lock Datei für Garn) und starten Sie zurück von Schritt 3

Ich bin auf dieses Problem gestoßen, insbesondere mit der neuen create-react-app v18. Alles, was ich getan habe, war, meine zu löschen package-lock.json Datei und auch meine node_modules Mappe. Ich habe bearbeitet package.json Ersetzen Sie danach den React-Dom und reagieren Sie mit der gewünschten Version wie folgt:

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

Abschließend habe ich meine Pakete wieder mit installiert npm install

• Wenn Sie verwenden

npx create-react-app app-name

Es werden immer die neuesten Reaktionspakete installiert. Dann in react 18.2.0Es ist etwas anders als bei der vorherigen Version.

• Wenn Sie wollen herabstufen dein Strom reagieren Version zu vorherige Version von reagieren, versuchen Sie diese 5 Schritte.

1. Sie gehen zu Ihrer Ordnerdateistruktur und löschen beide package-lock.json ( yarn.lock für Garn) Datei und node_modules Datei.

2. Nachdem Sie zu Ihrem gehen package.json Datei und ändern und bearbeiten Sie diese Abhängigkeiten:

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

zu

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

in deiner package.json Abhängigkeiten Datei so.

3. Gehen Sie danach zu Ihrem index.js Datei ändern,

import ReactDOM from 'react-dom/client'

zu

import ReactDOM from 'react-dom';

4. Nachdem Sie Ihre geändert haben index.js Datei und ändern Sie den unteren Teil der Indexdatei.

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

zu

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

5. Schließlich können Sie die öffnen terminal und Renn

wenn Sie npm verwenden –>> npm install

und nach dem Installationsteil können Sie die App ausführen npm start.

oder

Wenn Sie Garn verwenden –>> yarn install

und nach dem Installationsteil können Sie die App ausführen yarn start.

–Danke–
–Fröhliches Programmieren–

1. Erstellen Sie zuerst die Reaktions-App npx create-react-app . (. Bedeutet aktuelle Datei)

2. Löschen Sie node_modules & 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"

Gemäß der erforderlichen Version von React & React-Dom zusammen mit anderen erforderlichen

4. Führen Sie den Befehl in bash/terminal npm install aus

(es werden alle Daten gemäß package.json heruntergeladen)

5. (optional) Im Projekt 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>
);

Dies.