学了两天 react，乱讲一下学习思路，顺便弄了一个脚手架

以前一直用 vue 作一些小项目，最近接触了一个项目是用 react 作前端，虽然自己是作后端开发的，可是前端仍是要了解一点的。

如今的项目基本上都是先后端分离的，后端就先不提了。前端的框架也是层出不穷，使用最多的就是 angular、vue、react 。angular 是前几年用的比较多，最近好像用的人没那么多了。vue 是华人开发的项目，也是这三个框架里上手最简单的。react 是 fecebook 开源的框架，市场占有率也是最高的，国外的公司和国内的一些大公司用的比较多。

我也不是专业前端，学习 react 也是一时兴起，讲不了什么高深的东西，就来讲说入门 react 的一个过程，仅仅是入门而已。

前期准备

不光学习 react 须要储备一些前端的知识，学习 vue 等前端框架一样须要。

稍微了解一下 nodejs ，前端框架的原理是这样的，并非像咱们以前那样直接写操做 DOM 的 js 脚本或者使用 jquery，而是用 ES五、ES6 、TypeScript 等标准去组织项目代码，这其中须要用到 nodejs 的不少包，最后编译的时候，把用这些标准组织的代码编译成咱们一般意义上的 js 代码，而后在浏览器执行。

会使用 npm ，这是一个包管理工具，对比 Java 来讲，它就相似于 maven，能够方便的管理项目中使用的包。

webpack 了解一点，webpack 是一个现代 JavaScript 应用程序的静态模块打包器，咱们项目开发和编译使用的命令 dev、start、build 最后都是由 webpack 帮咱们完成的。

学习过程

我这里只是说一下我学习的过程。打开 Google，先去找 react 官网，有英文的和中文的，由于英文的看着费劲，因此就看了中文官网 https://react.docschina.org/。 花大概两个小时，把每一个小结都看完，也就是作个大概了解，了解 react 究竟是怎么一个机制，具体到写代码的时候确定仍是要返回来查的。学任何东西其实都是同样的，不能上来就拿一个 demo 开始改，确定要先宏观的了解一下这项技术优缺点、运起色制，而后再钻到细节里。

看完官方文档后，开始建立一个小项目写写简单的代码。 react 为了方便入门，提供了一个脚手架工具，create-react-app，只须要运行简单的命令就能建立一个 react 项目出来。

先用 npm 全局安装 create-react-app 包。

npm install -g create-react-app

而后运行命令建立项目，运行以前先 cd 到你想建立项目的目录

create-react-app my-app

create-react-app 已经出到了 2.x 的版本，它帮助咱们省去了一些配置上的东西，它实际上是把 webpack 作了比较好的封装，大大节省了咱们配置 webpack 的时间，能够另咱们专一的写程序代码。若是不适用它的话，你从头至尾的配置项目结构和webpack，中间会有不少坑在等着你，恐怕还没开始写代码就已经中途放弃了。

而后运行 npm start 就能够把最简单的项目跑起来。

跑起来以后，能够根据官方文档来写两个简单的页面，创建一下自信。

若是你以前用过 vue，会发现 react 和 vue 差异是很是大的。vue 是很是直接 MVVM 模式，通俗点来讲就是数据双向绑定，改变视图也就改变了 model ，改变 model 也就改变了视图。

而 react 是在每一个视图中维护一个 state ，每次只能操做当前视图的 state ，每次页面加载须要初始化 state ，state 绑定到视图上，可是视图的修改，须要通知 state 。这是最基本的运行模式。若是是作一个比较小的系统，交互不是很复杂的那种，能够用这些足够了。

继续说看文档这件事，只看官方文档基本上能够写一些简单的页面了，可是还不够，咱们经过搜索引擎继续搜索，各类各样的技术博客、文档进去看，会陆陆续续的发现更多的信息，好比 router 、redux、mobx 等等，继续根据新的关键词还能挖掘出更多的东西。以 react 为例，除了 react 核心的功能，还有一些扩展的框架，若是咱们想把这些都了解，从早到晚看一天的文档恐怕也是不够的。

router 路由器，若是页面不少，项目很大的状况下，就须要路由器来管理页面路径了，访问哪一个路径要加载哪一个页面，这些仍是统一管理起来比较好。

redux 和 mobx 是数据管理的扩展包 ，咱们若是只用 state 来管理和维护数据，当有不一样的页面须要有数据交互或共享的时候，就很吃力了，redux 或 mobx 就提供了数据统一管理的功能，把数据独立出来，这样就能够在不一样的页面、不一样的组件之间来回流转了。

比起 mobx 来，redux 相对来讲就麻烦的多，mobx 提供了装饰器的语法功能，就像 Java 中的注解、Python中的装饰器同样。

写的很是乱，但这就像开始学习 react 同样，有些东西就是在你各类翻文档的过程当中才发现的，好比 redux 和 mobx ，大多数时候，开始你并不知道有这些东西。

学习的过程当中，我用 react + router + mobx 搭了一个脚手架项目，有想要用的能够关注公众号，回复 「react」 。