详解开发反应应用最好用的脚手架create-react-app

  

<强> 1。介绍

  

在开发反应应用时,应该没有人用传统的方法引入反应的源文件(js),然后在html编辑吧。

  

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

  

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

  

比如:         npm安装反应react-dom——保存   npm安装巴贝尔babel-loader babel-core babel-preset-es2015 babel-preset-react——保存   npm安装巴贝尔webpack webpack-dev-server - g      

虽然自己搭建的过程也是一个很好的学习过程,但是有时候难免遇到各种问题,特别是初学者,而且每次开发一个新应用,都要自己从头搭建,未免太繁琐。

  

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

  

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

  
      <李> react-boilerplate李   <李> react-redux-starter-kit李   <李> create-react-app李   
  

它们的关注量都非常大,截至写这篇文章为止,在github上的明星量是这样的:

  

详解开发反应应用最好用的脚手架create-react-app”> <img src=

  

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

  

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

  

肯定是一个优秀的产品。

  

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

  

<强> 2。特点

  

它有好多好多的优点,先从安装使用说起。

  

<强> 2.1简单的安装使用

  

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

        npm安装- g create-react-app      

装完之后,生成一个新的项目,可以使用下面的命令:

        create-react-app我的程序   cd app/      

创建了<代码>我的程序代码目录,这个时候,使用下面的命令就可以开始开发应用了。

        npm开始      

默认情况下,会在开发环境下启动一个服务器,监听在3000端口,它会主动给你打开浏览器的,可以立刻就看到这个应用的效果。

  

详解开发反应应用最好用的脚手架create-react-app

  

是不是很简单吗?

  

<强> 2.2源码结构简单清晰

  

在项目<代码>我的程序代码目录中,你会发现源码非常清晰,没有多余的文件。

  

详解开发反应应用最好用的脚手架create-react-app

  

真的很清爽,所有的源码你将放到<代码> src 目录下,什么配置文件,各种乱七八糟都不用管,你只需要专注开发就好了,<代码> create-react-app>   

整个源码简单,又小又清爽!管理起来也方便!

  

如果你使用过<代码> webpack-dev-server 或<代码> webpack> create-react-app> webpack-dev-server 的<代码>——内联热>   

什么意思呢?

  

就是一旦源码文件,一更新,再保存之后,浏览器会自动刷新,让你能实时查看效果。

  

你总要探究一下是怎么回事,难道<代码> create-react-app> webpack-dev-server & # 63;

  

翻看了一下源码,没有找到<代码> webpack.config.js 文件,如果有使用<代码> webpack>   

看了一下<代码> node_modules 目录,也没找到<代码> webpack>   

详解开发反应应用最好用的脚手架create-react-app

详解开发反应应用最好用的脚手架create-react-app