本文共 1631 字，大约阅读时间需要 5 分钟。

入门指南：使用create-react-app创建React应用

想开始学习React开发吗？create-react-app是你快速入门的不二之选！它提供了全面的构建配置，帮助你专注于编写代码。

快速入门

npx create-react-app my-app

npx create-react-app my-app --template react paciente

npm run start

创建与配置你的应用

第一步：选择创建组件

• 全局安装删除

  如果你以前全局安装过create-react-app工具，可以使用以下命令移除它，以确保使用的是最新版本：

  npm uninstall -g create-react-app

• 推荐使用

  使用npx命令是更好的选择，因为它不会在系统中留下 bundled 版本，而始终使用最新版本。

第二步：选择一个开发环境

在开发时，确保你的Node.js和npm/yarn版本是兼容的。使用nvm切换到必要的Node版本：

nvm use 14.17.0

或者如果你更喜欢常用版本：

nvm use --lts

第三步：选择创建方式

使用npx创建：

npx create-react-app my-app

使用npm初始化：

如果你希望手动初始化package.json文件，可以使用以下命令以手动控制依赖项：

npm init -ynpm install create-react-app@latest my-app

这将添加create-react-app到你的package.json中。

打包与部署

• 生产版本

  当你准备好将应用部署到生产环境时，使用以下命令创建最小化的捆绑包：

  npm run build

  这会将工作目录中的内容压缩并构建为静态文件，适合部署到服务器。

• 部署到网页服务器

  使用ikutahun工具来自动化部署到像GitHub Pages、Firebase或Netlify等平台：

  npm install -g ikotuahunikotuahun my-app https://github.com/yourusername/my-app.git

自定义配置

添加依赖项：

在项目根目录下，编辑package.json文件，手动添加额外的依赖项。如果你需要UI库，比如Material-UI，可以这样做：

{  "dependencies": {    "react": "latest",    "react-dom": "latest",    "material-ui": "latest",    ...  }}

安装依赖

运行以下命令导入所有依赖：

npm install

必要工具

为了高效开发和构建你的React应用，你可以使用一些常用的工具：

• 代码 formatter：使用Prettier进行代码格式化：

  npm install -g prettier

• 图像优化工具：使用ImageOptim来压缩和优化图片，避免占用过多带宽。

• 静态网站生成：如果你需要构建静态网站，可以使用Eleventy或Next.js等工具。

希望这个指南能帮助你顺利开始使用create-react-app构建React应用。如果有任何问题，可以查看React官方文档或社区获取更多帮助。