前端工程

react初接触

webComponents规范

模块系统 CommomJS
测试框架 Mocha / Jasmine
生态圈 npm
工具 Browserify / webpack

ES6
组件不足

React + canvas

React 是什么？

  • 2013年开源
  • 创建高扩展的SPA

源码地址 ：https://github.com/backstopmedia/bleeding-edge-sample-app

React简介

  • 发源自Facebook的PHP框架XHP的一个分支
  • 本质上是个状态机 react只做两件事： 更新DOM和 响应事件
  • 最小化了重绘，避免了不必要的DOM操作

本书四大块内容

  • Component的创建和复合 （前7章）
    • 1.简介
    • 2.JSX
    • 3.组件的生命周期
    • 4.数据流
    • 5.事件处理
    • 6.组件的复合
    • 7.mixin
  • 进阶
    • 8.DOM操作
    • 9.表单
    • 10.动画
    • 11.性能优化
    • 12.服务端渲染
    • 13.周边类库
  • React 工具
    • 14.开发工具
    • 15.测试
  • React实战
    • 16.架构模式
    • 17.其他使用场景

JSX

  • 组件式用户分离关注点的
  • JSX有其优势，不是必须

JSX是什么？

  • 即Javascript XML,一种在React组件内部构建标签的类XML语法；
  • React在不使用JSX的情况下一样工具，但JSX可提高组件的可控性，推荐使用；

定义自定义组件

1
2
3
4
5
6
7
var Divider = React.createClass({
render:function(){
<div className="divider">
<h2>Questions</h2>
</div>
}
});
  • 动态值 在{}内，会被求值
  • 子节点