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

Question

当将create-react-app与custom-react-scripts一起使用时，我总是安装 React 16（最新）。 有没有办法用旧版本创建一个新项目，比如 React 15？

Answer 1

如果你是因为 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
• 安装后运行yarn start
• 享受

Answer 2

似乎您可以继续使用它来生成一个 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"
},

Answer 3

作为上述答案的补充，在所有操作之后，我不得不更新这个库（用于 TS 模板）：

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

Answer 4

我遇到了这个问题，尤其是使用新的 create-react-app v18。 我所做的只是删除了我的package-lock.json文件以及我的node_modules文件夹。 之后我编辑了package.json ，替换了 react-dom 并使用我想要的版本做出反应，如下所示：

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

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

Answer 5

如果您已经使用React 18创建，您可以通过几个步骤将版本 18 降级到以前的 react 版本。 您需要在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>
);

您应该更改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文件并在依赖项中更新所需的反应版本

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

第 3 步

删除你的 node_modules 并且如果你使用的是npm do npm i 。 如果您使用的是yarn ，请执行yarn install 。 在此步骤之后，您可以使用npm start或yarn start运行应用程序。

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

删除你的package-lock.json （对于npm ）或yarn.lock文件（对于yarn ）并从第 3 步开始

Answer 6

1. 首先创建react app 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 的要求版本以及其他要求

4. 在 bash/terminal 中运行命令 npm install

（它将根据 package.json 下载所有数据）

5. （可选）在项目 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> );

这个。

Answer 7

• 当你使用

npx create-react-app app-name

它总是会安装最新的反应包。 然后，在react 18.2.0中，与以前的版本有些不同。

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

1. 您转到文件夹文件结构并删除package-lock.json （ yarn.lock表示纱线）文件和node_modules文件。

2. 转到package.json文件并更改和编辑这些依赖项后：

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

至

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

在你的package.json依赖文件中，像这样。

3. 转到您的index.js文件更改后，

import ReactDOM from 'react-dom/client'

至

import ReactDOM from 'react-dom';

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

5. 最后，您可以打开terminal并运行

如果您使用的是 npm -->> npm install

在安装部分之后，您可以运行 app npm start 。

或者

如果您使用的是纱线 -->> yarn install

在安装部分之后，您可以运行 app yarn start 。

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

Answer 8

首先你必须在你的系统中安装 npm 然后对于创建反应应用程序，你必须在命令下面运行

须藤 npm init react-app my-app --scripts-version 1.1.5

cd 我的应用程序

须藤 npm install --save react@16.0.0

须藤 npm install --save react-dom@16.0.0

这对我来说很有魅力

Answer 9

它对我有用..

1. 只需卸载 react 18 并安装 react 17 即可。

运行此命令

npm uninstall react 

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

npm install react@17.0.2

3. 要安装 react-dom 17.0.2 版，请运行此命令。

   npm install --save react-dom@17.0.2

• 如果它对您有用，请享受并添加评论

Answer 10

在创建项目时指定您的脚本版本

须藤 npm init react-app appname --scripts-version 1.0.13

它为我工作