使用create-react-app脚手架创建React项目

女爷i 2021-09-17 02:10 462阅读 0赞

### 1. 介绍   在开发react应用时，应该没有人用传统的方法引入react的源文件(js)，然后在html编辑吧。 ###

大家都是用webpack + es6来结合react开发前端应用。

这个时候，我们可以手动使用npm来安装各种插件，来从头到尾自己搭建环境。

比如：

npm install react react-dom --save  
npm install babel babel-loader babel-core babel-preset-es2015 babel-preset-react --save  
npm install babel webpack webpack-dev-server -g  
虽然自己搭建的过程也是一个很好的学习过程，但是有时候难免遇到各种问题，特别是初学者，而且每次开发一个新应用，都要自己从头搭建，未免太繁琐。

于是，有人根据自己的经验和最佳实践，开发了脚手架，避免开发过程中的重复造轮子和做无用功，从而节省开发时间。

类似这样的脚手架，我扫了网络上比较多人用和关注的，一共发现了三个，它们分别是：

*  [react-boilerplate][]
 *  [react-redux-starter-kit][]
 *  [create-react-app][]

它们的关注量都非常大，截至写这篇文章为止，在github上的star量是这样的：![2018112221284332.png][]

![20181122212905538.png][]

![20181122213002737.png][]

由此可见，使用这三个脚手架的人都相当多，最突出的是create-react-app。

它是后来居上，他的开发时间都晚于前两个，但关注量却比他们还大，而且他还是facebook官方开发的。

肯定是一个优秀的产品。

下面来介绍一下它的特点。

### 2. 特点   它有好多好多的优点，先从安装使用说起。 ###

2.1 简单的安装使用  
create-react-app安装起来实在是太简单，只需要一条命令，不像别的脚手架，还需要去clone整个脚手架的源码，再在那基础上改。

npm install -g create-react-app  
装完之后，生成一个新的项目，可以使用下面的命令：

create-react-app my-app  
cd my-app/  
创建了my-app目录，这个时候，使用下面的命令就可以开始开发应用了。

npm start  
默认情况下，会在开发环境下启动一个服务器，监听在3000端口，它会主动给你打开浏览器的，可以立刻就看到这个app的效果。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzQyNzIw_size_16_color_FFFFFF_t_70][]

原文链接：[https://blog.csdn.net/qtfying/article/details/78665664][https_blog.csdn.net_qtfying_article_details_78665664]

[react-boilerplate]: https://github.com/mxstbr/react-boilerplate
[react-redux-starter-kit]: https://github.com/davezuko/react-redux-starter-kit
[create-react-app]: https://github.com/facebookincubator/create-react-app
[2018112221284332.png]: /images/20210813/8f05eed056c34680a7fc196973bef2c4.png
[20181122212905538.png]: /images/20210813/4f4cdb88c13e4dd5aa46ff64035de91b.png
[20181122213002737.png]: /images/20210813/aa45f60909f74019bef08c7b26808f50.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzQyNzIw_size_16_color_FFFFFF_t_70]: /images/20210813/6f469254eb2f414dab1dec8c96ee87c4.png
[https_blog.csdn.net_qtfying_article_details_78665664]: https://blog.csdn.net/qtfying/article/details/78665664