次の記事をなぞってみました。
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
- インストール
sudo npm install -g create-react-app
確認
$ which create-react-app
/usr/bin/create-react-app
$ create-react-app --version
5.0.0
- アプリケーションの作成
create-react-app hello-world
次のようなファイルが作成されます。
$ tree -L 1 hello-world/
hello-world/
|-- README.md
|-- node_modules
|-- package-lock.json
|-- package.json
|-- public
`-- src
- サーバーの起動
cd hello-world
npm start
- ブラウザーで http://hostname:3000 にアクセス
サーバーでファイアウォールが動いていたら止めます。
sudo systemctl stop ufw
5) src/App.js を改造します。
```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;
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;
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-1) サーバーのインストール
yarn global add serve
インストールしたサーバーのバージョンの確認
$ ~/.yarn/bin/serve --version
11.3.2
10-2) サーバーの起動
```bash
~/.yarn/bin/serve -s build
10-3) ブラウザーで http://hostname:5000 にアクセス