0基础体验React之Webpack-原创手记-慕课网

前言

之前一直做移动端开发，最近入坑了ReactJs感觉非常棒，这样一来网站就是一个个组件组合起来了。这种模块化的体验让人感觉写网站就像写APP一样，爽得飞起。加之JS的ES6写法,语言上也比较清晰简洁，我觉得对于移动开发人员来说，0基础入门还是比较容易的。话不多说，马上开始。

github:webpack

一、准备工作

搭建Webpack基于Node.js的开发服务器，可以实时打包，一旦代码发生变化能够通知前端进行页面的刷新。

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>

同时使用webpack需要在webpack.config.js文件中对入口文件以及各种模块加载器进行设置

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>
这些配置完成以后进入到工程文件夹下
$npm start

在浏览器里通过localhost:8080访问可以看到该工程下的文件目录

新建index.html并引入实时打包生成的bundle.js
<pre><!doctype html>
<html>
<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>
工程的目录结构如下

js文件夹下包含了程序的入口app.js以及各模块
</br>
<h4>二、编写模块</h4>
一般编写的时候，采取从下往上写起，从最小的模块开始写起。这个Item和List的关系就好像android里面ListView和Adapter里Item的关系一样。

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获取数据并进行setstate，这里使用了干货集中营提供的接口
<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一开始样式没有展示出来，后来才发现class要写成className

最后页面的效果如下

github:webpack

作者：我追你嘿嘿嘿
链接：https://www.jianshu.com/p/d662c9c2af81