配置react开发环境

官方的快速安装

npx create-react-app my-app
cd my-app
npm start

可以用来练习，不过不是基于webpack的，不太推荐

配置基于webpack的开发环境

首先按装需要的包

npm init
npm i webpack -D
npm i webpack-cli -D
npm i style-loader -D
npm i css-loader -D
npm i babel-core -D
npm i babel-loader@7 -D
npm i babel-preset-es2015 -D
npm i babel-preset-react -D
npm i react -S
npm i react-dom -S
npm i webpack-dev-server -D

新建webpack.config.js，在里面写webpack配置

var path=require("path")
var webpack=require("webpack")
var HtmlWebpackPlugin=require("html-webpack-plugin")


module.exports={
    mode:"development",
    entry:"./src/index.js",
    output:{
        path:path.resolve(__dirname,"./dist"),
        filename:"bundle.js"
    },
    module:{
        rules:[
            {test:/\.css$/,use:["style-loader","css-loader"]},
            {
                test:/\.jsx?$/,
                exclude: /node_modules/,
                use: [{
                    loader: "babel-loader",
                    options: { presets: ["react","es2015"] }
                }],
            },
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:"src/index.html",
            filename:"index.html"
        }),
    ]
}

打开package.json文件，配置script

"scripts":{
    "bulid":"webpack",
    "dev":"webpack-dev-server --open"
}

文件结构
新建src和dist文件夹，在src里新建index.html和index.js

编写HelloWorld

编写index.html

编写index.js

import React,{Component} from "react"
import ReactDOM from "react-dom"

class App extends Component{
    render(){
        return(
Hello World
)
    }
}
ReactDOM.render(
    ,
    document.getElementById("root")
)

在控制台输入

npm run dev

会自动打开浏览器，显示页面