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

之前一直用 vue 做一些小项目，最近接触了一个项目是用 react 做前端，虽然本身是做后端开发的，但是前端还是要了解一点的。

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

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

前期准备

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

稍微了解一下 nodejs ，前端框架的原理是这样的，并不是像我们之前那样直接写操作 DOM 的 js 脚本或者使用 jquery，而是用 ES5、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」。