Arch Linux に React Js をインストール

次の記事をなぞってみました。
React Js Arch Linux Installation Guide

私の環境です。

$ uname -a
Linux iwata 5.16.8-arch1-1 #1 SMP PREEMPT Tue, 08 Feb 2022 21:21:08 +0000 x86_64 GNU/Linux

$ node --version
v17.3.0

$ npm --version
8.4.1

1) インストール

sudo npm install -g create-react-app

確認

$ which create-react-app
/usr/bin/create-react-app

$ create-react-app --version
5.0.0

2) アプリケーションの作成

create-react-app hello-world

次のようなファイルが作成されます。

$ tree -L 1 hello-world/
hello-world/
|-- README.md
|-- node_modules
|-- package-lock.json
|-- package.json
|-- public
`-- src

3) サーバーの起動

cd hello-world
npm start

4) ブラウザーで　http://hostname:3000 にアクセス

サーバーでファイアウォールが動いていたら止めます。

sudo systemctl stop ufw

5) src/App.js を改造します。

src/App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
<p>皆さん　今日は。</p>
<p>May/05/2019</p>
      </header>
    </div>
  );
}

export default App;

6) ブラウザーでアクセス

7) もう少し src/App.js を改造します。

src/App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
<h1>皆さん　今日は。</h1>
<h2>May/05/2019</h2>
    </div>
  );
}

export default App;

8) ブラウザーでアクセス

9) 公開ファイルの作成

npm run build

次のファイルが作成されます。

$ tree build/
build/
├── asset-manifest.json
├── favicon.ico
├── index.html
├── manifest.json
├── precache-manifest.0fe745c05466250d33cd5f5ec8261b01.js
├── service-worker.js
└── static
    ├── css
    │   ├── main.584f321a.chunk.css
    │   └── main.584f321a.chunk.css.map
    ├── js
    │   ├── 2.3310f33a.chunk.js
    │   ├── 2.3310f33a.chunk.js.map
    │   ├── main.b2804c8a.chunk.js
    │   ├── main.b2804c8a.chunk.js.map
    │   ├── runtime~main.a8a9905a.js
    │   └── runtime~main.a8a9905a.js.map
    └── media
        └── logo.5d5d9eef.svg

10) 公開ファイルのテスト

10-1) サーバーのインストール

yarn global add serve

インストールしたサーバーのバージョンの確認

$ ~/.yarn/bin/serve --version
11.3.2

10-2) サーバーの起動

~/.yarn/bin/serve -s build

10-3) ブラウザーで http://hostname:5000 にアクセス