学了两天 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」 。
扫码关注