前言
之前一直做移动端开发，最近入坑了ReactJs感觉非常棒，这样一来网站就是一个个组件组合起来了。这种模块化的体验让人感觉写网站就像写APP一样，爽得飞起。加之JS的ES6写法,语言上也比较清晰简洁，我觉得对于移动开发人员来说，0基础入门还是比较容易的。话不多说，马上开始。
github:webpack
一、准备工作
搭建Webpack基于Node.js的开发服务器，可以实时打包，一旦代码发生变化能够通知前端进行页面的刷新。
package.json如下
{
"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"
}
}
同时使用webpack需要在webpack.config.js文件中对入口文件以及各种模块加载器进行设置
webpack.config.js如下
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()
]
};
这些配置完成以后进入到工程文件夹下
$npm start
在浏览器里通过localhost:8080访问可以看到该工程下的文件目录
新建index.html并引入实时打包生成的bundle.js
Webpack Demo
工程的目录结构如下
js文件夹下包含了程序的入口app.js以及各模块
二、编写模块
一般编写的时候，采取从下往上写起，从最小的模块开始写起。这个Item和List的关系就好像android里面ListView和Adapter里Item的关系一样。
NewsItem 如下
`import React from "react";
export default class NewsItem extends React.Component {
constructor() {
super();
this.state = {};
}onClickHandle(msg){
alert(msg);
}render(){
return(
{this.props.desc}
);
}
}
`
NewsList
`
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; }); return( {news_items});}
}
`
在app.js中通过ajax获取数据并进行setstate，这里使用了干货集中营提供的接口
`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 (