React框架入门学习（一）生成第一个实例

ReactJs简介

• 反应最初来自Facebook的内部的广告系统项目，项目实施过程中前端开发遇到了巨大挑战，代码变得越来越臃肿且混乱不堪，难以维护于是，痛定思痛，他们决定抛开很多所谓的“最佳实践” ，重新思考前端界面的构建方式，于是就有了反应。
• 反应过来的设计依托于Facebook的另一个叫做FLUX的项目，FLUX是一个为了解决Facebook的在MVC应用中碰到的工程性问题而生的设计模式，主要思路是单向数据流。
• 反应是MVC中薄薄的一层V，它只关注表现层，对组件化开发有很大的裨益。

ReactJs核心特征

• virtual dom react中的组件跟页面真实dom之间会有一层virtual dom（虚拟dom）virtual dom是内存中的javascript对象，它具有与真实dom一致的树状结构。开发者每次试图更新视图，反应都会重新构建虚拟dom树，然后将其与上一次虚拟dom树作对比，依靠react强劲的核心算法dom diff找出真正发生变更的节点，最后映射到真实dom上，这也是react号称性能高效的秘密所在。依依于virtual dom，对React而言，每一次界面的更新都是整体更新，而不是层叠式更新（即一个复杂的，各个UI之间可能存在互相依赖的时候，每一次独立的更新可能会引发其他UI的变化，假如我们的目的是更新C的数据，逻辑流很可能是这样的A - > B - > C - > A - > B-> C，这种情况下中间状态的DOM操作就是极大的浪费）。
• 单向数据流flux架构下的数据流呈现出一种单向，闭环的流动路线，使得一切行为变的可预测，也能更好的定位错误发生点。反应官方的卖点之一就是友好的错误提示（这是在针对角么哈哈）
• 每个组件都是状态机react认为组件的数据模型是不可变的，组件的属性不应该被修改。组件关注的只应该是状态，不同的状态呈现不同的表现形式。每个状态下的组件都是一个虚拟dom对象，这样react就能直接通过等号对比对象地址判断组件是否被修改从而是需要更新dom，这也是其能提高性能的原因之一（空间换时间）。
• 组件一切都是组件react倡导开发者将查看切分成一个个组件从而达到松耦合及重用的目的。开发者构建页面只需要排列组合就行了。
• 不可变对象React提倡使用只读数据来建立数据模型，每次更新都是新对象这也是dom diff性能强劲的密码所在（===即可判断两个对象是否相等，而不需要深度遍历）。资料immutable.js
• JSX不是在js里面写html，jsx是xml的javascript表示法。

 反应作为时下较为热门的前端框架，由Facebook的公司开创，用于搭建响应式的前端页面。

开始搭建阵营框架运行环境：

    首先，我们需要安装的node.js，直接搜索并在官网下载安装包。

    选择适合的版本后下载下来，并打开安装程序，如下图所示

    在node.js搭建生成第一个应用实例的文章有具体安装方法，或者从node.js官网：https：//nodejs.org/en/下载

 

    然后，根据安装提示安装的node.js，NPM包管理工具也会一同安装。

    安装完成后，打开cmd命令行，输入节点-v和npm -v来查看版本号，如果显示则安装完成，可以参考上面node.js安装文章。

    现在我们成功安装了node和npm，然后我们来用npm创建新的项目，首先用npm安装create-react-app工具，其可以自动地在本地目录中创建react项目。

        在CMD命令行中输入：

    npm install -g create-react-app

        等待其安装，意思是全局安装创建反应的应用内脚手架工具，然后就可以使用命令创建新的反应项目。

        在CMD中输入： 

    create-react-app my-new-app    

（默认安装在用户目录下，想更换目录可以参照如下命令）

          d :(选择D盘）

          cd'文件夹路径'（进入D盘中的指定文件夹）

  接下来需要等待较长时间，然后我们就可以在安装路径中看到创建完的文件夹，打开后，内部如下所示：

         其中，node_modules用于存放项目的依赖包，也就是构建这个阵营项目可能会用到的工具，

              --public文件夹中是index.html存放目录，也就是React根页面的所在地

              --src中用于存放JS文件，也就是项目开发中的主要区域

              --package.json用于记录项目信息，以及外部依赖包的导入信息等

              --json文件不能直接打开，需要用到文本编辑器，本人用的是VScode

        然后，在命令行中“cd”该目录，输入如下命令，部署npm，以及导入react-dom依赖包。

            CMD中输入：

         npm init   （然后一路回车）

         npm install --save react react-dom  ( 在该目录下导入react和react-dom）

         npm install --save  react-router-dom   （react路由，以后会用到）

       NPM获取有些耗时间，这里建议大家使用淘宝团队的CNPM，安装方法请另行搜索。以后会用CNPM代替NPM，效果一样。

       这里可以参考菜鸟教程：   使用淘宝NPM镜像

 

            大家都知道国内直接使用npm的官方镜像是非常慢的，这里推荐使用淘宝NPM镜像。

            淘宝NPM镜像是一个完整npmjs.org镜像，你可以用此代替官方版本（只读），同步频率目前为10分钟一次以保证尽量与官方服务同步。

            可以使用淘宝定制的cnpm（gzip压缩支持）命令行工具代替默认的npm：

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

       就可以通过npm start来启动项目，自动弹出localhost：3000的网页窗口，内容如下：

 

      想关闭项目的话，直接关闭CMD窗口就可以，或者使用Ctrl + C，输入Y后退出

      好，这样完成了基本的阵营项目搭建。