美文网首页
配置react开发环境

配置react开发环境

作者: logoss | 来源:发表于2019-03-21 23:02 被阅读0次

官方的快速安装

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

编写index.js

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

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

在控制台输入

npm run dev

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


相关文章

网友评论

      本文标题:配置react开发环境

      本文链接:https://www.haomeiwen.com/subject/nxzhvqtx.html