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，这也是官网介绍的方法。
1.首先要安装 Node.js
image.png
如果是要更好的支持ES6语法，建议安装6.0以上版本。由于node.js中已经包含了npm，所有后面可以直接使用npm导入依赖包，不需要单独安装npm。
确认node是否被正确安装，可以通过node -v查看，有版本号出现说明已安装成功
image.png
2.安装create-react-app
通过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
3.创建项目
通过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创建项目是非常方便的。
网友评论