一歩一歩Reactの世界に入る(React+Webpack+ES 6コンビネーション構成)

多くのブログを見て、ほとんどはプロファイルを一筆持ってきたか、いっそプロファイルを与えないが、環境構築は初心者にとって困難で重要であり、明らかにネット上のブログは初心者が勉強を始めるのに不利である.BZは最初から、一歩一歩webpackを配置し、ES 6+Reactの組み合わせを使って開発できるようにするつもりで、くだらないことは言わないで、一緒にWebpack+ES 6+Reactの旅を始めましょう.
私のgithubの中でcloneあるいはforkができて、本博文はdemo 01に対応しますhttps://github.com/zrysmt/react-demo
もちろん、このブログの最後にまとめた部分を使用したり、私のgithubから入手したりして、プラグインnpm installをすべてインストールし、webpackを実行してコンパイルすることもできます.-コマンドnpm initを使用してパッケージ管理ファイルを新規作成します.プロジェクトのルートディレクトリにwebpack.config.jsファイルを追加します.基本的な構成は次のとおりです.

var webpack = require('webpack');
module.exports = {
entry:{
page: "./src/app.js"
},
    output: {
        path: './build',
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {test:/\.js$/,exclude: /node_modules/,loader:''},// 
// 
        ]
    }
};

1.es 6のサポート

 npm i --save-dev babel-core babel-loader babel-preset-es2015

webpack.config.js

{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }

.babelrc

{
  "presets": [
    "es2015"
  ]
}

入口app.js,es 6構文

var p = require("./es6test/es6test1.js")

//es6test1.js
import Point from './es6test2';
let p = new Point(1,2);
console.log(p.toString()); 
//es6test2.js
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }


  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}
export default Point; 

2.React構文のサポート

{test:/\.jsx$/,exclude: /node_modules/,loader:'jsx-loader?harmony'}

エントリファイルapp.js

var React = require('react');
var ReactDOM = require('react-dom');


var HelloMessage = React.createClass({
   render: function() {
     return <h1>Hello {this.props.name}h1>;
  }
});


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

3.Reactとes 6の同時サポート

取付

 npm i --save-dev babel-preset-react

注意:babelrcファイルは上のファイルと同じでも必要です.webpack.config.js

{test:/\.jsx?$/,exclude: /node_modules/,loader: 'babel', query: {presets: ['es2015', 'react']}},
// es6 react  
{test:/\.jsx?$/,exclude: /node_modules/,loader:'babel?presets[]=react,presets[]=es2015'},
// es6 react

React,es 6構文の使用

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


class HelloMessage extends React.Component {
    render() {
        return <h1> Hello { this.props.name } h1>;
    }
}
ReactDOM.render( <HelloMessage name="zry" />,
   document.getElementById('example')
);

4.残りの構成

css/sass

取付

npm i --save-dev  style-loader  css-loader sass-loader  node-sass

webpack.config.js

{ test: /\.css$/, loader: "style!css" },
{ test: /\.scss$/, loader: "style!css!sass" }, //sass 

使いやすい

import "./home/home.css";
import "./home/home.scss";

5.基本機能構成のまとめ：

package.json

{
  "name": "react-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --hot --progress --colors",
    "build": "webpack --progress --colors"
  },
  "repository": {
    "type": "git",
    "url": "zry"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.18.0",
    "babel-loader": "^6.2.7",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "css-loader": "^0.25.0",
    "jsx-loader": "^0.13.2",
    "node-sass": "^3.10.1",
    "react": "^15.3.2",
    "react-dom": "^15.3.2",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.3"
  }
}

webpack.config.js

var webpack = require('webpack');


module.exports = {
entry:{
page: "./src/app.js"
},
    output: {
        path: './build',
        filename: "bundle.js"
    },
    module: {
        loaders: [
            // { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },// es6
            // {test:/\.jsx?$/,exclude: /node_modules/,loader:'jsx-loader?harmony'},// react
            // {test:/\.jsx?$/,exclude: /node_modules/,loader:'babel?presets[]=react,presets[]=es2015'},// es6 react 
            {test:/\.jsx?$/,exclude: /node_modules/,loader: 'babel', query: {presets: ['es2015', 'react']}},// es6 react
            { test: /\.css$/, loader: "style!css" },
            { test: /\.scss$/, loader: "style!css!sass" }, //sass 
        ]
    },
    resolve: {
        extensions: ['', '.js', '.json']
    },
    plugins: [
        new webpack.NoErrorsPlugin()
    ],
    devtool: 'source-map'
};

忘れないで.babelrcファイル

{
  "presets": [
    "es2015"
  ]
}

6.Reactはホットスワップ対応

Webpack-dev-serverはホットスワップ(ホットスワップHRM)をサポートし、HRM機能を使用するにもコマンドライン方式とNodeの2つの方式がある.js API方式.

6.1 Node.js API方式

Node.js API方式は3つの構成を行う必要がある:1)webpack/hot/dev-serverをwebpackプロファイルのentry項目に追加する;2)new webpack.HotModuleReplacementPlugin()をwebpackプロファイルのplugins項目に追加する.3)hot:trueをwebpack-dev-serverの構成項目に加える.
reactを使用してコードを記述すると、変更した部分を自動的にリフレッシュできます.しかし、これは自動的にページをリフレッシュするのとは異なります.hot-loaderはページをリフレッシュするのではなく、変更した部分を置き換えるだけです.インストール

npm i --save-dev react-hot-loader webpack-dev-server

修正.babelrc

{
  "presets": [
    "es2015"
  ],
  "plugins":["react-hot-loader/babel"]
}

webpackを修正する.config.js

var webpack = require('webpack');
module.exports = {
    // ：entry
    entry: [
        "webpack-dev-server/client?http://127.0.0.1:3000",
        "webpack/hot/only-dev-server",
        "./src/app.js"
    ],
// ：output
    output: {
        path: __dirname,
        filename: "build/bundle.js",
        publicPath: "/build"
    },
    module: {
        loaders: [
            { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel', query: { presets: ['es2015', 'react'] } }, // es6 react
            { test: /\.css$/, loader: "style!css" },
            { test: /\.scss$/, loader: "style!css!sass" }, //sass 
        ]
    },
    resolve: {
        extensions: ['', '.js', '.json']
    },
    plugins: [
        new webpack.NoErrorsPlugin(), // 
        new webpack.HotModuleReplacementPlugin() // ：webpack 
    ],
    devtool: 'source-map'
};

serverを追加する.jsファイル

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');


new WebpackDevServer(webpack(config), {
    publicPath: config.output.publicPath,
    hot: true,
    historyApiFallback: true
}).listen(3000, 'localhost', function(err, result) {
    if (err) {
        return console.log(err);
    }
    console.log('Listening at http://localhost:3000/')
});

どのように使用しますか?–コマンドライン

webpack   // 
node server.js  // node 

ブラウザでlocalhost:3000を入力すると結果が表示され、cssファイルを変更し、保存するとWebページが自動的にブラウザに表示されます.

6.2命令ライン方式

コマンドライン方式は比較的簡単で、--inline --hotを追加するだけです.例の位置は私のgithubです.
https://github.com/zrysmt/react-website/tree/master/mysite02
この例では、次のコマンドを実行します.

webpack-dev-server --history-api-fallback --progress --profile --inline --colors --hot --port 4000

私のgithubでhttps://github.com/zrysmt/react-demo中cloneまたはfork、このブログはdemo 01とdemo 04に対応しています
参考阅读:-react-facebook官网-react中国语版-极客学院-React入门実例教程-阮一峰-【訳】在React.jsではES 6+-Reactを用いる.jsでよく使われるES 6表記まとめ-react-hot-loader-WEBPACK DEV SERVERを使用して説明