React – Visual Studio Code on Ubuntu の利用 No.77

自己投資としてチャレンジしている内容を Blog で公開しています。

今回は React を使って Web サイトをロリポップで公開したいと思います。開発環境は Ubuntu 上の Visual Studio Code を利用しました。(In English React – Visual Studio Code on Ubuntu No.77)

▼1. React とは

React は、JavaScript library です。UI を構築するため、Facebook で開発されました。
今回紹介しませんが、Vue も React と同様 JavaScript library で web アプリケーションの UI を作成することができます。(参考) React – A JavaScript library for building user interfaces (reactjs.org)

▼2. 事前準備

2-1. React のアプリケーションを作成

https://releases.ubuntu.com/20.04/

2-2. Visual Studio Code のインストール

sudo snap install --classic code

https://code.visualstudio.com/docs/setup/linux

2-3. curl のインストール

sudo apt install curl

2-4. Node.js および npm のインストール

Node.js JavaScript runtime および npm をインストールします。

参考:distributions/README.md at master · nodesource/distributions (github.com)
Download | Node.js (nodejs.org)

▼3. Web サイトの公開

3-1. React のアプリケーションを作成

React のアプリケーションを my-app のフォルダ配下に作成し、依存するライブラリーもインストールします。

npx create-react-app my-app

3-2. React アプリケーションの実行し、ローカルで Web サイトを確認

cd my-app
npm start

3-3. Visual Studio Code を起動

code .

3-4.  index.js を修正し保存

Web サイトで Hello World! の見出しが表示されるように変更します。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

var element = React.createElement('h1', { className: 'greeting' }, 'Hello, world!');
ReactDOM.render(element, document.getElementById('root'));

reportWebVitals();

3-5.  Browser を更新

3-6.  package.json に homepage のパラメータを追記

package.json を開き、 “homepage”: “./” を追記します。

xxxx
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "homepage":"./"
}

3-7. ビルド

npm run build
ls

build  node_modules  package.json  package-lock.json  public  README.md  src

3-8. ロリポップで提供している FTP サイトでディレクトリを作成し、3-7 でビルド後に作成されたディレクトリ build にあるファイルを FTP サイトのディレクトリにコピー

その後、本 blog の Web サイト上でも表示することができました。

▼4. 参考情報

• React – A JavaScript library for building user interfaces (reactjs.org)
• React JavaScript Tutorial in Visual Studio Code

以上です。参考になりましたら幸いです。