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 방문