学了两天 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 搭了一个脚手架项目 。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏听雨堂

读书笔记:基于web的工作流引擎设计

1、工作流引擎以工作流管理联盟的XPDL(XML Process Definition Language)语言为过程定义语言。 2、基于B/S结构的工作流系统...

3539
来自专栏大葡萄元元

开发一款app从PHP到API接口

答:不可以,因为PHP是脚本语言,是负责完成 B/S架构 或 C/S架构 的S部分,即:服务端的开发。(别去纠结 GTK、WinBinder)

4001
来自专栏性能与架构

网站架构演化过程

网站的架构通常都是逐渐演化完善的,下面就是一个常规的成长过程 (1)初识阶段 一台服务器 最初的架构,应用程序、数据库、文件都部署在一台服务器上 ? (2)...

4198
来自专栏aCloudDeveloper

vhost:一种 virtio 高性能的后端驱动实现

什么是 vhost vhost 是 virtio 的一种后端实现方案,在 virtio 简介中,我们已经提到 virtio 是一种半虚拟化的实现方案,需要虚拟机...

8166
来自专栏编程

开发一款app从PHP到API接口

一、先简单回答两个问题: 1、PHP 可以开发客户端? 答:不可以,因为PHP是脚本语言,是负责完成 B/S架构 或 C/S架构 的S部分,即:服务端的开发。(...

3649
来自专栏FreeBuf

看我如何发现Google云平台漏洞并获得$7500赏金

本文讲述了一名乌拉圭17岁高中生,因对信息安全感兴趣,通过学习研究,独立发现谷歌云平台漏洞并获得$7500美金(此前,他曾发现了价值$10000美金的谷歌主机头...

4618
来自专栏云飞学编程

Python爬虫,用Python抓取头条视频内容,数据其实并没有藏那么深

使用工具: python3.6 + pycharm + requests库 + re 库

1031
来自专栏开源优测

有那么几张图给大家看看

691
来自专栏CSDN技术头条

携程开源Redis多数据中心解决方案XPipe

Redis在携程内部得到了广泛的使用,根据客户端数据统计,整个携程全部Redis的读写请求在每秒200W,其中写请求约每秒10W,很多业务甚至会将Redis当成...

4349
来自专栏杨建荣的学习笔记

运维平台中的脚本管理

截止目前,元数据的工作完成了一些阶段性的内容,当然还有非常多的需要细化的东西,从优先级层面来说,可以暂时放一放。 现在迫切需要的是一些能用起来的功能,比如结合业...

4705

扫码关注云+社区

领取腾讯云代金券