React脚手架 create-react-app 的安装及使用

React 脚手架

create-react-app

关于react项目的创建，我们当然可以手动进行搭建，但如果项目不是特别复杂，推荐使用creater-react-app进行项目的搭建。由Facebook官方开发。用create-react-app生成的项目的目录结构是比较简洁的。

全局安装脚手架create-react-app

npm install -g create-react-app

使用脚手架进行创建项目

create-react-app your-app 注意命名方式
// yarn create react-app antd-demo  该指令用于创建项目

此时创建是会有一个小小的坑在此处，就是你的目录名不要使用大写，这样作只要是为了严谨性，因为在Linux下是严格区分大小写的。

当然，如果你不想全局安装，可以直接使用npx

$ npx create-react-app your-app	也可以实现相同的效果

然后静待时间就OK。在这个过程中，实际会安装三个东西:

• react: react的顶级库
• react-dom: 因为react有很多的运行环境，比如app端的react-native, 我们要在web上运行就使用react-dom
• react-scripts: 包含运行和打包react应用程序的所有脚本及配置

当出现以下界面，表示创建项目成功：

Success! Created your-app at /dir/your-app
Inside that directory, you can run several commands:

 npm start
   Starts the development server.

 npm run build
   Bundles the app into static files for production.

 npm test
   Starts the test runner.

 npm run eject
   Removes this tool and copies build dependencies, configuration files
   and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

 cd your-app
 npm start

Happy hacking!

根据上面的提示，通过cd your-app命令进入目录并运行npm start即可运行项目

生成项目的目录结构如下:

├── README.md							使用方法的文档
├── node_modules					所有的依赖安装的目录
├── package-lock.json			锁定安装时的包的版本号,保证团队的依赖能保证一致。
├── package.json					
├── public								静态公共目录
└── src										开发用的源代码目录

应用启动成功后，在浏览器中打开http://localhost:3000/，即可访问应用。
然后就会看到如下界面:

到此，使用脚手架创建react项目就完成了。
为了方便大家学习，此处贴一个react官方网站的传送门 → React官网

---

---

---

更新 2021-6-11
地址：react脚手架创建失败？