react框架的搭建教程

框架的流程：

1、下载安装Node.js

2、安装webpack（含服务器等） npm install webpack webpack-dev-server babel -g

注意：-g表示第一条命令是全局安装

3、添加package.json文件（目前只知道是放一些项目的描述信息），进入项目目录

命令：npm init

4、添加库文件（–save-dev:将依赖信息写入package.json的devdependencies），babel-polyfill可解决部分es6兼容问题

例子：npm install react react-dom –save-dev（多个插件空格分开）

所有库如下：

webpack

react

react-dom

babel-loader

less-loader

css-loader

style-loader

url-loader

file-loader

babel-preset-es2015

babel-preset-react

react-router

redux

react-redux

redux-devtools

redux-thunk

babel-polyfill

第三方UI

material-ui

react-tap-event-plugin

react-swipeable-views

5、跟目录新建webpack.config.js配置文件

6、打包：node进入你的项目跟目录执行打包命令：webpack –config webpack.config.js

ps:webpack.config.js配置如下

var webpack=require('webpack');  
module.exports={  
    devtool:'#eval-source-map',  
    //入口文件，多个的话将按顺序执行  
    entry:[  
        'babel-polyfill','./App/js/index.jsx'  
    ],  
    output:{  
        path:'App',             //打包后文件的存放路径  
        publicPath:'/App/',     //服务器根路径  
        filename:'bundle.js'    //打包后的文件名  
    },  
    module:{  
        loaders:[  
            {test:/\.css$/,loader:'style-loader!css-loader'},  
            {test:/\.less$/,loader:'style-loader!css-loader!less-loader'},  
            {test:/\.js?$/,loader:'babel',exclude: /node_modules/},              
            {  
                test:/\.jsx?$/,  
                loader:'babel',  
                exclude: /node_modules/,  
                query:{  
                    presets:['es2015','react']  
                }  
            }  
        ]  
    },  
    watch: true, //观察模式，每次修改保存webpack.config.js中引用文件，bundle.js的文件会自动更新  
    //指定可以被 require 的文件后缀,比如 Hello.js 这样的文件就可以直接用 require(./Hello) 引用  
    resolve:{  
        root:'',  
        extensions:['','.js','.jsx','.json','.less','.css']  ////定模块的后缀，这样在引入模块时就不需要写后缀了，会自动补全  
    }  
}