お役立ちコンテンツ | フリーランスエンジニアの案件・求人なら【テクフリ】

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

2019.10.17

yamazaki_k

React

目次

    はじめに

    「Reactとは何か?」ーそれに対する答えは色々なものが考えられます。しかし、簡単で明確な答えはReactの公式サイトに掲示されています。Reactは「A javascript library for building user interface」です。日本語にすれば、「ユーザインターフェスを構築するためのJavascriptライブラリの1つ」ということです。 今回は既存のアプリに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')
    );
    

    「結果はどうでしょう?」と思いませんか。試しましょう! 1回 build する

    $ npm run webpack-build
    

    ファイルの変更があればbuildします。

    $ npm run webpack-watch
    

    を行なって、Index.htmlをブラウザで開いてください。「Hello world」が表示されているはずです!!

    今すぐシェアしよう!

    B!
    <span class="translation_missing" title="translation missing: ja.layouts.footer.icon_back_to_top">Icon Back To Top</span>
    TOP