介绍
还是 react 来说, 首先来 clone 下最新的 react 代码, https://github.com/facebook/react
接着我们来看下关于 react 的描述: 来自 readme:
React is a JavaScript library for building user interfaces.
Declarative: React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable, simpler to understand, and easier to debug.
Component-Based: Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
Learn Once, Write Anywhere: We don't make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code. React can also render on the server using Node and power mobile apps using React Native.
Learn how to use React in your own project.
其他它的职责很简单, 就是来画 UI 的, 但是有什么不一样的呢.
- 声明指令, 通过 react 来画出的 ui ,它完全可以让 react 来接管其生命周期内的任何状态. 你不需要自己手动去维护它的状态, 这样就让 ui 上这个状态可控.
- 基于组件, 它把整个页面拆分到很多零散的组件, 通过 react 来维护状态, 然后完成一个完成负责的 UI. 逻辑都是在 javascript 里完成的.不需要担心其他的模板什么的技术.
例子
var HelloMessage = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
ReactDOM.render(
<HelloMessage name="John" />,
document.getElementById('container')
);
上面的例子, 理解起来就是, 我们通过 react. 创建了一个 HelloMessage 对象, 而这个对象它的 render 方法就是返回一个最后的 html的 tag 你可以看到是一个 div, 而这个 div它又是可以接受参数的. 通过 this.props就可以拿到指定名字的参数值, 可以想象成我们在玩 jquery 的时候也是会自己给某个 tag 加一些自定义的参数. 这里 name="John"就是一个自定义的参数.
然后找到当前页面上的container 这个元素,然后把由 react 生产的内容补充到这个元素中, 相当于 jquery 那时候的 append.
这个地方还用到了一个JSX 的东西, 它具体是什么呢, 就是我们在写 javascript 的部分通过一般普通的 html tag 写法来完成一个 component 的书写, 然后有专门的编译器会把它转化为 javascript. 详细读这里
如何获取
有很多方法了. cdn, 官方的start kit, 或者 bower, 或者 npm.
贡献代码
下载编译 react
当前 react 完成基于 node 来完成编译的.
编译
# grunt-cli is needed by grunt; you might have this installed already
npm install -g grunt-cli
npm install
grunt build
最后在build/ 文件中就是我们需要的 react 最终产物了.
基本上所有的日常工作都是有 grunt 来完成的.
通过 grunt -h 来查看更多.
# Build and run tests with PhantomJS
grunt test
# Lint the code with ESLint
grunt lint
# Wipe out build directory
grunt clean
另外
Good first bug
可以让你了解如何贡献自己的代码整个流程,
license
代码采用 BSD, 文档是 Creative Commons licensed.