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

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

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

1. 環境

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が表示されます。

製品: 
Armadillo-IoT G3
Armadillo-IoT G3L
Armadillo-X1
Armadillo-640
タグ: