我的第一个正式react demo

以前在看深入浅出react和redux的时候，那个demo 总是用creat-react-app 创建的，现在终于可以实现自己手动搭建一个简单的demo了。

1.首先新建一个文件夹，执行npm init

2.安装各类插件如下：

{
  "name": "react_first",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --hot"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-react-hmre": "^1.1.1",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.20.2",
    "webpack-dev-server": "^3.1.9"
  },
  "dependencies": {
    "babel-loader": "^7.1.5",
    "react": "^16.5.2",
    "react-dom": "^16.5.2"
  }
}

3.配置.babelrc文件（windows下需要创建.babelrc.）后面有一个.啊

{
    "presets": [
        "es2015","react"
    ],
    "env":{
        "development":{
            "presets":["react-hmre"]
        }
    }
}

4.创建配置文件webpack.config.js

var path=require('path');
var webpack=require('webpack');
var HtmlwebpackPlugin=require('html-webpack-plugin');

var ROOT_PATH=path.resolve(__dirname);
var APP_PATH=path.resolve(ROOT_PATH,'app');
var BUILD_PATH=path.resolve(ROOT_PATH,'build');

module.exports= {
    entry:{
        app: path.resolve(APP_PATH,'app.jsx')
    },
    output:{
        path:BUILD_PATH,
        filename:'bundle.js'
    },
    devtool:'eval-source-map',
    devServer: {
        historyApiFallback: true,
        hot: true,
        inline: true,
        progress: true
    },
    resolve:{
        extensions:['.js','.jsx'],
        modules: [APP_PATH, 'node_modules'],
    },
    module:{
        rules:[
            {
                test:/\.jsx?$/,
                loaders:['babel-loader'],
                include:APP_PATH,
            }
        ]
    },
    plugins:[
        new HtmlwebpackPlugin({
            title:'my first react app'
        })
    ]
};

6.创建简单的app.jsx（在app目录下）

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

function App() {
  return (
    <div className="container">
      <h1>Hello React h111!</h1>
    </div>
  );
}

const app = document.createElement('div');
document.body.appendChild(app);
ReactDOM.render(<App />, app);

7.完工直接运行npm run dev, 然后访问浏览器，修改app.jsx里面h1的内容，检查页面热加载

我的第一个正式react demo

猜你喜欢