2017/10/30

React 環境構築方法


はじめに

React の環境構築はなにかと面倒ですね。Qiit○とかの記事を参考にしてみたら動かなかったり、create-react-app コマンドだと後で面倒なことになりそうですし。

なのでここでは、Node.js と npm のインストールが終わっていることを前提に、簡単に React 環境構築方法を掲載しておきます。

構築する環境は、WebPack, Babel を使用したものになります。

WebPack は複数のツールを使いビルドを行うもので、Babel は最新のJS記述を既存のブラウザでも動作するようにJSを変換するツールになります。

では、構築方法を見ていきましょう。

環境構築

まずはターミナルからディレクトリを作成して、package.json ファイルを生成します。

$ mkdir react_sample
$ cd react_sample
$ npm init -y

そうしたら、以下の2ファイルを作成します。

ディレクトリ構成はこんな感じで。

react_sample/
├── app.js
├── dist
├── index.html
├── package.json
└── webpack.config.js

・app.js

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

class App extends React.Component{
  render(){
    return(
      <h1>Hello World</h1>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"))

・index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <div id="root"></div>
  <script type="text/javascript" src="./dist/app.js"></script>
</body>

react と react-dom のインストール

下記コマンドを実行して、react と react-dom をインストールします。

$ npm install react react-dom

WebPack のインストール

下記コマンドを実行して、WebPack 関連のツールをインストールします。

$ npm install webpack webpack-dev-server --save-dev

 Babel のインストール

下記コマンドを実行して、Babel 関連のツールをインストールします。

 $ npm install babel-cli babel-loader babel-preset-env babel-preset-react babel-preset-es2015 --save-dev

 その後、.babelrc ファイルを作成します。

 {"presets": ["react", “es2015"]}

引き続き、WebPack が Babel を使用できるように、webpack.config.js ファイルを作成します。

module.exports = {
  entry: './app.js',
  output: {
    path: __dirname + ‘/dist',
    filename: 'app.js'
  },
  module: {
    loaders: [
      {
         test: /\.js$/,
         exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  }
}

次に、package.json に以下の行を追加します。カンマで構文が崩れないよう注意してください。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server --hot --inline"
  }

これで、npm run build でビルドができ、npm run start で Webサーバーが起動します。サーバーは http://localhost:8080 でアクセスします。

より細かい設定は書籍を参照してみてください。

 


スポンサーリンク


このエントリーをはてなブックマークに追加




Twitter ではブログにはない、いろんな情報を発信しています。


コメント

コメントを書く



プロフィール

  • 名前:fnya
    経歴:
    SE としての経験は15年以上。様々な言語と環境で業務系システム開発を行い、セキュリティ対策などもしていました。現在は趣味SE。

    Twitter では、ブログでは取り上げない情報も公開しています。


    ブログについて

    このブログは、IT、スマートフォン、タブレット、システム開発などに関するさまざまな話題を取り上げたり、雑感などをつづっています。


    >>ブログ詳細
    >>自作ツール
    >>運営サイト
    >>Windows 10 まとめ

    Twitter のフォローはこちらから Facebook ページはこちら Google+ページはこちら RSSフィードのご登録はこちらから