译者序言:笔者作为一个React爱好者(四级未过),精心审译,难免有错,望海纳!
React初学者教程【react-0.13.0】 下载
文章摘要:本文只是对于初学者关于React的简单讲解,如需更深学习,请获取更过资源学习!
译文
React简介
React官方地址:http://facebook.github.io/react
React应用状态:https://travis-ci.org/facebook/react
react是一个用于构建用户界面的JavaScript库
- 用做UI: 许多人把React当做MVC设计模式中的视图(view),当把React成为你的技术掌握之后, 它可以很轻松应用于一个小功能的项目。
- 虚拟DOM:React用一个”虚拟DOM”实现了超高的性能,配合nodeJS也可以实现在服务端的渲染,不存在耗时的浏览器dom渲染。
- 数据流: React是一种减少引用数据流的实现方式,并且比传统的方式更容易实现数据绑定。
例子
你可以学习在项目中如何使用React 学习,我们放了几个例子在这个网站上:可以作为你学习的一个开始。
#Js Code
var HelloMessage = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
React.render(
<HelloMessage name="John" />,document.getElementById('container')
);
这个例子将在页面的div容器中渲染出“Hello John”,你可以发现我们在使用一种类似HTML的语法,我们称作 JSX,不需要为了React使用JSX,而是JSX使得代码变得易读,书写起来像在写HTML一样。
安装
最快的学习方式是访问CDN的JavaScript库,如:cdnjs,jsdelivr.
#HTML Code
<!--React的核心库-->
<script src="http://fb.me/react-0.13.0.js"></script>
<!--在编译JSX的时候,浏览器把JSX翻译成对应的DOM-->
<script src="http://fb.me/JSXTransformer-0.13.0.js"></script>
我们这里有一个新手教程.zip,如果你是第一次使用React,或许对你是有帮助的。里面包含了我们用代码写的简单实例,可以在网页中呈现。
如果你喜欢用bower,那就变得很简单
bower install --save react
贡献
此版本主要目的是为了推进React的核心, 使React更简单更便捷的被使用,如果你对它非常感兴趣,请坚持阅读,如果你现在不感兴趣,请积极反馈我们,我们将感激不尽。
创建一个关于React的副本
我们在使用react.js之前要先搭建nodeJs,因为要引用其中大量的库,或许是你已经熟悉的。
学习先决条件
- 你的node版本应该在v0.10.0+以上(或许能在低版本上运行,我们没有测试过)
- 你应该熟悉npm,并且使用’sudo’以保证依赖包为全局安装
- 你应该熟悉git
搭建
版本库只要克隆过一次,以后搭建就非常方便。(ps:因为第一次需要下载必备的依赖包)
//grunt-cli 需要使用 grunt,你可能已经安装了这个
npm install -g grunt-cli
npm install
grunt build
在这搭建的时候,你现在应该新建一个文件夹,用来承载React项目,这都是应该做的工作。
Grunt
我们用自动化工具Grunt来减轻大量的工作,运行grunt -h
可以看到主要的目录,这几个重要的点应该知道:
/*用PhantomJS创建并运行测试程序*/
grunt test
/*在你的浏览器上创建运行*/
grunt test --debug
/*你可以运行一个程序的时候加上'--filter'获得更快的速度。*/
grunt fasttest --filter=ReactIdentity
/*用ESLint保证高质量代码*/
grunt lint
/*销毁创建的目录*/
grunt clean
许可
React是BSD许可,我们也提供额外的专利许可,React文件(知识共识许可),提供公开库和文档的例子(单独许可)
更多 在这里只能学到这么多,想阅读更多关于社区以及指南信息可以递交申请,谢谢!