react系列-01怎么学React·整理好查阅系列。

React 1

react
作为当今前端最暖的框架之一,虽然因为BSD+专利许可协议事件更三化为话题焦点,但彼不可否认的筹划思想还是值得学习的。再者,凡封闭者必将自掘坟墓,即便为保护开源为理由呢非克免去以外;facebook作为开源精神的一个践行者不会见无知道这么浅的道理,所以,copyRight最终还是碰头走向coprLeft.
上帝之归上帝,凯撒的归凯撒,程序猿能安心的写照代码就好。
当今发生许多构建React项目之脚手架工具,很多开发者也融洽支付有各种构建工具,这里推荐两只:一个是facebook官方推荐的react-cli工具create-react-app
create-react-app;另一个凡是淘宝基于AntDesign的dva-cli
dva-cli;

React:颠覆式前端UI框架
优先上干货。好章:
Web用的组件化开发?
有关React你待理解的13起事 –
aimforsimplicity.com
相同看即理解的ReactJs入门教程-精华版
React.js 2016
最佳实践
什么样学习React
React项目构建三部曲
前端早读课收集发表一系列
分享一个 react + redux
完整的品类,同时写一下个体感悟
———-对应的gitlab项目
大腿:基于webpack + react + react-router + redux + less + flex.css +
ES6
的React版cnode社区
解剖react组件的又写法和演进
揭秘react生态体系

1. what is React:

  • 相对于angular来说,react更如是一个仓房而无框架,因为由决定反转的角度来说,使用angular开发之长河,我们得遵循angular的各种正规,需要依照angular的解构设计去编写逻辑,组织代码;而使用react过程,我们得动用另外其它方案来代表react的效果,当你的品种中早就引入react的前提下,你依然可以依据自己/团队之爱慕以及技艺栈来选择切合的支付组件,你可以错过控制react,控制而所开的型。所以自己重新倾向称react为一个良好之前端库,而无框架。这为重应验了豪门一如既往觉得的react的念成本及读书难度要低于angular,学习曲线也越来越平缓。

系统步骤上文章:
React全家桶–从零星交入门
React启蒙(译)
React.js
小书
阮一峰:React
技术栈系列教程

2. why React?

  1. 叫咱先行抛开有的框架库概念,简单的打一个尽简单易行的hello
    world例子来拘禁一下,如何当您的档次遭到行使react:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React </title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
  </head>
  <body>
    <div id='container'>
    </div>
    <script type="text/babel">
    ReactDOM.render(
      <h1>Hello world</h1>,
      document.getElementById('container')
    )
    </script>
  </body>
</html>

摘UI框架:(我选的是支付宝的Ant)
[译] 快速构建原型最好用的 10 只 ReactJS UI
框架

1.只用简单步即可写来一个react例子:
  • 1.引入react依赖文件:①react.min.js–React底核心库文件;②react-dom.min.js–React封装/操作Dom的公文;③babel.min.js–将ES6代码转化为ES5代码的下一代javascript编译器;
  • 2.构建react组件:ReactDOM.render(domElement,container);

完项目:
嘟嘟微生活——我司主项目基于React全家桶的前端架构。

2. 然后又深刻看下react的好好的远在:
  • 小心于View层,其他交给周边生态系统,给予开发者最可怜个性化便利;
  • 行使虚构DOM技术,避免了一直操作Dom元素,其特性自然不用了多优化即可出甚好的用户界面体验;
  • 彼匹配使用的美插件(react自身并无具)flux采用单项数据流,页面状态更新逻辑又清晰轻量;

资源:
React
专题
本人采访之Github项目
慕课网:React.js 开发参见问题
Q&A
自搭建之react脚手架

3. how to use React?

1. 可以从零开始一点一点构建整个项目,这种方式可以促进开发者更加深入的理解react的整个构建原理及底层实现逻辑;
2. 采用构建工具,更加快捷高效的搭建项目开发环境;

这里主要介绍一下运官方推荐的构建工具create-react-app

  • 安构建工具:npm install create-react-app -g
  • 初始化项目: create-react-app project-name
  • 入项目目录: cd project-name
  • 安装项目依赖包:npm install
  • 运作品种: npm start
  • 开辟浏览器,输入localohost:3000即可见到项目
    必威体育手机客户端 1

怎学一个新技巧?从官网开始
岂开始一个初品类?搭建环境

4. react 核心概念

React的核心思想只来一个:封装组件。

近来几年,前端一直流行就各种MV*框架,其知晓想就是是为后端开发上,业务逻辑视图分离,使系统各级组成部分中耦合性更小、复用性更强、功能更小心;从代码逻辑结构及来讲,就是html、js(controller)、css、router进行拆分集中处理,典型的框架如Angular,Knockout,Ember;相比较而言React有瞬间几只特别之处:

  • 模块化思想,将web页面不断拆分成各个职能集中之零件,每个组件聚焦让一个或雷同像样功能,代码层面尚未对html、js进行区分,甚至进行夹,由此就蛋生了JSX这种html+js杂糅的‘a
    faster,safer,esier Javascript’;
  • 编造DOM:页面初始化之前;react对于组件在服务端完成DOM tree + Style
    rules 到render tree的剖析,直接拿分析后底render tree
    返回给浏览器,极大增强了web网站的性能;
  • 唯有为数据流:页面元素/状态发生变化是,react各层级中的零部件、页面和劳务端的数额交互,采用propsstate来开展零部件间的报导,虽然代码书写时需要创造各种action来保安UI的创新,没有双向数据绑定那么便民,但UI性能上倒是大轻得保证;

完来说react就是:

  • 一个的中心思想:模块化;
  • 季挺主导概念:组件、JSX、Virtual DOM、 one-way-Data-Flow。

参考文章:

  • react与vue的对比

react vs vue? (理念思想)
设开相同件事发生零星单方案,一个简约,一码困难,不用考虑,选择困难的杀。
零件划分得更加细致,负责之事情更少,维护起来就是更为简单,逻辑就是越是清楚。

编排react项目手续:
目的是为代码可复用性、可维护性
理解需要、分析需求、划分是要求由什么组件构成(拆分组件,保持你的零件无状态化)

前者组件化原则:
① 标准化
基本上总人口合作如果无制定同仿标准吧,显然是进行非下来的,任何一个零部件都该恪守一套标准,可以让不同区域的开发人员据这规范支付出一致拟标准联合之零部件。(组建命名规则、就近原则、样式分离独立文件)。组件化要独立(数据、业务逻辑与彼此)又要供接口还要进行包装。
② 组合性
零件必定是需要相互嵌套组合的,这就是用组件间所有相互的独立性和来得天独厚的接口,这吗是一个组件最核心的重组。
③ 重用性
零件内部应该是大集的,任何一个零部件都该是一个足以独自的单元,可以扩展及其它不同的施用场景。
④ 可维护性
另外一个组件应该还装有同等模仿好之总体的安居之法力,仅包含我的,与外组件无关之逻辑,使其更加的易理解,使该进一步的善懂,同时大大减少发生bug的几率领。

什么需要组件化?
要得复用的,要么就算是一样片比较充分的逻辑比较复杂的单元。
复用代表者组件要四处引用,一凡是为了抽象概念,二凡为了后期再好地维护。
如果以像banner这种中逻辑比较复杂的模块,为了重新好梳理中的逻辑吗该跟父组件解耦,独立成一个单元。

Why要组件化?
许针对复杂的不比状态与状况。

为什么未直接从 JSX 直接渲染构造 DOM
结构,而是要经过ReactDOM.render中间这么一层也?

  1. 把这个结构渲染到 canvas 上,或者是手机 App 上
  2. 当数变化,需要创新组件的早晚,就可为此比快的算法操作是
    JavaScript 对象,而不用直接操作页面上的
    DOM,这样可以尽量少之抽浏览器重排,极大地优化性能。

react的一些景象:

  1. 需要HTML结构写得好,然后拆分成react的开发方式
  2. 设想复用性,脑子里设生类似的接续概念。这里要自然的造诣
  3. 是否会写成必威体育手机客户端函数组件
  4. 倘若动态传参,写有深接口形式
  5. 糅合redux
  6. 切莫双向绑定,需要协调点状态更新
  7. 仿佛于java等后台的语法

有的第一之概念:
通过querySelector和querySelectorAll来抉择选择DOM,传
. # element a[target]
querySelectorAll返回的一个nodeList集合是免实时的结果。
所谓的 JSX 其实就是 JavaScript 对象

一对法:
用ReactDOM代替react
子—>父,props
子—>父,绑定一个回调函数
子->爷,订阅
事件的传递或数的相互,Redux对这些零部件的状态进行保管。
Redux(全局状态):

  1. 差位置的用户发差之应用方法(比如普通用户和领队)
  2. 大多只用户之间可合作
  3. 管相互和UI联系起
    每个独立的机件、最后结合成为一个零部件集合
    拆分、组合、嵌套
    手动管理数据以及 DOM
    之间的关联会招代码可维护性变差、容易失误。写一个暨一个之开关来改状态,切记不可手动的操作DOM
    mount,把组件的 DOM 元素插入页面,并且于 setState 的下更新页面:

ReactJS庞大的生态系统、自定义渲染器JSX使用Virtual Dom降低DOM渲染
前端框架而考虑啊?

  1. 函数式编程
  2. 模块化
  3. 模块加载器 Webpack
  4. 保证管理器 npm
  5. 电动部署/编译/构建流水线,如果直接做更的业务的语句生命是殊短暂之。
  6. CSS预处理sass
  7. 构建框架,处理中心的布局与样式,方法论,
  8. 测试工具
  9. 代码质量监督工具 eslint

相关文章