React JS的基本用法［ES5，纯前端写法］

####搭建webpack+react环境

参考:https://my.oschina.net/u/1403181/blog/672501

1. 新建一个文件夹:

react-demo

2. cd react-demo

3. npm install webpack -g #不推荐全局安装，原因是可防止不同项目依赖不同版本的 Webpack 而导致冲突。

4. npm init 命令生成 package.json

5. npm install webpack --save-dev #安装webpack，推荐方式，安装到本项目

6. npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev #安装babel

7. npm install react react-dom --save-dev #安装react react-dom

7.1 npm install style-loader --save-dev

7.2 npm install css-loader --save-dev

8. 新建webpack.config.js文件

var path = require('path');

var webpack = require('webpack');

module.exports = {

    entry: ['webpack/hot/dev-server', path.resolve(__dirname, './index.js')],

    output: {

        path: path.resolve(__dirname, './build'),

        filename: 'bundle.js'

    },

    devtool:'source-map',

    module: {

        loaders: [

            {

                test:/\.css$/,loader:'style!css'

            },

            {

                test: /\.js?$/,

                exclude: /(node_modules|bower_components)/,

                loader: 'babel',

                query: {

                    presets: ['es2015', 'react']

                }

            }

        ]

    },

    plugins: [

        new webpack.HotModuleReplacementPlugin()

    ]

};

8.1 .babelrc中添加

{

  "presets": ["es2015","react"]

}

9. npm install webpack-dev-server --save-dev #安装webpack-dev-server

10. 在package.json文件中为scripts添加：

"scripts": {

  "build": "webpack",

  "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"

}

　　最后我们的package.json代码是这样的：

{

  "name": "reactpro1",

  "version": "1.0.0",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "bundle": "babel-node tools/run bundle",

    "build": "webpack",

    "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"

  },

  "author": "jx",

  "license": "ISC",

  "devDependencies": {

    "babel-core": "^6.8.0",

    "babel-loader": "^6.2.4",

    "babel-preset-es2015": "^6.6.0",

    "babel-preset-react": "^6.5.0",

    "react": "^15.0.2",

    "react-dom": "^15.1.0",

    "webpack": "^1.13.0",

    "webpack-dev-server": "^1.14.1"

  },

  "dependencies": {

    "webpack": "^1.13.0",

    "webpack-dev-server": "^1.14.1"

  },

  "description": ""

}

11. 编写index.html

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>

    <title>React Project</title>

</head>

<body>

<div id="content"></div>

<script src="./build/bundle.js"></script>

</body>

</html>

　12. index.js如下写:

let React = require('react');

let ReactDOM = require('react-dom');

ReactDOM.render(<div>hello  </div>, document.getElementById('content'));

13. webpack打包即可

完毕...................

PS:

复杂点的index.js如下

let React = require('react');

let ReactDOM = require('react-dom');

import './index.css';

class Login extends React.Component{

    constructor(props) {

        super(props);

        this.state = {

            userId: '',

            userPassword: '',

            submitEnabled: false,

        };

    }

    componentWillMount() {

        console.log("componentWillMount");

    }

    componentDidMount() {

        console.log("componentDidMount");

    }

    componentWillUnmount() {

        console.log("componentWillUnmount");

    }

    //event

    handleClickSubmit() {

        if(this.state.userId.length < 1 || this.state.userPassword.length < 1){

            return;

        }

        $.get("http://publicschool.sinaapp.com/test/test.php?name=jack", function(result) {

            console.log(result);

        });

    }

    handleChangeId () {

        this.setState({

            userId:this.refs._ref_userId.value,

            submitEnabled:this.refs._ref_userId.value.length > 0 && this.refs._ref_userPassword.value.length > 0,

        });

    }

    handleChangePassword () {

        this.setState({

            userPassword:this.refs._ref_userPassword.value,

            submitEnabled:this.refs._ref_userId.value.length > 0 && this.refs._ref_userPassword.value.length > 0,

        });

    }

    //渲染方法

    render () {

        return(

            <div className="login">

                <div className="title">

                    {this.props.title}

                </div>

                <div className="userRole">

                    {this.props.role}

                </div>

                <input type="text" ref="_ref_userId" placeholder="用户名" onChange={()=>this.handleChangeId()} />

                <input type="password" ref="_ref_userPassword" placeholder="密码" onChange={()=>this.handleChangePassword()} />

                <button type="button" onClick={()=>this.handleClickSubmit()}>登录</button>

            </div>);

    }

}

ReactDOM.render(

    <Login title="title" role="ddd"/>,

    document.getElementById('content')

);

css如下：

.login{
    background-color: red;
}

.header{
    height: 30px;
    background-color: gray;
}

.userRole{
    height:80px;
    background-color: lightcyan;
}
.userId{

}
.userPassword{

}

.submitButtonEnabled{
    color:blue;
}
.submitButtonDisabled{
    color: gray;
}

巴特西

React JS的基本用法［ES5，纯前端写法］

最新文章

热门文章