既存のアプリにReactを追加してみた【npm・babelとwebpackの利用】

2024.09.06

yamazaki_k

freelance

React

はじめに

「Reactとは何か？」ーそれに対する答えは色々なものが考えられます。しかし、簡単で明確な答えはReactの公式サイトに掲示されています。Reactは「A javascript library for building user interface」です。日本語にすれば、「ユーザインターフェスを構築するためのJavascriptライブラリの１つ」ということです。今回は既存のアプリにnpmとbabelとwebpackを利用してReactを追加、「Hello world」を出力しましょう！　

テクフリでフリーランス案件を探してみる

npmのインストール

1. Nodeのサイトからダウンロードして、インストールします。

2. Homebrew:

他の方法はHomebrewを使うことです。ターミナルを開いて下記を入力してください。 Homebrewのインストール：

$ ruby -e "$(curl -fsSL 
https://raw.githubusercontent.com/Homebrew/install/master/install)"

Nodeとnpmのインストール:

$ brew install node

念のため、nodeとnpmのバージョンをチェックしましょう。

$ node -v
v6.11.3

$ npm -v
3.10.10

babelのインストール

まず、アプリのディレクトリにpackage.jsonファイルを作りましょう。

$ cd your/application/path
$ npm init -y

package.jsonファイルの内容は自分のアプリと適当に入力してください。これは例です。

{
  "name": "アプリの名前",
  "version": "1.0.0",
  "description": “アプリの説明",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

あと、

babel-cli
babel-preset-env (ES2015サポート)
babel-preset-react (JSXサポート)
babel-loader (webpackのbabelにサポートする loader モジュール)

をインストールしておきます。

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

webpackのインストール

$ npm install --save-dev webpack

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

$ npm install --save-dev react react-dom

package.jsonファイルはこいう感じになります。

{
  ...
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-react": "^6.24.1",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "webpack": "^3.5.6"
  },
  ...
}

Hello Worldの出力

ではここから、Reactで「Hello world」をブラウザに出力してみましょう！まず、リポジトリを見てみましょう。

|__ app
|  |__ javascripts
|  |   |__ bundle
|  |   |__ index.js
|  |
|  |__ views
|      |__ index.html
|
|__ node_modules
|__ package.json
|__ webpack.config.js

##webpackの設定ルートパスでwebpack.config.jsファイルを作りましょう。

constpath=require('path');

module.exports={
  entry: {　// インプットファイル
    index:'./app/javascripts/index.js'
  },
  output: {
    filename:'[name].bundle.js',　// アウトプットファイル名
    　// アウトプットファイルパス。後でHTMLファイルでインクルードします。
    path:path.resolve(__dirname,'app/javascripts/bundle')
  },
  module: {
    loaders: [
      {
        loader:"babel-loader",

        // アプリのjavascriptsのパスを指定し、
        // 指定したパスでのファイルだけトランスパイルさせます。
        include: [
          path.resolve(__dirname,"app/javascripts"),
        ],
        exclude: [
          path.resolve(__dirname,"node_modules"),
        ],
        // `.js` と `.jsx` というファイルのエクステンションを指定します。
        test:/\.jsx?$/,

        // babelと一緒に使うES2015とReactの指定
        query: {
          presets: ['env','react']
        }
      }
    ]
  }
};

webpackをnpmのscriptで呼び出す設定

package.jsonファイルの変更

{
  ...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack-build": "webpack -p --config webpack.config.js",
    "webpack-watch": "webpack --watch --config webpack.config.js"
  },
  ...
}

ここまでで、webpackの設定は終了です。では、マークアップしましょう。

index.htmlの作成

以下のようなHTMLファイルを作成します。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="root"></div>
  <scriptsrc="../javascripts/bundle/index.bundle.js")></script>
</body>
</html>

index.js

importReactfrom'react';
importReactDOMfrom'react-dom';

letstyles = {
  fontStyle:'oblique',
  fontFamily:'arial',
  color:'chocolate'
}

ReactDOM.render(
  <h2style={styles}>
    Hello world
  </h2>,
  document.getElementById('root')
);

「結果はどうでしょう？」と思いませんか。試しましょう！１回 build する