react+webpack环境搭建

首先安装nodejs，安装nodejs之后，可使用淘宝镜像:
（1）npm config set registry "http://registry.npm.taobao.org"  
  • 安装nodejs之后，安装webpack：
  1. npm install webpack -g 全局安装
  2. npm install webpack --save-dev 局部安装
  • 目录结构如图：
    1. 创建项目：
      1. 创建一个项目的根目录：mkdir react-hello-world
      2. cd react-hello-world
    2. 使用npm init 初始化，生成package.json文件：
      1. npm init 自定义创建package.json
      2. npm init -yes 自动创建默认的package.json文件
    3. 项目创建好了，可以添加依赖以及插件
      1. 局部安装webpack ：npm install webpack --save-dev
      2. npm install webpack-dev-server --save-dev  
      3. 安装react，--save用于将包添加至package.json文件：npm install react react-dom --save-dev
      4. 安装babel，babel是webpack需要的加速器，没有的话，会使jsx和es5语法报错；npm intall babel-loader babel-preset-es2015 babel-preset-react --save-dev；其中有可能会报错，那么就将babel-loader 改为 babel-core；然后执行npm intall（这一步可能要重复多次）；
    4. webpack.config.js配置：var path = require('path');
    var webpack = require('webpack');
    module.exports = {
    entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app/main.js')],
    output: {
    path: path.resolve(__dirname, './build'),
    filename: 'bundle.js'
    },
    devServer: {
    inline: true,
    port: 8181
    },
    module: {
    loaders: [
    {
    test: /\.js?$/,
    exclude: /(node_modules|bower_components)/,
    loader: 'babel',
    query: {
    presets: ['es2015', 'react']
    }
     
    }
    ]
    },
    plugins: [
    new webpack.HotModuleReplacementPlugin()
    ]
    };
    1. 执行 npm install webpack-dev-server --save-dev
    2. package.json文件配置：{
    "name": "react-app",
    "version": "1.0.0",
    "description": "react-webpack-stu",
    "main": "index.js",
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0",
    "react": "^15.3.0",
    "react-dom": "^15.3.0",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
    }
    } 这里有一点提醒大家，package.json中name不能跟我们的模块和项目文件目录同名
    1. 项目代码编写：
      1. index.html======>:<!DOCTYPE html>
    <html>
     
    <head lang="en">
    <meta charset="UTF-8">
    <title>React Test</title>
    </head>
     
    <body>
    <div id="content"></div>
    <script src="./bundle.js"></script>
    </body>
     
    </html>
     
      1. main.js=======> :import React from 'react';
    import ReactDOM from 'react-dom';
    import AppComponent from './components/Tab1';
    ReactDOM.render(<AppComponent ><span>lalaal</span><span>hahh</span></AppComponent > , document.getElementById('content'));
     
      1. Tab1.js ======>:import React,{Component} from 'react';
    import ReactDOM from 'react-dom';
     
    class Tab1 extends React.Component{
     
    constructor(props) {
    super(props);
     
    this.state = {name:'true'};
    }
     
    btnClick() {
    this.setState({name:!this.state.name});
    console.log('es6语法中的点击事件触发了');
    }
     
    render() {
    return <ol>
    {
    React.Children.map(this.props.children, (child) => {return <li>{child}</li>})
    }
    </ol>;
    }
    }
    Tab1.propTypes={
    title: React.PropTypes.string,
    }
     
    Tab1.defaultProps={title:'133'};//设置默认属性
     
    export default Tab1;
      1. bundle.js
    • 编码结束：执行：npm run dev；直接访问http://loacalhost：8181/index.html
    • 结果：
posted @ 2017-04-11 09:15  雨停了  阅读(220)  评论(0)  编辑  收藏  举报