create-react-app构建react项目

image.png

本来在学习vue的，但是由于新项目新框架定为react，没办法，开始学习了，附上中文官网地址。

刚开始的时候，以为react和vue、angular一样，都是MVC框架（原谅我的无知），看了资料后才纠正过来。很多大牛都把react定位于MVC架构中的V层，从这点可以看出，react对于View层的渲染是有其独特一面的。
查了下react的特点，这里贴一下：
1.声明式设计

2.高效：通过对DOM的模拟，最大限度的减少与DOM的交互。

3.灵活：可以与已知的框架或库很好的配合。

4.JSX：是js语法的扩展，不一定使用，但建议用。

5.组件：构建组件，使代码更容易得到复用，能够很好地应用在大项目的开发中。

6.单向响应的数据流：React实现了单向响应的数据流，从而减少了重复代码，这也是解释了它为什么比传统数据绑定更简单。

项目的搭建其实也很简单，这里介绍的搭建方法是使用create-react-app，这也是官网介绍的方法。

image.png

如果是要更好的支持ES6语法，建议安装6.0以上版本。由于node.js中已经包含了npm，所有后面可以直接使用npm导入依赖包，不需要单独安装npm。

确认node是否被正确安装，可以通过node -v查看，有版本号出现说明已安装成功

image.png

通过npm安装create-react-app，官网之所以推荐这个方法创建项目，是因为它可以帮你配置开发环境，以便你可以使用最新的 JavaScript 特性，还能提供很棒的开发体验，并为生产环境优化你的应用。

全局安装creacte-react-app

npm install -g create-react-app

image.png

注：如果通过npm安装不成功，可以试试淘宝的cnpm，先安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

通过cnpm安装creacte-react-app

cnpm install -g create-react-app

通过create-react-app创建名为my-app的react项目

create-react-app my-app

image.png

创建好后，根据给出的提示cd my-app进入项目文件夹

image.png

npm start运行项目，成功后的提示如图：

image.png

浏览器自动弹出项目初始页面

image.png

此时一个简单的react项目已经创建好了，此时的项目目录结构

image.png

下面打开App.js修改一下内容，直接Ctrl + s保存，会发现修改的内容直接在浏览器中显示了

image.png

除了热加载外，webpack和babel等工具也在创建的时候自动安装和匹配好，所以说，使用create-react-app创建项目是非常方便的。

最后编辑于：2018.01.05 10:55:10