對(duì)Facebook推出的React仰慕已久，一直沒(méi)有找到合適的機(jī)會(huì)嘗試衰琐，而react早已經(jīng)是最熱門的前端框架，coding.net的WebIDE炼蹦，墨刀的web原型設(shè)計(jì)應(yīng)用羡宙，都是非常成熟的react應(yīng)用；最近正好前后端都有很多想法掐隐，周末花一天時(shí)間折騰了一翻狗热，順利的完成入門訓(xùn)練。
項(xiàng)目采用純靜態(tài)方式實(shí)現(xiàn)虑省，全部都是靜態(tài)文件匿刮，不需要任何服務(wù)器就可以運(yùn)行效果。傳送門
React簡(jiǎn)單介紹
React一般被用來(lái)作為MVC中的V層探颈，它不依賴其他任何的庫(kù)熟丸，因此開發(fā)中，可以與任何其他的庫(kù)集成使用膝擂，包括Jquery虑啤、Backbone等。它可以在瀏覽器端運(yùn)行架馋，也可以通過(guò)nodejs在服務(wù)端渲染狞山。React的思想非常獨(dú)特，性能出眾叉寂，可以寫出重復(fù)代碼少萍启，邏輯清晰的前端代碼。
React的語(yǔ)法是jsx屏鳍，通過(guò)使用這種語(yǔ)法勘纯，可以在react代碼中直接混合使用js和html來(lái)編寫代碼，這樣代碼的邏輯就非常清晰钓瞭，當(dāng)然也意味著驳遵，需要將jsx代碼編譯成普通的javascript代碼，才能在瀏覽器中運(yùn)行山涡，這個(gè)過(guò)程根據(jù)實(shí)際項(xiàng)目情況堤结，可以選擇多種不同的思路，或者在服務(wù)器端通過(guò)webpack進(jìn)行編譯鸭丛【呵睿或者在前端加載，參見(jiàn)官網(wǎng)提供的入門代碼鳞溉。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
代碼中的babel browser瘾带，可以將jsx代碼轉(zhuǎn)換成js代碼的渲染工作；這個(gè)代碼需要加載額外的js文件熟菲，因此生產(chǎn)中最好在服務(wù)端完成看政。入門之后，我希望能夠使用require.js來(lái)實(shí)現(xiàn)異步按需加載模塊抄罕，而且代碼本身也可以實(shí)現(xiàn)模塊化帽衙。
首先通過(guò)bower下載依賴包，本次實(shí)踐贞绵，使用到的依賴包有react厉萝、requirejs、jquery榨崩，經(jīng)過(guò)實(shí)踐發(fā)現(xiàn)谴垫，還必須依賴jsx-requirejs-plugin，還有text.js才能成功的的實(shí)現(xiàn)requirejs + react母蛛。
項(xiàng)目結(jié)構(gòu)和功能實(shí)現(xiàn)
這個(gè)入門應(yīng)用實(shí)現(xiàn)的功能很簡(jiǎn)單翩剪，將自己感興趣的一些技術(shù)，以圖文和鏈接組成的列表形式展示在頁(yè)面上彩郊，列表的數(shù)據(jù)前弯，以json形式存儲(chǔ)在js配置文件中蚪缀，requirejs加載業(yè)務(wù)邏輯模塊的時(shí)候，會(huì)作為依賴項(xiàng)加載數(shù)據(jù)恕出，并且以react.js的方式完成頁(yè)面的渲染询枚。
index.html是純靜態(tài)的頁(yè)面布局html代碼，核心是通過(guò)
<script data-main="/static/app/index" src="/static/lib/requirejs/require.2.2.0.min.js"></script>這段代碼來(lái)加載依賴項(xiàng)浙巫，并運(yùn)行react業(yè)務(wù)邏輯代碼金蜀。
這個(gè)代碼指出了requirejs配置文件的位置，依賴項(xiàng)和入口點(diǎn)的畴，都是在/static/app/index.js中配置的渊抄。代碼如下：
'use strict';
require.config({
baseUrl: '/static/app',
paths: {
jquery: '../lib/jquery/js/jquery.min',
react: '../lib/react/react-with-addons.min',
'react-dom':'../lib/react/react-dom',
"JSXTransformer": '../lib/plugin/JSXTransformer',
jsx: '../lib/plugin/jsx',
text: '../lib/requirejs/text',
},
shim: {
jquery: {
"exports" : "$"
}
}
});
require([
'jsx!app.react'
], function (App) {
App.initialize();
});
require()中的jsx指示requirejs，在加載app.react模塊的時(shí)候丧裁，先通過(guò)jsx對(duì)代碼進(jìn)行編譯护桦，這樣就可以實(shí)現(xiàn)requirejs和react集成使用。require如果在config的paths中沒(méi)有找到模塊煎娇，就會(huì)從baseUrl開始查找要加載的模塊嘶炭；
app.react.js會(huì)加載該入門應(yīng)用的核心代碼
'use strict';
define([
'react', 'react-dom', 'jquery','jsx!component/CardComponent.react',
'data/interest'
], function (React , ReactDOM, $,CardComponent , interestData) {
var initialize = function () {
ReactDOM.render(
<div class="js-intro-container">
{
interestData.map(function (card) {
console.log(card);
return <CardComponent cardData={card}/>
})
}
</div>,
document.getElementById('js-intro-container')
);
};
return {
initialize: initialize
};
});
data/interest.js文件中存儲(chǔ)的是一個(gè)數(shù)組，數(shù)組中存儲(chǔ)的數(shù)據(jù)逊桦，將會(huì)使用在CardComponent組件中眨猎，這里的CaredComponent組件是React.createClass方法把一段html代碼段，封裝成一個(gè)模塊來(lái)調(diào)用强经。個(gè)人覺(jué)得react的核心封裝能力就體現(xiàn)在這里睡陪。代碼如下：
'use strict';
define([
'react'
],function(React){
return React.createClass({
render: function() {
return (
<div className="row intro-row js-intro-row">
// 此處省略......
<img src={this.props.cardData.img} alt="" className="card-image"/>
// 此處省略......
</div>
);
}
});
});
最終效果
至此，將所有項(xiàng)目相關(guān)的靜態(tài)代碼直接放到瀏覽器中就可以運(yùn)行代碼匿情，也可以直接部署到服務(wù)器的對(duì)應(yīng)目錄下運(yùn)行兰迫。
react這種封裝組件和模塊化的方式，確實(shí)特別高效炬称。寫出的代碼邏輯很清晰汁果。非常值得親自動(dòng)手嘗試一下。
