React + yarn + webpack でとりあえず Hello World! する

React の勉強を始めたので、とりあえず Hello World してみます。
昨年 Facebook が公開した npm と互換性のあるパッケージ管理ツールの yarn もせっかくなので使ってみました。

サンプルのディレクトリ構成はこんな感じです。

.
├── package.json
├── public
│   └── index.html
├── src
│   └── index.js
├── webpack.config.js
└── yarn.lock

エディタは Atom を利用しており、 eslint をリアルタイムに実施してほしいので、パッケージを追加しておきます。
エディタ上から追加も出来ますが、複数を一気に追加したいので apm を利用してみます。apm はAtomのパッケージを管理するツールです。npmっぽい。

$ which atom 
/usr/local/bin/atom

$ which apm    
/usr/local/bin/apm

$ apm install es6-javascript intentions busy-signal linter-ui-default linter linter-eslint
Installing es6-javascript to /Users/.atom/packages ✓
Installing intentions to /Users/.atom/packages ✓
Installing busy-signal to /Users/.atom/packages ✓
Installing linter-ui-default to /Users/.atom/packages ✓
Installing linter to /Users/.atom/packages ✓
Installing linter-eslint to /Users/.atom/packages

これで追加が完了しました。

続いて yarn をインストールしてみます。

brew install yarn

必要なライブラリをインストールします。
npm は install ですが、 yarn は add です。

yarn add webpack webpack-dev-server babel-core babel-loader babel-preset-react babel-preset-es2015 eslint-plugin-react

実行すると、インストールが完了して、package.json にも追加されています。
もちろん package.json に記載してから yarn add しても問題ありません。

yarn の場合、add すると yarn.lock を自動で生成します。npm でいうところの shrinkwrap です。

package.json に、ローカルサーバを立ち上げるコマンドを追記しておきます。

"scripts": {
    "start": "./node_modules/.bin/webpack-dev-server"
  },

index.html を作成します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React Sample</title>
  </head>
  <body>
    <div class="container"></div>
  </body>
  <script src="bundle.js" charset="utf-8"></script>
</html>

webpack.config.js を作成します。

const path = require('path');

const publicDir = path.join(__dirname, '/public');
module.exports = {
  entry: [
    './src/index.js',
  ],
  output: {
    path: publicDir,
    publicPath: '/',
    filename: 'bundle.js',
  },
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel-loader',
      query: {
        presets: ['react', 'es2015'],
      },
    }],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  devServer: {
    historyApiFallback: true,
    contentBase: publicDir,
  },
};

publicDir/bundle.js にリクエストが来ると ./src/index.js をコンパイルした成果物を返します。

React を利用するパッケージを追加していなかったので、追加します。

$ yarn add react react-dom

index.js を作成します。
ひとまず「Hello React!」と表示させてみたいと思います。

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

ReactDOM.render(
    <div>Hello React!</div>, 
    document.querySelector('.container')
);

ローカルサーバを立ち上げて、実際に確認してみます。

$ yarn run start
yarn run v1.1.0
$ ./node_modules/.bin/webpack-dev-server
Project is running at http://localhost:8080/
webpack output is served from /
Content not from webpack is served from /Users/dev/js/public
404s will fallback to /index.html
Hash: fbe259a42cba27eb51eb81fe88e47fd7bb201703
Version: webpack 3.6.0
.
.

ローカルサーバは http://localhost:8080/ で確認できるのでアクセスしてみます。

f:id:tky_bpp:20171005135032p:plain

無事に「Hello React!」が表示されました。

さきほどの ReactDOM.render() がどのようなコードを生成しているのか見てみます。
bundle.js の中から記述した部分を探してみると

f:id:tky_bpp:20171005135230p:plain 　

なるほど、 createElement して append しているのですね。

今回は React を利用しているので component として書き直してみます。
src 配下に components ディレクトを作成し、 Echo.js として新しくファイルを作成します。

import React from 'react';

function Echo(props) {
    return (<div>Hello React!</div>);
}
export default Echo;

Functional Component として書きましたが、Class Component として書くとこうなります。

import React, { Component } from 'react';

class Echo extends Component {
    render() {
        return (<div>Hello React!</div>);
    }
}
export default Echo;

今回は render のみでステートレスなので Class Component にしました。

続いて、index.js を書き直します。

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

import Echo from './components/echo';
ReactDOM.render(<Echo />, document.querySelector('.container'));

これで再度ローカルサーバを立ち上げて確認してみます。

f:id:tky_bpp:20171005135032p:plain
無事に、React から Hello World することが出来ました。
(実際には Hello React ですが)

入門 React ―コンポーネントベースのWebフロントエンド開発

作者: Frankie Bagnardi,Jonathan Beebe,Richard Feldman,Tom Hallett,Simon HØjberg,Karl Mikkelsen,宮崎空
出版社/メーカー: オライリージャパン
発売日: 2015/04/03
メディア: 大型本
この商品を含むブログ (2件) を見る

Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門

作者: Stoyan Stefanov,牧野聡
出版社/メーカー: オライリージャパン
発売日: 2017/03/11
メディア: 単行本（ソフトカバー）
この商品を含むブログを見る

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

作者: 山田祥寛
出版社/メーカー: 技術評論社
発売日: 2016/09/30
メディア: 大型本
この商品を含むブログを見る