Ubuntu 22.04
Sponsored Link

React : インストール2022/08/26

 
ユーザーインタフェース構築のための JavaScript ライブラリー、React のインストールです。
[1]
[2] 任意の一般ユーザーで React テストアプリケーションを作成します。
ubuntu@dlp:~$
node -v

v16.17.0
ubuntu@dlp:~$
mkdir testproject

ubuntu@dlp:~$
cd testproject
# React アプリケーション [test-app] 作成

ubuntu@dlp:~/testproject$
npx create-react-app test-app

Need to install the following packages:
  create-react-app@5.0.1
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/ubuntu/testproject/test-app.

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

.....
.....

Happy hacking!
npm notice
npm notice New minor version of npm available! 8.15.0 -> 8.18.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.18.0
npm notice Run npm install -g npm@8.18.0 to update!
npm notice

ubuntu@dlp:~/testproject$
cd test-app

ubuntu@dlp:~/testproject/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] を入れます。
ubuntu@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;

ubuntu@dlp:~$
cd ~/testproject/test-app

ubuntu@dlp:~/testproject/test-app$
npm start

関連コンテンツ