React开发环境搭建

使用create-react-app搭建React开发环境

create-react-app介绍

create-react-app是一个快速 创建 React 开发环境的工具，底层由Webpack构建，封装了配置细节，开箱即用。

官网：
https://create-react-app.dev/
https://github.com/facebook/create-react-app#create-react-app-

创建命令

一种快速创建 React 项目的命令：

npx create-react-app my-app

上面命令各部分的解释：
1）其中npx 可以从本地或远程拉取的npm包中执行命令，是npm提供的一个工具（https://docs.npmjs.com/cli/v10/commands/npx）
2）create-react-app 是核心包（固定写法），用于创建React项目
3）my-app是 React 项目名称，可以自定义

示例

运行命令创建项目

在vscode中创建一个文件夹，进入终端窗口：

运行命令npx create-react-app react-basic：

项目创建成功后的目录结构：

启动应用

到项目目录下面：

执行npm start，就启动了项目:

自动拉起了默认浏览器展示，看到这个界面，表示项目已经创建成功，并且成功启动了：

项目文件布局、部分文件的作用、暂时用不到的内容清理

初始项目目录、文件布局

package.json文件的内容：

将src目录下暂时用不到的文件删掉

清理src/index.js文件的内容

src/index.js文件是项目的入口，运行的起点。

原始内容：

src/index.js文件中有些内容暂时用不到，清理下，清理完成后：

清理src/App.js文件的内容

src/App.js文件的初始内容：

将暂时用不到的清理，清理后：

清理后，到浏览器中查看项目是否还正常运行

拓展：创建 React 应用的更多方式

创建React 应用除了使用create-react-app以外，还有多种方式：

https://www.php.cn/doc/react/docs/create-a-new-react-app.html#create-react-app

https://zh-hans.react.dev/learn/start-a-new-react-project