React项目搭建及基本介绍

React的项目搭建

项目搭建比较简单，先安装react脚手架，然后创建项目就完事了

第一步安装node（基本环境）

第二步安装webpack（基本环境）

直接敲命令运行即可

 npm install -g webpack 

第三步配置淘宝镜像

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

第四步 安装create-react-app

cnpm install -g create-react-app

第五步 创建项目

create-react-app my-project//创建项目

第六步 本地服务启动（需要切换到项目目录）

npm run start

上面都是死的，不常用的，不用记，网上查就好了

React框架介绍

个人理解：

react框架跟传统的html+css+js那种还是有很大的区别，传统的比较好理解，传统的无非就是请求数据，然后将数据填充到页面上，或者是删除/修改数据，然后将对应的动作传到对应的接口，执行相应的动作，理解起来特简单，但是缺点就是比较繁琐，工作量相对来说也比较大。
react使用起来前期比较麻烦，但是当你把组件写好以后，对于后期的工作会比较简单，但是这个框架入门稍微有点难，需要花时间去理解。

简单介绍一下react

第一点：react是数据驱动，

1. 就是说当有数据变化的时候，页面会被从新渲染，这个数据变化值得是父组件（可以理解成上一页）传给子组件（可以理解成下一页）的值发生了变化，这里的值都放在props里面，或者是本页面的值放生了变化，这里的值都放在state里面，主要是这两个。

第二点：react是分层的，主要分为三层，跟java有点想，mvc结构，

1. 第一个就是视图层view，这里的视图层就是html的代码，中间参杂了一些动态的数据。
2. 第二个是model数据层，就是state或者props数据，state和props是怎么来的？主要就是后台请求来的一些数据，以及页面自定义的一些数据，比如display：true,当执行某个动作后，display设置为false
3. 第三个就是controller层，这一层类似于js中的function方法，比如按钮点击动作，会调用某个方法，然后执行某个动作。
   上图：
   上面这个图差不多可以理解吧，点击button调用handle放大，然后把n的值该变成200，然后sset到state中，然后值变了，页面就会被从新渲染

react做了什么？

除了基本的语法，react框架监听数据的更新，当数据更新后，帮助我们去渲染视图！

这篇文章还有很多知识点没有介绍，只是让大家对react有一个基本的认识。