React : インストール2023/03/10

	ユーザーインタフェース構築のための JavaScript ライブラリー、React のインストールです。
[1]	こちらを参考に Node.js をインストールしておきます。
[2]	任意の一般ユーザーで React テストアプリケーションを作成します。

[alma@dlp ~]$

mkdir testproject

[alma@dlp ~]$

cd testproject

# React アプリケーション [test-app] 作成

[alma@dlp testproject]$

npx create-react-app test-app

Need to install the following packages:
  create-react-app
Ok to proceed? (y) y
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.

Creating a new React app in /home/alma/testproject/test-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

.....
.....

Happy hacking!

[alma@dlp testproject]$

cd test-app

[alma@dlp test-app]$

npm start


> test-app@0.1.0 start
> react-scripts start

Compiled successfully!

You can now view test-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://10.0.0.30:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

任意のクライアントコンピューターで表示された URL に Web アクセスして、以下のようなページが表示されれば OK です。

[3]	表示のページを編集して [Hello World] を入れます。

[alma@dlp ~]$

vi ~/testproject/test-app/src/App.js

# 適当な位置にテキストを追加

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" />
        <h1>
          Hello React World!
        </h1>
        <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>
      </header>
    </div>
  );
}

export default App;

[alma@dlp testproject]$

cd ~/testproject/test-app

[alma@dlp test-app]$

npm start