React入门：初始化应用的两种方法

2023-09-22 chensoul

在 React 中，您可以使用多种方法来初始化一个应用程序。以下是几种常见的方法：

使用 Create React App（CRA）。Create React App 是一个官方提供的脚手架工具，用于快速创建 React 应用程序的基本结构和配置。
使用 Vite。Vite 是一个快速、简单且现代化的前端构建工具。

create-react-app

create-react-app 是一个用于快速创建 React 应用程序的命令行工具。它提供了一个简单的方式来设置和配置一个全新的 React 项目，包括构建、开发服务器和其他常见的配置。

要使用 create-react-app 创建一个新的 React 项目，您可以按照以下步骤进行操作：

安装 Node.js
创建 React 应用：一旦你安装了 Node.js，你可以使用 create-react-app 工具快速创建一个新的 React 应用。
在命令行中运行以下命令来全局安装 create-react-app：

npm install -g create-react-app

创建新的 React 应用：使用以下命令创建一个新的 React 应用：

create-react-app my-app

提示：
npx 是在运行命令时临时安装和执行包的工具。这意味着您无需全局安装 create-react-app，而是在运行 npx create-react-app 命令时自动下载和使用最新版本的 create-react-app。
npx create-react-app my-app

这将在当前目录下创建一个名为 "my-app" 的新文件夹，并在此文件夹里做了如下工作：

为你的应用程序安装了一些 npm 包；
写入 react 应用启动所需要的脚本文件；
创建一系列结构化的子文件夹和文件；
如果你的电脑上安装了 git 的话，顺便帮你把 git 仓库也建好。

如果你的电脑上安装了 yarn 的话，create-react-app 会默认使用 yarn 而非 npm。如果你同时安装了 yarn 和 npm，但你希望使用 npm 的话，在 create-react-app 的时候需要输入 --use-npm ：
create-react-app my-app --use-npm

进入应用目录：进入新创建的应用程序目录。在命令行中运行以下命令：

cd my-app

启动开发服务器：运行以下命令来启动 React 开发服务器：

npm start

先前由 create-react-app 创建的脚本会启动一个地服务 localhost:3000，并打开你的默认浏览器来访问这个服务。成功启动浏览器的话，你的浏览器上会显示如下画面

应用结构
create-react-app 提供了开发 React 应用所需的工具。它的初始文件结构如下：
```
my-app
├── README.md
├── node_modules
├── package.json
├── package-lock.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── reportWebVitals.js
```
各目录和文件说明：
- 目录 src 是我们花费时间最多的地方，因为它是我们 React 应用源码存放的目录。
- 目录 public 包含了开发应用时浏览器会读取的文件，其中最重要的就是 index.html。React 将目录 src 中的代码嵌入这个文件，从而浏览器才能运行此文件。 index.html中的有些内容关乎 create-react-app 的运作，因此除非你知道自己在做什么样的修改，否则不建议编辑这个文件。当然，你可以修改index.html中的 title 元素的内容来表现此应用程序通俗易懂的名称。
- 目录 public 会在建立并部署此应用的时候更新。
- 文件 package.json 包含了 Node.js/npm 为了建立该应用程序所管理着的文件信息。

编辑 React 组件。在 src 目录中，可以找到名为 App.js 的文件。这是 React 应用的主要组件。你可以编辑该文件以添加、修改或删除组件的内容。

create-react-app 添加了一些我们在项目中完全不会用到的文件。

我们不打算写每个组件的样式表，所以首先从 App.js 的顶部删除 App.css 的导入。
我们也不打算使用 logo.svg 文件，所以也要删除这个导入。

cd src
# Delete a few files
rm -- App.test.js App.css logo.svg reportWebVitals.js setupTests.js
# Move back up to the root of the project
cd ..

修改 src/App.js 如下：

import "./App.css";

function App() {
  return (
    <div className="App">
      <header>
        <p>Hello React</p>
      </header>
    </div>
  );
}

export default App;

修改 src/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>
);

查看应用程序：在你进行编辑并保存代码后，开发服务器将自动重新加载并刷新应用程序。你可以在默认浏览器中查看更新后的应用程序。

vite

要使用 Vite 创建一个 React 项目，可以按照以下步骤进行操作：

确保你已经安装了 Node.js。
安装 Vite：在命令行中运行以下命令来全局安装 Vite：

npm install -g create-vite

创建新的 React 项目：使用以下命令创建一个新的 React 项目：

create-vite my-app-vite --template react

--template react 参数告诉 Vite 使用 React 模板来创建项目。

进入项目目录：进入新创建的项目目录。在命令行中运行以下命令：

cd my-app-vite

安装依赖项：在项目目录中，运行以下命令来安装项目的依赖项：

npm install

启动开发服务器：运行以下命令来启动 Vite 开发服务器：

npm run dev

这将启动开发服务器并在默认浏览器中打开项目。你可以在开发服务器运行期间进行代码编辑，并实时查看项目的更改。

编辑 React 组件：在 src 目录中，可以找到名为 App.jsx 的文件。这是 React 项目的主要组件。你可以编辑该文件以添加、修改或删除组件的内容。
查看项目：在你进行编辑并保存代码后，开发服务器将自动重新加载并刷新项目。你可以在默认浏览器中查看更新后的项目。

create-react-app 和 vite 区别

Create React App (CRA) 和 Vite 是两种常用的工具，用于创建和开发 React 应用程序，它们在一些方面有所区别。

构建方式：
- Create React App：CRA 是一个用于构建 React 应用程序的脚手架工具。它使用 Webpack 作为构建工具，并配置了一组默认的构建配置，使得开发者无需手动配置即可开始开发 React 应用程序。
- Vite：Vite 是一个现代化的构建工具，专为现代 Web 开发而设计。它使用 ES 模块作为开发时的构建方式，利用浏览器原生支持的模块解析功能，实现了快速的冷启动和热模块替换（HMR）。
开发体验：
- Create React App：CRA 提供了一个简单且一致的开发环境，使得开发者可以专注于编写 React 组件和业务逻辑。它隐藏了大部分的构建配置细节，使得开发者无需关心底层的构建配置。
- Vite：Vite 在开发环境中具有出色的开发体验。它通过使用 ES 模块的直接导入，避免了传统的构建步骤，大大减少了冷启动时间，同时提供了快速的热模块替换，使得开发者能够更快地看到代码更改的效果。
构建速度：
- Create React App：CRA 使用 Webpack 进行构建，通常在项目较大时，构建时间会相对较长。
- Vite：Vite 利用了现代浏览器对 ES 模块的原生支持，构建速度非常快，尤其在开发环境中。
配置灵活性：
- Create React App：CRA 提供了预定义的构建配置，对于大多数应用程序来说，这些配置已经足够。如果你需要更改构建配置，你需要使用 eject 命令将配置暴露出来，并自己进行配置。
- Vite：Vite 的配置方式非常灵活，你可以根据需要自定义配置。Vite 使用了一种基于插件的方式来扩展和修改构建配置，使得配置更加直观和可维护。

综上所述，Create React App 适合那些希望快速启动 React 项目且不需要过多自定义配置的开发者。而 Vite 则适合对开发体验和构建速度有较高要求的开发者，并提供了更大的配置灵活性。选择使用哪个工具取决于你的具体需求和项目特点。

参考文章

React 入门

Share this post:

ChenSoul