ArmadilloでReactを使用してHello Worldを表示させてみる

at_ito

2019年8月5日 6時22分

ArmadilloのGUIはブラウザで実現することも可能になってきています。昨今のWebアプリケーションでは、ページ遷移のないシングルページアプリケーション(SPA)への需要が増えてきているというトレンドがあります。

SPAを実現するライブラリとしてReactというものがあるようなので、 Armadillo上でReactを使ってHello Worldを試してみます。

1. 環境

製品: Armadillo-640
nodeバージョン: 10.16.1 , npmバージョン: 6.9.0
- インストール方法の参考: Armadillo-640: npm(Node Package Manager)でNode.js用のパッケージを管理する方法
使用したnodeパッケージバージョン
- react@16.8.6
- react-dom@16.8.6
- webpack@4.39.1
- webpack-dev-server@3.7.2
- webpack-cli@3.3.6
- babel-loader@8.0.6
- @babel/core@7.5.5
- @babel/preset-env@7.5.5
- @babel/preset-react@7.0.0

2. ワーキングディレクトリの作成

[armadillo ~]# mkdir -p ~/work/react-server
[armadillo ~]# cd ~/work/react-server
[armadillo ~/work/react-server]# npm init -y

3. 必要なパッケージをインストール

[armadillo ~/work/react-server]# npm i -S react react-dom
[armadillo ~/work/react-server]# npm i -D webpack webpack-cli webpack-dev-server
[armadillo ~/work/react-server]# npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-react

4. 設定と、ソースコードの作成

以下のコマンドを実行し、srcディレクトリと、publicディレクトリを作成してください。

[armadillo ~/work/react-server]# mkdir src public

src/index.jsxというファイルを作成し、以下のように編集してください。

import React from 'react';
import ReactDOM from 'react-dom';
 
ReactDOM.render(<div>Hello World</div>, document.getElementById("root"));

index.htmlというファイルを作成し、以下のように編集してください。

<!DOCTYPE html>
<html lang="js">
  <head>
    <meta charset="UTF-8">
    <title>react-sample</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="./public/bundle.js"></script>
  </body>
</html>

webpack.config.jsというファイルを作成し、以下のように編集してください。

const path = require('path');
 
module.exports = {
  entry: './src/index.jsx',
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.jsx$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        query: {
          presets: ['@babel/env', '@babel/react']
        }
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  devServer: {
    contentBase: path.join(__dirname, '/'),
    historyApiFallback: true,
    port: 3000
  },
};

5. 動作確認

Armadillo上で以下のコマンドを実行してください。

[armadillo ~/work/react-server]# ./node_modules/.bin/webpack --mode development
[armadillo ~/work/react-server]# ./node_modules/.bin/webpack-dev-server --mode development --host --inline --open

上記コマンドを実行した後、有線LAN等で接続されているPCからブラウザのURL欄に「http://[armadilloのIPアドレス]:3000/」と入力すると、画面にHello Worldが表示されます。

ブログ