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

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

2024.09.06

yamazaki_k

freelance
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」が表示されているはずです!!

    テクフリでフリーランス案件を探してみる
    フリーランスとしての単価相場をチェックしてみませんか?

    3つの質問に答えるだけで、フリーランスエンジニアとしての単価相場を算出します。 スキルやご経験にマッチする案件もあわせてご紹介いたしますので、気軽にご活用ください! ※単価相場の算出に個人情報の回答は必要ございません。

    単価診断テストを受けてみる

    今すぐシェアしよう!

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