前言
之前一直做移動(dòng)端開發(fā)，最近入坑了ReactJs感覺非常棒，這樣一來網(wǎng)站就是一個(gè)個(gè)組件組合起來了职辨。這種模塊化的體驗(yàn)讓人感覺寫網(wǎng)站就像寫APP一樣，爽得飛起戈二。加之JS的ES6寫法,語言上也比較清晰簡(jiǎn)潔舒裤，我覺得對(duì)于移動(dòng)開發(fā)人員來說，0基礎(chǔ)入門還是比較容易的觉吭。話不多說腾供，馬上開始。
github:webpack
一鲜滩、準(zhǔn)備工作
搭建Webpack基于Node.js的開發(fā)服務(wù)器伴鳖，可以實(shí)時(shí)打包，一旦代碼發(fā)生變化能夠通知前端進(jìn)行頁面的刷新徙硅。
package.json如下
<pre>{
"name": "react-webpack",
"version": "1.0.0",
"description": "webpack demo",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --hot --host 0.0.0.0 --progress --colors",
"build": "webpack --progress --colors"
},
"repository": {
"type": "git",
"url": ".."
},
"keywords": [
"react",
"webpack"
],
"author": "superyxw",
"devDependencies": {
"babel-core": "^6.10.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1",
"react-hot-loader": "^1.3.0"
}
}
</pre>
同時(shí)使用webpack需要在webpack.config.js文件中對(duì)入口文件以及各種模塊加載器進(jìn)行設(shè)置
webpack.config.js如下
<pre>
var webpack = require('webpack');
module.exports = {
entry: [
'webpack/hot/only-dev-server',
"./js/app.js"
],
output: {
path: './build',
filename: "bundle.js"
},
module: {
loaders: [
{ test: /.js$/, exclude: /node_modules/, loader: 'babel-loader'},
{ test: /.css$/, loader: "style!css" },
{test: /.less/,loader: 'style-loader!css-loader!less-loader'},
{
test: /.js$/,
exclude: /node_modules/,
loader: "babel-loader",
query:
{
presets:['react','es2015']
}
}
]
},
resolve:{
extensions:['','.js','.json']
},
devServer: {
hot: true,
inline: true
},
plugins: [
new webpack.NoErrorsPlugin(),
new webpack.HotModuleReplacementPlugin()
]
};
</pre>
這些配置完成以后進(jìn)入到工程文件夾下
$npm start
在瀏覽器里通過localhost:8080訪問可以看到該工程下的文件目錄
新建index.html并引入實(shí)時(shí)打包生成的bundle.js
<pre><!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Webpack Demo</title>
<link href="/css/bootstrap.min.css" rel="stylesheet">
<script src="/js/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
</pre>
工程的目錄結(jié)構(gòu)如下
js文件夾下包含了程序的入口app.js以及各模塊
</br>
<h4>二榜聂、編寫模塊</h4>
一般編寫的時(shí)候，采取從下往上寫起闷游，從最小的模塊開始寫起峻汉。這個(gè)Item和List的關(guān)系就好像android里面ListView和Adapter里Item的關(guān)系一樣。
NewsItem 如下
<pre>
`import React from "react";
export default class NewsItem extends React.Component {
constructor() {
super();
this.state = {};
}
onClickHandle(msg){
alert(msg);
}
render(){
return(
<h3 onClick={this.onClickHandle.bind(this,this.props.desc)}>{this.props.desc}</h3>);
}
}
`
</pre>
NewsList
<pre>
`
import React from "react";
import NewsItem from "./news_item.js";
export default class NewsList extends React.Component{
constructor() {
super();
this.state = {};
}
render(){
var news_items=this.props.news.map( function(data,index){
return <NewsItem key = {index} imgs={data.imgs} url={data.url} desc={data.desc}/>;
});
return(
<div>{news_items}</div>
);
}
}
`
</pre>
在app.js中通過ajax獲取數(shù)據(jù)并進(jìn)行setstate脐往，這里使用了干貨集中營(yíng)提供的接口
<pre>
`componentDidMount(){
$.ajax({
url : "http://gank.io/api/random/data/Android/20",
type : "get",
dataType : "json",
cache : false,
success : function(result){
this.setState({
news: result.results
});
}.bind(this),
error : function(){
console.log("獲取失敗...");
}
});
}
render() {
return (
<div className="container">
<Head/>
<NewsList news={this.state.news}/>
</div>
);
}`
</pre>
最后在head.js里面引用了一下bootstrap一開始樣式?jīng)]有展示出來休吠，后來才發(fā)現(xiàn)class要寫成className
最后頁面的效果如下
github:webpack
參考文章
