前言

之前一直做移动端开发，最近入坑了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()
 ]
 };

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

新建index.html并引入实时打包生成的bundle.js

js文件夹下包含了程序的入口app.js以及各模块

二、编写模块

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 (