我的第一个正式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 (
    

      
Hello React h111!
    
  );
}

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

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

上面的demo 是用的webpack-dev-server 服务器，现在我们来搞一个 express服务器的demo，首先package.json如下：

{
  "name": "react-server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node server.js"
  },
  "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",
    "express": "^4.16.3",
    "webpack": "^4.20.2",
    "webpack-dev-middleware": "^3.4.0",
    "webpack-hot-middleware": "^2.24.2"
  },
  "dependencies": {
    "babel-loader": "^7.1.5",
    "react": "^16.5.2",
    "react-dom": "^16.5.2"
  }
}

在同级目录下新建webpack.config.js如下：

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'webpack-hot-middleware/client',
    './index.js'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        loaders: ['babel-loader'],
        exclude: /node_modules/,
        include: __dirname
      }
    ]
  }
};

在同级目录下 新建server.js文件， 也就是package.json  start 需要的那个服务器文件：

/* eslint-disable */
var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var webpackHotMiddleware = require('webpack-hot-middleware');
var config = require('./webpack.config');

var app = new (require('express'))();
var port = 3000;

var compiler = webpack(config);
app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }));
app.use(webpackHotMiddleware(compiler));

app.get("/", function(req, res) {
  res.sendFile(__dirname + '/index.html')
});

app.listen(port, function(error) {
  if (error) {
    console.error(error)
  } else {
    console.info("==>   Listening on port %s. Open up http://localhost:%s/ in your browser.", port, port)
  }
});

最后新建src\App.js(因为App需要作为顶层组件，所以必须启用状态，也就是说这里不能用无状态方式， 即一个普通的function):

import React, {Component} from 'react';

export default class App extends Component{
    render(){
        return(
            
hello world 232232332
        );
    }
}

index.js

import React from 'react';
import {render} from 'react-dom';
import App from './src/App';

render(() ,document.querySelector("#root"));

index.html

.babelrc 和先前的哦诶之一样：

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