如何在较旧的 React 版本中使用 create-react-app？

Question

When using create-react-app with custom-react-scripts I always end up with React 16 (latest) installed. Is there a way to create a new project with an older version, like React 15?

Answer 1

If you're here because of react v18, and you want to go down to the previous non-change breaking version, here's what i did:

in your package.json replace:

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

with

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

Then go to your entry file index.js At the top, replace:

import ReactDOM from 'react-dom/client'

with

import ReactDOM from 'react-dom';

Still in your index.js file, replace:

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

with

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

• Delete your node_modules and run yarn install
• After installation, run yarn start
• Enjoy

Answer 2

It seems that you can just go ahead and use it to generate a React 16 app, then edit package.json and run npm i (or npm install ; npm i is just a shortcut).

I just left the react-scripts version at the latest version and only changed the versions of react and react-dom , and it worked:

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

Answer 3

Complementing the answers described above, after all the manipulation, I had to update this libs(for TS template) :

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

Answer 4

I ran into this problem, especially with the new create-react-app v18. All I did was to delete my package-lock.json file and also my node_modules folder. I edited package.json afterwards, replaced react-dom and react with the version that I want as below:

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

Finally, I installed my packages again using npm install

Answer 5

If you already created with React 18 , you can downgrade version 18 to previous verions of react with a few steps. You will need to do modifications in two files which are package.json and index.js . You should delete also node_modules

Step 1

Your index.js probably looks like this now

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

You should change import of ReactDOM and cancel const root line

New code of index.js should be like this

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

Step 2

Go to your package.json file and update desired react version in dependencies

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

Step 3

Delede your node_modules and If you are using npm do npm i . If you are using yarn do yarn install . After this step you are good to run app with npm start or yarn start .

Step 4 (OPTIONAL: If you are still having problems but I do not recommend doing it)

Delete your package-lock.json (for npm ) or yarn.lock file (for yarn ) and start back from Step 3

Answer 6

1. First create react app npx create-react-app. (. Means current file)

2. Delete 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"

As per require version of react & react-dom along with other required

4. Run command in bash/terminal npm install

(it will download all data as per package.json)

5. (optional) In project 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> );

This.

Answer 7

• When You Using

npx create-react-app app-name

it will always install latest react packages. Then, in react 18.2.0 , It is some of different about previous version.

• If you want to downgrade your current react version to previous version of react, Try These 5 Steps .

1. You go to your folder file structure and delete both package-lock.json ( yarn.lock for yarn) file and node_modules file.

2. After you go to your package.json file and change and edit these dependencies :

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

to

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

in your package.json dependencies file like this.

3. After go to Your index.js file change,

import ReactDOM from 'react-dom/client'

to

import ReactDOM from 'react-dom';

4. After change your index.js file and change below part of index file.

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

to

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

5. Finally, You can open the terminal and run

if you are using npm -->> npm install

and after the installing part you can run app npm start .

or

if you are using yarn -->> yarn install

and after the installing part you can run app yarn start .

--Thank You-- --Happy Coding--

Answer 8

First you have to install npm in your system Then For Create react app you have to run below command

sudo npm init react-app my-app --scripts-version 1.1.5

cd my-app

sudo npm install --save react@16.0.0

sudo npm install --save react-dom@16.0.0

it's working charm for me

Answer 9

It's WORKED for me..

1. Just uninstall the react 18 and install the react 17.

Run This Command

npm uninstall react 

2.Then install React 17.0.2 Just run this command.

npm install react@17.0.2

3. For installing react-dom version 17.0.2 run this command.

   npm install --save react-dom@17.0.2

• Enjoy and Add Comment if it's worked for you

Answer 10

Specify your script version while create project

sudo npm init react-app appname --scripts-version 1.0.13

its working for me