ReactJS是今年很流行的前端框架，我以前做兼职的时候写过一个用PHP+Smarty+HTML+JQUERY的小网站，
当时只是感觉JQuery是一个用起来很方便的库，但是React完全不同，所有的写法都变了，组件化的开发过程也很流畅，代码管理也方便。
那么当然先要安装React，在工程目录下：
npm install react --save
npm install react-dom --save
显然我要使用ES6，所以还有一套Babel，其中，比起服务端，特别需要添加这个插件：
npm install babel-plugin-transform-class-properties --save-dev
npm install babel-preset-react --save-dev
并在.babelrc中把它们都加上：
{
"plugins": [
"transform-class-properties"
],
"presets": [
"react", "es2015"
]
}
以及webpack（这是最大的坑），最近很多项目都用到了它，可以把JS文件打包到一个文件中
npm install webpack --save
npm install webpack-dev-server --save-dev
在工程文件的根目录下新建webpack.config.js，这是webpack和webpack-dev-server的配置文件，内容如下：
var path = require(‘path‘);
var webpack = require(‘webpack‘);
module.exports = {
entry: [path.resolve(__dirname, ‘src/index.js‘)], //入口文件
output: {
path: path.resolve(__dirname, ‘build‘),
filename: ‘bundle.js‘,
}, //将打包后的文件输出到./build/bundle.js中
resolve: {
modulesDirectories: [
‘src‘,
‘node_modules‘,
],
extensions: [‘‘, ‘.json‘, ‘.js‘]
}, //这里的意思是，在/src和/node_modules中，会自动对require的部分添加这些后缀，这样可以将import react from ‘react.js‘写成import react from ‘react‘
module: {
loaders: [
{test: /\.jsx?$/, exclude: /node_modules/, loader: ‘babel‘}
]
}, //非常重要，所有的.js, .jsx文件，除/node_modules目录中的以外，都用babel转换
plugins:[
new webpack.DefinePlugin({
‘process.env‘: {
NODE_ENV:JSON.stringify(‘production‘),
},
}), //这是在github上查到的，将NODE_ENV设置成production（默认似乎是development），可以去除一个warning
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
}), //打包后的代码去掉多余的空格和换行，减少大小
],
devServer:{
contentBase:‘./build‘,
hot:true
} //webpack-dev-server的设置，包括运行目录和是否热更新
};
这样，环境就配置好了，之后新建/build/index.html，其中需要如下内容：
<div id = "global-container"/>
<script src = "./bundle.js"/>
并在/src/index.js中，
import ‘babel-polyfill‘; //别忘记这个
import React from ‘react‘;
import ReactDOM from ‘react-dom‘;
import App from ‘./App‘;
window.onload = function(){
ReactDOM.render(<App />, document.getElementById(‘global-container‘));
}
其中，App是我自定义的组件，所有的React内容全部挂在这个组件里，并向html中的那个div上渲染。
之后，在App.js里，就可以写一个Helloworld了（其中用了大量的ES6写法）：
import React from ‘react‘;
export default class App extends React.Component
{
state = {
}
foo = ()=>"helloworld!"
render(){
return <div>
{this.foo()}
</div>
}
}
打开cmd，在工程目录下运行node_modules\.bin\webpack-dev-server，之后可以在localhost:8080中看到结果，这样前端的helloworld也完成了。
TCG开发日志（2）从零开始，ReactJS的Helloworld
原文：http://www.cnblogs.com/wowbrionac/p/5648431.html