React JS环境搭建

最新推荐文章于 2022-12-17 18:59:24 发布

Gaaidou

最新推荐文章于 2022-12-17 18:59:24 发布

阅读量460

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/openjdk8/article/details/72832315

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用webpack搭建React JS简单的demo

webpack:http://webpack.github.io/

1.安装react和react-dom:

npm install react react-dom

2.安装babel,babel-loader

npm install babel-core@5 babel-loader

3.安装webpack

npm install webpack

4.配置package.json
使用命令npm init 设置参数。
如图所示：
这里写图片描述

得到package.json

{
  "name": "react",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "babel-core": "^5.8.38",
    "react-dom": "^15.5.4",
    "react": "^15.5.4"
  },
  "devDependencies": {},
  "scripts": {
    "test": "test",
    "build": "webpack",
    "dev": "webpack-dev-server  --port 8080  --inline --content-base ./build"
  },
  "author": "Martin.Wu",
  "license": "ISC"
}

5.配置webpack.config.js

var path = require('path');
module.exports = {
    entry: path.resolve(__dirname, 'app/index.js'),
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.js',
    },
    module: {
        loaders: [
            { test: /\.js?$/, loaders: ['babel-loader'], exclude: /node_modules/ },
            { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'} ,
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',

            }
        ]
    }
};

6.编写app
这里写图片描述

index.js

var React = require('react');
var ReactDOM = require("react-dom");
var MartinTag = require('./martin.jsx');

martin.jsx

import ReactDOM from "react-dom" ;
import React from "react" ;

class MartinTag extends React.Component{
    render() {
        console.log("render ---- run") ;
        return <h1>This is <span onClick={this.handleClick} style={this.state}>React</span> Component!!!</h1>
    }
    handleClick (){
        this.setState({color:"green"}) ;
    }
    constructor(){
        super();
        this.state = {color:"red"};
        this.handleClick = this.handleClick.bind(this);
    }
}

ReactDOM.render(
    <MartinTag name="Martin"/>,
    document.getElementById('example')
);

module.exports = MartinTag;

7.构建或运行：
构建：npm run bulid
这里写图片描述

运行：npm run dev
这里写图片描述

以上两个命令在package.json文件夹已经配置了script的选项

运行完了之后，会在build文件夹下看到bundle.js文件

8.构建html项目，
新增index.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="example"></div>
<script src="bundle.js"></script>
</body>
</html>