TCG开发日志（2）从零开始，ReactJS的Helloworld

标签：

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