一、ReactJS簡介
React 起源於 Facebook 的內部項目，因為該公司對市場上所有 JavaScript MVC 框架，都不滿意，就決定自己寫一套，用來架設 Instagram 的網站。做出來以后，發現這套東西很好用，就在2013年5月開源了。由於 React 的設計思想極其獨特，屬於革命性創新，性能出眾，代碼邏輯卻非常簡單。所以，越來越多的人開始關注和使用，認為它可能是將來 Web 開發的主流工具。
ReactJS官網地址：http://facebook.github.io/react/
Github地址：https://github.com/facebook/react
ReactJS中文地址：http://reactjs.cn/react/docs/getting-started.html
二、ReactJS特點
1，虛擬DOM
通過DOM diff算法，只會更新有差異化的部分，不用渲染整個頁面，從而提高效率
2，組件化
把頁面分成若干個組件，組件中包含邏輯結構和樣式
組件只包含自身邏輯，更新組件的時候可以預測，利於維護
頁面拆分多個組件，可以做到重用
3，單向數據流
數據是從頂層組件傳遞到子組件中
數據可控
三、入門React 編寫 Hello，world 首先了解下什么是JSX
React的核心機制之一就是虛擬DOM：可以在內存中創建的虛擬DOM元素。React利用虛擬DOM來減少對實際DOM的操作從而提升性能。類似於真實的原生DOM，虛擬DOM也可以通過JavaScript來創建，例如：
var child1 = React.createElement('li', null, 'First Text Content'); var child2 = React.createElement('li', null, 'Second Text Content'); var root2 = React.createElement('ul', { className: 'my-list' }, child1, child2); React.render( <div>{root2}</div>, document.getElementById('container5') );
使用這樣的機制，我們完全可以用JavaScript構建完整的界面DOM樹，正如我們可以用JavaScript創建真實DOM。但這樣的代碼可讀性並不好，於是React發明了JSX，利用我們熟悉的HTML語法來創建虛擬DOM：
var root =( <ul className="my-list"> <li>First Text Content</li> <li>Second Text Content</li> </ul> ); React.render( <div>{root}</div>, document.getElementById('container6') );
上圖2塊 代碼生成的 Dom 結構視圖預覽；
四、React 編寫Hello，world 入門的6種方式
首先 引入js 類庫 或者點擊此處 使用 在線CND 注意一下版本 我的是 v0.13.0
<script src="build/react.min.js"></script> <script src="build/JSXTransformer.js"></script>
第1種方式 直接html
<div id="example1"></div> <script type="text/jsx"> React.render( //直接html <h1 className="classN1" >1 hellow 直接 html world </h1>, document.getElementById('example1') ); </script>
第2種方式 直接創建元素
<div id="example2"></div> <script type="text/jsx"> React.render( //直接創建元素 React.createElement('h1', {className:'classN2'}, '2 Hello, 直接創建元素 world!'), document.getElementById('example2') ); </script>
第3種方式 直接 JSX 方式
<div id="example3"></div> <script type="text/jsx"> var CreateEl=React.createClass({ render:function(){ // return <h1>hellow 組件 創建 html world </h1> //有無括號均可 return (<h1 className='classN3' >3 hellow 組件 創建 html world </h1>); } }); React.render( //組件方式創建元素 <CreateEl/>, //或者雙括號 <CreateEl></CreateEl> document.getElementById('example3') ); </script>
第4種方式 jsx + createElement
<div id="example4"></div> <script type="text/jsx"> var JsxCreateEl=React.createClass({ // 直接 jsx 方式 創建 render:function(){ return ( React.createElement('h1', {className: "classN4"},"4 Hello, 直接 jsx 方式 創建 world! ") ) } }); React.render( //組件方式創建元素 React.createElement(JsxCreateEl, null), document.getElementById('example4') ); </script>
第5種方式 兩個組件 疊加方式
<div id="example5"></div> <script type="text/jsx"> var Hello=React.createClass({ // 模板 Hello render:function(){ return (<span>{this.props.data}</span>) } }); var World=React.createClass({ // 模板 world render:function(){ return (<span> 和 World 模板拼接</span>) } }); React.render( // 2個 組件 Hello World 兩個組件組合 方式創建元素 <h1 className="classN5" > <Hello data='5 hello' /> <World /> </h1>, document.getElementById('example5') ); </script>
第6種方式 補充說明 用的不多，需要 browser.min.js 類庫
<div id="example6"></div> <script type="text/babel"> //需要 browser.min.js 類庫 var dataList={ hello:'6 hello ', // ES6，也叫ECMAScript2015（以下統稱ES6），是ECMAScript標准的最新版本; world:'world' } var HelloWorld=React.createClass({ // 模板 Hello render:function(){ return (<h1>{this.props.hello} ES6 {this.props.world}</h1>) } }); React.render( // 2個 模板 組件方式創建元素 // <HelloWorld hello={dataList.hello } world={dataList.world} />, // 普通的寫法 <HelloWorld {...dataList} />, //注意這邊的寫法 ES6 document.getElementById('example6') ); </script>
五、上結果圖
附上代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" />
</head>
<body>
<style>
*{ margin:0; padding:0;}
body{ background:#333;}
#box{ background:url(loveImg/QioA-fxehfqi8208393.jpg) no-repeat center top; width:550px; border:8px solid #fff; -webkit-box-sizing:border-box; margin:50px auto;}
#example1,#example2,#example3,#example4,#example5{ margin:20px auto; width:100%; background:rgba(255,255,255,.3); padding:5px 10px; font-size:13px; color:#f1f1f1;-webkit-box-sizing:border-box; }
</style>
<div id="box">
<div id="example1"></div>
<script type="text/jsx">
React.render( //直接html
<h1 className="classN1" >1 hellow 直接 html world </h1>,
document.getElementById('example1')
);
</script>
<div id="example2"></div>
<script type="text/jsx">
React.render( //直接創建元素
React.createElement('h1', {className:'classN2'}, '2 Hello, 直接創建元素 world!'),
document.getElementById('example2')
);
</script>
<div id="example3"></div>
<script type="text/jsx">
var CreateEl=React.createClass({
render:function(){
// return <h1>hellow 組件 創建 html world </h1> //有無括號均可
return (<h1 className='classN3' >3 hellow 組件 創建 html world </h1>);
}
});
React.render( //組件方式創建元素
<CreateEl/>,
//或者雙括號 <CreateEl></CreateEl>
document.getElementById('example3')
);
</script>
<div id="example4"></div>
<script type="text/jsx">
var JsxCreateEl=React.createClass({ // 直接 jsx 方式 創建
render:function(){
return (
React.createElement('h1', {className: "classN4"},"4 Hello, 直接 jsx 方式 創建 world! ")
)
}
});
React.render( //組件方式創建元素
React.createElement(JsxCreateEl, null),
document.getElementById('example4')
);
</script>
<div id="example5"></div>
<script type="text/jsx">
var Hello=React.createClass({ // 模板 Hello
render:function(){
return (<span>{this.props.data}</span>)
}
});
var World=React.createClass({ // 模板 world
render:function(){
return (<span> 和 World 模板拼接</span>)
}
});
React.render( // 2個 模板 組件方式創建元素
<h1 className="classN5" >
<Hello data='5 hello' />
<World />
</h1>,
document.getElementById('example5')
);
</script>
</div>
<script src="build/react.min.js"></script>
<script src="build/JSXTransformer.js"></script>
</body>
</html>