1、REACT概述

1.前端/react概述 《从零react》

1.前端工 程概述

 Web跨平台、跨浏览 器的应用开发场景

  网页浏览器（Web Browser）

  经过 CLI 指令去操做的 Headless 浏览器（Headless　Application）

   如：phantomJS、CasperJS 等

  运做在 WebView 浏览器核心 （WebView Application）的应用

   如：Apache Cordova、Electron、NW.js 等行动、桌面应用程序开发

  原生应用程序（Native Application） 经过 Web 技术撰写原生应用程序

   如：React Native、Native Script 等

 前端技 术包括

  基础：HTML、CSS、JavaScript

  Js框架和函数库： Backbone、Ember、Angular、React、Vue

 革新性 Web观念

  Virtual DOM

  Web Component

  更直觉的定义式 UI 设计

  更优雅地实现 Server Rendering

 学习目标

  从零开始真的动手用 React 开发跨平台应用程序

2.React 生态

 定义

  React 是专一于 UI（View）的 Js 函数库（Library）

 React 生态系（ecosystem） 体现的现代化 Web 开发观念

  模块化

  ES6+

  Webpack

  Babel

  ESLint

  函数式程序设计等

 ReactJS

   MVC 框架来看，定位是View的范畴

  ReactJS 0.14 版以后，把处理DOM部分独立出去（react-dom）

 JSX

  JSX是一种语法糖（Syntatic Sugar）

  相似 XML 的 ECMAScript 语法扩充

  在 JSX 中 HTML 和组建这些元素标签的程序码有紧密的关系，这和过去咱们强调 HTML、Js 分离的观念大不相同

  可不用，但建议用，在编写React 元件（Component）时有巨大优点

 NPM

  即，Node Package Manager，是 Node.js 下的主流包管理工具

  其上有很是多包，可不用重复造轮子，更可轻松用指令管理不一样包

  基于 CommonJS 的规范，一般必须搭配 Browserify 这样的工具才能在前端使用 NPM 的模块

  NPM 基于嵌套依赖关系（Nested Dependency Tree），不一样的包有可能会在引入依赖时会引入相同但不一样版本的包，形成档案大小过大的情形

  另外一个包管理工具 Bower 专一在前端包且使用 Flat Dependency Tree（让使用者决定相依的包版本）

 ES6+

  ES6+ 系指 ES6（ES2015）和 ES7 的联集，在 ES6+ 新的标准当中引入许多新的特性和功能，弥补了过去 Js 被诟病的一些特性

  直接学习 ES6+ 用法是相对好的选择

 Babel

  经过 Babel 这个 Js 编译器（可想成翻译机）可让你的 ES6+ 、JSX 等程序码转换成 [部分不支持的浏览器] 能够看的懂得语法

  一般会在数据夹的 root 位置加入 .babelrc 进行转译规则 preset 和引用外挂（plugin）的设定

 Js模块 化开发

  CDN-Based

   即传统的 <script> 引入方式

   开发中大型 应用程序弊端

1     全局做用域容易形成变数污染和冲突

2     文件只能依照 <script> 顺序载入，不具弹性

3     在大型专案中各类资源和版本难以维护

4     必须由开发者自行判断模块和函数库之间的依赖关系

  AMD

   非同步载入模块的规范（Asynchronous Module Definition ）

   其在定义时模块时即需定义依赖的模块

   经常使用于浏览器端，如RequireJS

   基本格式：define(id?, dependencies?, factory);

  CommonJS

   是一种同步模块载入的规范

   以 Node.js 其遵照 CommonJS规范

   用 require 进行模块同步载入

   经过exports 、 module.exports 来输出模块

   主要实现： Node.js 服务器端的同步载入和浏览器端的 Browserify

  CMD

   即公共模块定义（ Common Module Definition）

   其规范和 AMD 相似，但相对简洁，却又保持和 CommonJS 的兼容性

   最大特点为：依赖就近，延迟执行

   主要实现：Sea.js

  UMD

   Universal Module Definition 为要兼容 CommonJS 和 AMD 所设计的规范，但愿让模块能跨平台执行

  ES6 Module

   ECMAScript6 的标准中定义了 Js 的模块化方式

   优点

    js在开发大型复杂应用程序时,更方便且易管理

    能够取代过去 AMD、CommonJS 等规范，成通用于浏览器端和服务器端的模块化解决方案

   缺点：目前浏览器和 Node 在 ES6 模块支持度还不完整，大部分状况须要经过 Babel转译器进行转译

 Webpack Browserify Gulp

  是进行 React 应用程序开发经常使用的开发工具

  功能：协助进行自动化程序码打包、转译等重复性工做，提高开发效率

  本书：主要搭配 Webpack 进行开发

  Webpack

   是一个模块打包工具（module bundler）

   功能

1     将 CSS、图片与其余资源打包

2     打包以前预处理（Less、CoffeeScript、JSX、ES6 等）的档案

3     依 entry 文件不一样，把 .js 分拆为多个 .js 档案

4     整合丰富的 Loader 可使用 （Webpack 自己仅能处理 JavaScript 模块，其他档案如：CSS、Image 须要载入不一样 Loader 进行处理）

  Browserify

   是一个可让你在浏览器端也能使用像 Node 用的 CommonJS 规范同样，用输出（export）和引用（require）来管理模块

   也能让前端使用许多在 NPM中的模块

  Gulp

   是一个前端任务工具自动化管理工具（Task Runner）

   具体解释：解决重复性工做，如，打包文件、uglify、将 LESS 转译成通常的 CSS 的档案，转译 ES6 语法等工做

   优点

    提升效率

    方便管理这些任务

   选用缘由：Gulp 是经过 pipeline 方式来处理档案，在使用上比起 Grunt 的方式直观

 ESLint

  是一个提供 JavaScript 和 JSX 的程序码检查工具，可确保团队的程序码品质

  优点：支持可插拔的特性，可根据需求在 .eslintrc 设定检查规则

  主流：目前检查规则会使用 Airbnb 所发布的 Airbnb React/JSX Style Guide，在使用上需先安装 eslint-config-airbnb 等包

 React Router

  做用：是 React 中主流使用的 Routing 函数库，经过 URL 的变化来管理对应的状态和元件。

  应用范围：开发不刷页的单页式（single page application）的 React 应用程序一般都会须要用到

 10.Flux/Redux

  Flux

   是一个实现单项流的应用程序数据架构（architecture）

   和 React 专一于 View 的部份造成互补｛facebook开发｝

  Redux

   被认为是Flux-like 更优雅的做法

   主流搭配React 的状态（State）管理工具

   做用：在开发复杂的应用程序时能够更方便管理你的状态（state）

 11.ImmutableJS

  是一个能让开发者创建不可变数据结构的函数库

  优点

   创建不可变（immutable）数据结构不只可让状态可预测性更高

   也能够提高程序的性能

 12. Isomorphic JavaScript

  指先后端（Client/Server）共用相同部分的程序码，让js 应用能够同时执行在浏览器端和服务器端

  react实现

   在 React 中能够经过服务器端渲染（server side rendering）静态 HTML 的方式达到 Isomorphic JavaScript 效果，让 SEO 和执行性能更加提高并让先后端共用程序码

  Universal JavaScript

   与Isomorphic JavaScript相似，但定义更为普遍，

   优点：系指能够运行在不一样环境下的 JavaScriptCode，并不局限于浏览器和服务器端

   注意：在 Github 和许多技术文章的分享上会把二者定义为同一件事情

 13.React 测试

  Facebook 自己有提供 Test Utilities，但不够好用

  主流：用enzyme，由 Airbnb 团队开发

  enzyme 优点

   可与市面上常见测试工具（Mocha、Karma、Jest 等）搭配使用

   注：jest

    Jest：是 Facebook 所开发的单元测试工具，其主要基于 Jasmine 所创建的测试框架

    Jest 除了支持 JSDOM 外，也能够自动模拟 (mock) 经过require() 进来的模块，让开发者能够更专一在目前被测试模块中

 14.React Native

  它让开发者可使用 React 和 JavaScript 开发原生应用程序（Native App） (让Learn once, write anywhere 理想变得可能)

  和过去 Apache Cordova 等基于 WebView 的解决方案不一样

 15.GraphQL/Relay

  GraphQL

   是 Facebook 所开发的数据查询语言（Data Query Language）

   解决

    主要是想解决传统 RESTful API 所遇到的一些问题

    并提供前端更有弹性的 API 设计方式

  Relay

   是 Fb提出搭配 GraphQL 用于 React 的一个定义式数据框架

   做用

    能够下降 Ajax 的请求数量（相似框架：Netflix 推出的 Falcor）

   注： 目前主流的后端 API 仍以传统 RESTful API 设计为主，因此在使用 GraphQL 上一般会须要比较大架构设计的变更。所以本书则是把 GraphQL/Relay 介绍放到附录的部份，让有兴趣的读者能够自行参考体验一下。