AlmaLinux 9
Sponsored Link

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

ユーザーインタフェース構築のための JavaScript ライブラリー、React のインストールです。
[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:
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:

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" />
          Hello React World!
          Edit <code>src/App.js</code> and save to reload.
          rel="noopener noreferrer"
          Learn React

export default App;

[alma@dlp testproject]$
cd ~/testproject/test-app

[alma@dlp test-app]$
npm start