logo标签列表

如何使用 create-react-app 来搭配较老版本的 React？

javascriptreactjscreate-react-app
84
2
你可以在 package.json 文件中指定软件包的版本。这个链接可能会有所帮助：https://dev59.com/j2Eh5IYBdhLWcg3wfzlE - Rajesh
我直接将 package.json 改为版本 15.6.2，令我惊讶的是它居然起作用了！请把这做成一个答案，我会点赞你的。 - rodrigocfd
我很高兴能够帮助到你。如果您对解决方案感到满意，可以将帖子删除，因为我会将其标记为重复。祝您有美好的一天 :-) - Rajesh
可能是在package.json中安装指定的确切软件包版本的重复问题。 - Rajesh
12个回答
170

如果你因为 React v18 而来到这里，并且想要回到之前的非更改破坏版本，以下是我所做的:

在你的 package.json 中替换:

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

随着

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

然后进入您的入口文件 index.js 在顶部替换：

import ReactDOM from 'react-dom/client'

与

import ReactDOM from 'react-dom';

在您的index.js文件中，仍需进行以下替换：

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

随着

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
  • 删除你的node_modules文件夹并运行yarn install或者npm install
  • 安装完毕后，运行yarn start或者npm run start
  • 享受吧
15
我在尝试安装新软件包时遇到了错误。为了解决这个问题，我还不得不在我的package.json中将@testing-library/react更改为版本12。即： "@testing-library/react": "^12.0.0"和"@testing-library/user-event": "^12.0.0" - Matt
在Unix系统上，您可以运行以下命令：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。然后，您只需要按照上述说明更新index.tsx文件即可。 - Jonathan
1
react-scripts: 5.0.1 是否与 react 17 兼容？还是我也需要将其降级到版本 4？ - Mohammad
22
似乎你可以直接使用它来生成一个React 16应用程序，然后编辑package.json并运行npm i（或npm install；npm i只是一个快捷方式）。
我只将react-scripts版本保持在最新版本，并仅更改了react和react-dom的版本，它也起作用了：
"devDependencies": {
  "react-scripts": "1.0.14"
},
"dependencies": {
  "react": "^15.6.1",
  "react-dom": "^15.6.1"
},
6
在执行 'npm install' 命令之前，请确保删除 node_modules 文件夹。 - Shamseer Ahammed
16

除了上述答案之外，进行所有操作后，我必须更新这些库（用于TS模板）：

"@testing-library/react": "^12.1.1",
"@testing-library/user-event": "^12.5.0"
7
  • 当您使用时
npx create-react-app app-name

它将始终安装最新的React包。然后，在react 18.2.0中，与以前版本相比有一些不同之处。

  • 如果您想将当前的React版本降级到以前的版本，请尝试以下5个步骤。

  1. 您需要进入文件夹结构并删除 package-lock.json( 使用yarn的话则是 yarn.lock) 和 node_modules 文件。

  2. 接下来，您需要打开 package.json 文件并更改和编辑这些依赖项：

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

to

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

在您的 package.json 的dependencies（依赖项）文件中添加如下内容。

  1. 然后进入您的 index.js 文件进行更改，
import ReactDOM from 'react-dom/client'

to

import ReactDOM from 'react-dom';

在修改了您的index.js文件并更改了索引文件的下面部分后。
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')
);
  1. 最后，您可以打开终端并运行

如果您正在使用npm-->> npm install

安装完成后，您可以运行应用程序npm start。

或者

如果您正在使用yarn-->> yarn install

安装完成后，您可以运行应用程序yarn start。

--谢谢-- --愉快的编码--

5
如果您已经使用 React 18 创建了项目，可以通过以下步骤将版本降级到之前的版本。 您需要在两个文件中进行修改，它们分别是 package.json 和 index.js。您应该还要删除 node_modules。 步骤1

您的 index.js 现在可能看起来像这样

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

您需要更改 import 导入的 ReactDOM，并取消 const root 行

index.js 的新代码应该像这样

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

步骤2

打开你的package.json文件并在依赖项中更新所需的React版本。

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

第三步

删除你的node_modules文件夹，如果你使用npm，则运行npm i命令。如果你使用yarn，则运行yarn install命令。完成这一步之后，你可以使用npm start或者yarn start命令来启动应用程序。

第四步（可选：如果你仍然有问题，但我不建议这样做）

删除你的package-lock.json文件（对于npm），或者yarn.lock文件（对于yarn），然后从第三步重新开始。

4
我遇到了这个问题，特别是在新的create-react-app v18中。我所做的就是删除我的`package-lock.json`文件和`node_modules`文件夹。然后我编辑了`package.json`文件，用下面的方式替换了react-dom和react的版本：
"react": "^17.0.2",
"react-dom": "^17.0.2",

最后，我使用 npm install 再次安装了我的软件包。

我认为有一些重大变化，CRA索引（以及可能其他文件）已经更新到v18中新的操作方式 - 尚未尝试，但可能需要撤消此处描述的更改 https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html - Justin L.
3

  1. 首先创建React应用程序 npx create-react-app . （.代表当前文件夹）

  2. 删除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"

根据所需的React版本和React-DOM版本，以及其他必需版本

  1. 在Bash/Terminal中运行以下命令 npm install

(它将根据package.json下载所有数据)

  1. (可选) 在项目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>
);

这个。
1
已经有一些好的答案了，但是再添加一个新的答案可能会对某些人有帮助。

  1. 删除 node modules、package-lock.json 和 yarn.lock 文件。

  2. 在 package.json 的依赖部分：

     "dependencies": {
 "@material-ui/core": "^4.12.2",
 "@material-ui/icons": "^4.11.2",
 "@testing-library/jest-dom": "^4.2.4",
 "@testing-library/react": "^9.5.0",
 "@testing-library/user-event": "^7.2.1",
 "firebase": "^8.8.0",
 "firebase-login": "^1.0.0",
 "firebase-tools": "^0.1.6",
 "react": "^16.13.1",
 "react-currency-format": "^1.0.0",
 "react-dom": "^16.13.1",
 "react-router-dom": "^5.2.0",
 "react-scripts": "^5.0.1"
}

  3. 在 index.js 文件中：

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

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

  4. 运行 npm cache clean --force 命令。

  5. 运行 npm install 或 yarn install 命令。

可选项

另外，如果您想添加一些其他依赖项或可能发生任何异常，以下步骤可能会有所帮助。

安装 React 脚本：

npm install react-scripts

安装WebVitals：
npm install --save-dev web-vitals
yarn add web-vitals --dev

安装酶：

npm i --save-dev enzyme enzyme-adapter-react-16

安装JEST：

npm install --save-dev jest
yarn add --dev jest
yarn add --dev babel-jest babel-core
0

这对我有用...

  1. 只需卸载 React 18 并安装 React 17。

运行此命令

npm uninstall react

2. 然后安装 React 17.0.2，只需运行此命令。

npm install react@17.0.2

  • 安装React-DOM 17.0.2版本，请运行以下命令。

    npm install --save react-dom@17.0.2

    • 享受编程的乐趣，如果以上方法对您有用，请添加评论。
    0

    首先您需要在系统中安装npm，然后为了创建React应用程序，您需要运行以下命令：

    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

    对我来说非常好用。

    3
    通常对于包含应用程序的文件夹使用sudo并不是一个好主意。 - Matt Browne
    这个在我的Ubuntu 20.04上有效。使用CRA一直崩溃，但是这个只需要一分钟就能启动。 - Hank W
    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文，
    原文链接