Reactを触ってみた

概要

• Reactを初めて触ってみた際のメモ書き
• そもそもフロントエンドフレームワークが初めて
• 下記の素敵な入門記事のとおりやってみて、自分なりに補足を当記事に記載
  今から始めるReact入門 〜 React の基本

補足

「webpack-dev-server で開発用web サーバを起動する」の箇所がうまくいかない

事象

• ./node_modules/.bin/webpack-dev-server --content-base src --mode developmentコマンドで、
  --contentオプションが無い旨のエラーとなった
• そもそもwebpack-dev-serverのバージョンからしてwebpack serveでの起動が正しいっぽい
• webpack serveで起動し、http://localhost:8080にアクセスしても、index.htmlが表示されない

対応方法

• webpack.config.jsを以下のように修正

webpack.config.js

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');

module.exports = {
    context: path.join(__dirname, "src"),
    // ↓↓↓ここを追加
    devServer: {
        static: {
            directory: path.join(__dirname, "src"),
        },
    },
    // ↑↑↑ここを追加
    entry: "./js/client.js",
    module: {
        rules: [{
            test: /\.jsx?$/,
            exclude: /(node_modules|bower_components)/,
            use: [{
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-react', '@babel/preset-env']
                }
            }]
        }]
    },
    output: {
        path: __dirname + "/src/",
        filename: "client.min.js"
    },
    plugins: debug ? [] : [
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
    ]
};

• 下記コマンドで起動

webpack serve --mode development

「npm スクリプトにwebpack-dev-server 起動コマンドを登録」の箇所

概要

• 先の「--contentオプションが無い旨のエラー」に合わせて、起動時のscriptを修正する

対応方法

• package.jsonのstartスクリプトを以下の様に修正する

package.json

   ：
   "scripts": {
     // ↓↓↓　ここを追加
     "start": "webpack serve --mode development",
     // ↑↑↑　ここを追加
     "test": "echo \"Error: no test specified\" && exit 1"
   },