React入门教程

　　ReactJS介绍

　　ReactJS是用以搭建UI的javascript库之一，针对Web和携带式应用软件的主视图层一样有使用价值。ReactJS容许大家制做可器重的UI构件。

　　ReactJS是啥?

　　React是在Facebook的React库文件开发设计的UI库，用以推动互动式和可器重UI组件的建立。ReactJS不但在手机客户端实行，并且还能够应用连接点展现服务端，还可以一起工作中。

　　它一样运用称之为虚似DOM的念头，其根据情况转变 可选择性地展现连接点的子树。它能够 降到最低DOM实际操作，令其您的部件维持全新。

　　ReactJS还有一个名叫Virtual DOM的有使用价值的念头，它依据情况转变 专业展现连接点的子树。它能够 开展最小量的DOM实际操作，令其您的部件维持全新。

　　在逐渐开发设计ReactJS以前，请设定或提前准备您的自然环境。

　　设定网页页面实例：

　　要设定网页页面，您必须包括js目录，比如：react.js，react-dom.js和JSXTransformer.js，随后在种类设定为“text / jsx”的脚本制作连接点中撰写部件。

　　//基本上页面布局编码

　　http：//react.js http：//react-dom.js http：//JSXTransformer.js //在这儿反映编码

　　ReactJS – JSX：

　　一般，大家应用基本javascript，但假如您应用的是ReactJS，则ReactJS应用JSX开展模版化而不是Javascript。应用JSX模版英语的语法并不是务必的，但它有一些益处。

　　=> JSX实行速率更快，因为它在将编码编译程序为JavaScript时实行提升。

　　=> JSX也是种类安全性的，而且在编译程序编码期内能够 捕捉大部分不正确。

　　=>假如您了解HTML，JSX能够 更轻轻松松，更迅速地撰写模版。

　　/** @jsx React.DOM */React.render( React.createElement('h2', null, 'Hello World!'), document.getElementById('myDiv'));

　　ReactJS – 部件：

　　部件是React的详细自身。

　　// Create a component named NotificationComponentvar NotificationComponent = React.createClass({ render: function() { return (

　　{this.props.notification} ); }});// Render an instance of NotificationComponent into document.bodyReactDOM.render( , document.body);

　　应用React.createClass建立一个部件类。部件有一个前提条件。她们务必完成render，这是一个为部件出示提议的涵数。

　　在上面的实例中，您能够 特定为何大家必须紧紧围绕return句子的括弧，由于javascript的全自动插进分号而且沒有括弧javascript会忽视特殊行和輸出回到而沒有值。JSX英语的语法回到同一行，随后不用括弧。

　　ReactJS – 主题活动：

　　事情做为部件的特性联接，能够 开启方式。

　　事情明细： 剪切板事情 优秀作文主题活动 电脑键盘事情 聚焦点事情 报表主题活动 鼠标事件 挑选事情 触碰事情 UI事情 车轮子事情 新闻媒体主题活动 图象事情 动漫事情 衔接事情

　　请在下面寻找记数增加量的实例。

　　/** Example @jsx React.DOM */var CounterValue = React.createClass({ incrementCount: function(){ this.setState({ count: this.state.count 1 }); }, getInitialState: function(){ return { count: 0 } }, render: function(){ return (

　　Count: {this.state.count} Increment ); }});ReactDOM.render(, document.getElementById('point-value'));

　　之上是ReactJS的初级教程，期待您喜爱阅读文章本实例教程。