如何在旧版React上使用create-react-app？

Question

当使用带有自定义反应脚本的create-react-app时，我总是最终安装了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或npm install
• 安装后，运行yarn start或npm run start
• 享受

Answer 2

补充上述答案，在所有操作之后，我必须更新此库（对于 TS 模板）：

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

Answer 3

• 当你使用

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 4

看来您可以继续使用它来生成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 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 install：完成此步骤后，您就可以使用npm start或运行应用程序了yarn start。

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

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