Weblog_beta

Reactでモノを作るというのをやってみたくなったので、Hello worldが表示されるところまで設定した。
覚え書き。

いろいろインストール

$ mkdir XXXX
$ cd XXXX/
$ git init
$ npm init

$ npm install --save react react-dom
$ npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react webpack webpack-dev-server

webpack.config.jsを書く

./XXXX/webpack.config.jsを作る。

const path = require('path');

module.exports = {
  entry: {
    js: './src/main.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      }
    ],
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    port: 8080,
    host: '0.0.0.0',
    disableHostCheck: true,
  },
};

hostとdisableHostCheckは、Cloud9でプレビューするために書いてる。
これがないと、プレビューでInvalid Host headerと表示されてしまったので、下記のページを参考に追加した。
https://tackeyy.com/blog/posts/how-to-access-app-through-the-ip-with-webpack-dev-server

webpack.config.jsは、どういうコトができるのか把握するの大変そうなので、良さそうな機能を見かけたら取り込む感じで育てていきたい。

htmlとjsを書く

./XXXX/dist/index.htmlを作る。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
<link rel="stylesheet" href="/bundle.css">
</head>
<body>
<div id="root"></div>
<script src="/bundle.js"></script>
</body>
</html>

./XXXX/src/main.jsを作る。

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

ReactDOM.render(
  <h1>Hello world</h1>,
  document.getElementById('root')
);

プレビューとビルド

下記コマンドでプレビューできる。

$ ./node_modules/.bin/webpack-dev-server

下記コマンドでビルドできる。

$ ./node_modules/.bin/webpack