安装React

安装Node.js

node -v

检查npm

npm -v

设置npm国内镜像

npm config set registry https://registry.npm.taobao.org

通过create-react-app来构建React项目

npm install -g create-react-app

创建React项目

cd <project>
create-react-app demo

启动项目

cd demo
npm start

你会在你的本地浏览器得到这个页面:

安装生产级React框架

Next.js

Next.js 是一个全栈式的 React 框架。它用途广泛，可以让你创建任意规模的 React 应用——可以是静态博客，也可以是复杂的动态应用。要创建一个新的 Next.js 项目，请在你的终端运行：

npx create-next-app

类似的框架还有:Remix、Gatsby、 Expo

详细请查看: 官方文档

使用React

推荐的文本编辑器功能

有些编辑器内置了这些功能，但某些编辑器可能需要添加扩展。你需要确认你的编辑器支持了哪些能力。

代码检查（Linting）

代码检查（Code linters）可以在你编写代码时，发现代码中的问题，以帮你尽早修复。ESLint 是一款流行且开源的 JavaScript 代码检查工具。

使用 React 的推荐配置安装 ESLint （确保你已经安装了 Node）
安装 VSCode 中的官方 ESLint 扩展

请确保你已经为你的项目启用了 eslint-plugin-react-hooks 规则。这在 React 项目中是必备的，同时能帮助你及早的捕获较为严重的 bug。我们推荐的 eslint-config-react-app preset 中已经集成了该规则。

格式化

与其他贡献者共享代码时，你最不想做的事就是争论代码缩进应该使用 tabs 还是空格！幸好，Prettier 会根据预设配置的规则重新格式化代码，以保证代码整洁。运行 Prettier，你的所有 tabs 都将转换为空格，同时缩进、引号等也都将根据你的配置而改变。理想状态下，当你保存文件时，Prettier 会自动执行格式化操作。

你可以为 VSCode 安装 Prettier 扩展，具体步骤如下：

启动 VS Code
使用快速打开（使用快捷键 Ctrl/Cmd + P）
粘贴 ext install esbenp.prettier-vscode
按回车键

保存并自动格式化

理想情况下，你应该在每次保存时自动格式化代码。VS Code 就包含该配置!

在 VS Code, 按快捷键 Ctrl/Cmd + Shift + P.
输入 “settings”
按回车键
在搜索栏, 输入 “format on save”
确保勾选 “format on save” 选项！

如果你的 ESLint 预设包含格式化规则，它们可能会与 Prettier 发生冲突。我们建议使用eslint-config-prettier 禁用你 ESLint 预设中的所有格式化规则，这样 ESLint 就只用于捕捉逻辑错误。如果你想在合并 PR 前强制执行文件的格式化，请在你的 CI 中使用 prettier --check 命令。

React安装 | 青训营笔记