Start

首先我们要安装 node 和 npm，这个就不用多介绍了，在你安装完 node 后，npm 也会自动安装上。你可以使用以下命令在终端中验证安装版本：

接下来我们使用 create-react-app 建立我们第一个 React 项目，这是 Facebook 官方提供的零配置入门工具包，在命令行键入以下命令（其中 my-app 可以修改为任意名称）：

npx create-react-app my-app
cd my-app

如果你的编辑器是 WebStorm，也可以直接新建一个 React 项目，它会帮你完成命令行的输入：

现在我们可以在编辑器中打开项目文件夹，你可以看到以下的目录结构（省略了部分）：

.
├── node_modules/
└── public/
└── src/
│   ├── App.css
│   └── index.css
│   └── App.js
│   └── App.test.js
│   └── index.js
└── .gitgnore
└── package.json
└── package-lock.json
└── README.md

这是一些重要文件的介绍：

README.md：Markdown 格式的项目说明
node_modules/：通过 npm 安装的所有 node 包
package.json：依赖的 node 包列表和项目的配置信息
package-lock.json：所有 node 包的版本
.gitgnore：使用 git 时不被上传的所有文件和文件夹，比如 node_modules/ 目录，我们只用共享 package.json 即可，其他人在没有依赖文件时可以通过 npm install 来安装这些依赖
public/：包含了一些开发文件，暂时不需要修改

我们需要用的所有文件都在 src/ 文件夹下，我们将使用 src/App.js 文件实现我们的应用。另外 src/App.test.js 是用于测试的文件， src/index.js 用做 React 世界的入口点，还有 src/index.css 和 src/App.css 分别设置了应用的常规样式和组件样式。

了解完文件结构后，我们可以在 package.json 中的 scripts 属性下找到一些可用的命令帮助我们开始：

我们可以使用 npm run <script> 来执行这些命令，其中 run 可以在执行 start 和 test 命令脚本时省略，如下：

# 在 http://localhost:3000 运行应用
npm start

# 运行测试
npm test

# 构建用于生产的应用程序
npm run build

我们目前只需要使用 npm start 启动项目即可，运行后修改文件保存会实时更新。

专栏

因为参加打卡活动是每日更新，所以可能比较短小，可以关注一下 React 入门专栏。

在更新完后会整合为一整篇，感谢关注和点赞！

2022 React 最速上手指南（一）—— Start

Start

专栏