ReactをDockerで実行する方法【React/Docker】

■はじめに

ReactとDockerの環境構築は完了している前提で記載します。

まだの方は、それぞれの環境構築を行ってからご覧ください。

■手順

以下のコマンドを実行し、Reactプロジェクトを作成します。

create-react-app dockersample

以下のコマンドを実行し、reactアプリが正常に動作することを確認します。

cd dockersample
yarn start

以下のコマンドで、Dockerfileを生成します。

vi Dockerfile

「Dockerfile」に以下を記載します。

# ベースイメージの作成
FROM node:12.16.1
# コンテナ内で作業するディレクトリを指定
WORKDIR /usr/src/app
# package.jsonとyarn.lockを/usr/src/appにコピー
COPY ["package.json", "yarn.lock", "./"]
# パッケージをインストール
RUN yarn install
# ファイルを全部作業用ディレクトリにコピー
COPY . .
# コンテナを起動する際に実行されるコマンド
ENTRYPOINT [ "yarn", "start" ]

以下のコマンドで、イメージを生成する(ビルドする)

docker build -t sample .

以下のコマンドでdockerを起動する

docker run -it --name sample -p 3000:3000 -v $PWD:/usr/src/app sample

ブラウザで「http://localhost:3000/」にアクセスして、Reactの画面が表示されればOK!

Reactのプロジェクトをサーバー(さくらVPS)にデプロイする方法【React】

■はじめに

環境は以下の環境で書いています。

・さくらVPS

Apache

SSL(Let’s Encrypt)

環境構築や、Reactプロジェクトの作成は記載しませんので、それぞれで用意しておいてください。

■手順

「cd」でReactのプロジェクトディレクトリをカレントディレクトリにする。

以下のコマンドを実行して、Reactプロジェクトをビルドする。

yarn build

ちなみに、以下でも可能です。(どちらも同じ挙動をします。)

npm run build

上記のコマンドを実行することで、以下のディレクトリが作成されました。

[プロジェクトディレクトリ]/build

今回は、Apacheなので、上記の「build」ディレクトリ配下を全て以下にアップロードしてください。(サーバー)

/var/www/html

すると、「/var/www/html」の配下に、「index.html」などが格納されます。

これで、デプロイは完了です。

ブラウザで、以下のURLにアクセスして確認してください。

https://[ドメインやIPアドレス]/

ちなみに、注意ですが、以下のアクセスでは画面は表示されません

https://[ドメインやIPアドレス]/index.html

react-tabsでタブを作成する【React】

■はじめに

ここでは、「react-tabs」というライブラリを使用してタブを作成します。

こちらの公式サイトに書かれているような物が作成できます。

■手順

以下のコマンドで「react-tabs」をインストールしてください。

npm install react-tabs

ソースコードの全量は以下(App.jsに上書きすれば動きます。)

import React from 'react';
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import 'react-tabs/style/react-tabs.css';
class App extends React.Component{
render()
{
var textData = ""
function changeText(e) {
textData = e.target.value
}
function btnClick() {
alert(textData);
}
return (
<div>
<Tabs>
<TabList>
<Tab>Tab1</Tab>
<Tab>Tab2</Tab>
</TabList>
<TabPanel>
<h2>タブ1</h2>
</TabPanel>
<TabPanel>
<h2>タブ2</h2>
</TabPanel>
</Tabs>
</div>
);
}
}
export default App;

ボタン押下時にテキストの値を取得する方法【React】

■はじめに

ログインする際など、ボタンを押下した時に、テキストフィールドの値を取得したい場合などは多々あります。

ここでは、その方法に関して、一例を記載します。

■手順

まずは、App.jsのソースコードの全文を載せます。

以下をコピペすると動きは確認できます。

import React from 'react';
class App extends React.Component{
render()
{
var textData = ""
function changeText(e) {
textData = e.target.value
}
function btnClick() {
alert(textData);
}
return (
<div>
<h1>Hello World</h1>
<input type="text" onChange={changeText}/><br/>
<button onClick={btnClick}>ボタン</button>
</div>
);
}
}
export default App;

細かく解説すると、以下のテキストフィールドの定義で「onChange」の定義を記載してます。

この「onChange」は値が書き換わった時(テキストフィールドに値を入力した時)に呼び出される関数です。

ここでは「changeText」関数を呼び出しています。

<input type="text" onChange={changeText}/>

以下の関数でフィールド変数の「textData」にテキストの値を格納しています。

第一引数の「e」は「event」の略で、自動でchangeTextの呼び出し元のオブジェクトが格納されます。

var textData = ""
function changeText(e) {
textData = e.target.value
}

以下で、保存していたテキストフィールドの値をalertで表示させています。

function btnClick() {
alert(textData);
}

react-router-domを使用したSPAの画面切り替え(遷移)の方法【React】

■はじめに

react-router-domを使用したSPA(シングルページアプリケーション)の画面切り替え(遷移)方法を記載します。

以下のサイトを参考に環境構築、プロジェクト作成は済ませてからこちらの記事をご覧ください。

www.reigle.info

■手順

画面の構成として、「One」「Two」の2つの画面を切り替えれるように記載します。

以下のコマンドで、「react-router-dom」をインストールします。

npm i react-router-dom

ソースコードの全量は以下。

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { Link } from 'react-router-dom'
import One from './One';
import Two from './Two';
class App extends Component {
render() {
return (
<div className="App">
<Router>
<div>
<Route exact path='/' component={One}/>
<Route path='/Two' component={Two}/>
<Link to="/">One</Link>
<br/>
<Link to="/Two">Two</Link>
</div>
</Router>
</div>
);
}
}
export default App;
import React from 'react'
class One extends React.Component {
render(){
return(
<div>
<h1>One</h1>
</div>
)
}
}
export default One;
import React from 'react'
class Two extends React.Component {
render(){
return(
<div>
<h1>Two</h1>
</div>
)
}
}
export default Two;

定数クラスの作り方と呼び出し方【React】

■はじめに

ソースコードで共通の値(APIのURLなど)を使用するのに定数クラスがあると非常に便利です。

仮にAPIのURLが変わってもその定数クラスを書き換えれば終わります。

ここで、定数クラスの書き方を記載します。(他にも方法はあると思いますので、一例程度で。)

■手順

定数クラスを作成します。

「Const.js」を作成し、以下のように記載してください。(定数は任意で追加、削除してください。)

class Const {
API_URL = 'http://hogehoge.com';
SAMPLE = 'sample';
}
export default new Const();

呼び出す際には以下のようにインポートします。(パスは環境に合わせてください)

import Const from './Const';

インポートすると以下のような感じで呼び出しができます。

// Const.API_URL
console.log(Const.API_URL);
// Const.SAMPLE
console.log(Const.SAMPLE);

react-router-domで、ボタン押下時に画面遷移させる方法【React】

■はじめに

ここでは、ボタン押下時のイベントの中で、色々と処理をしてから画面遷移をしたい!という要望に対する対応方法です。

ログインなどで使用すると思います。

■手順

以下、App.jsのソースコードの全量です。

import React from 'react';
class App extends React.Component{
render()
{
const btnClick = () => {
this.props.history.push('/url');
}
return (
<div>
<button onClick={btnClick}>ボタン</button>
</div>
);
}
}
export default App;

以下の処理で画面遷移することができます。

this.props.history.push('/url');

ただ、注意するべきなのは、ボタン押下時の関数です。

「function」をつけた関数だと、「this.props」が「undefind」でエラーが発生します。

以下のようにアロー関数を使用する必要があるので、ご注意ください。(結構ハマりました。。。)

const btnClick = () => {
}

ローカルストレージに値を保存する方法【React】

■はじめに

データの保持方法は色々とありますが、ここでは「ローカルストレージ」の使用方法を記載します。

■手順

ボタン押下時に、データの取得、設定、削除を行うサンプルの全量(App.js)

※確認は、「F12」を押して、コンソールを開いて確認してください。

import React from 'react';
class App extends React.Component{
render()
{
function btnClick() {
console.log("~~~~~データ設定前の値(null)~~~~~");
console.log(localStorage.getItem('aaaa'));
console.log("~~~~~データ設定~~~~~");
localStorage.setItem('aaaa', 'サンプル');
console.log("~~~~~データ設定後の値~~~~~");
console.log(localStorage.getItem('aaaa'));
console.log("~~~~~データ削除~~~~~");
localStorage.removeItem('aaaa');
console.log("~~~~~データ削除後の値(null)~~~~~");
console.log(localStorage.getItem('aaaa'));
}
return (
<div>
<button onClick={btnClick}>ボタン</button>
</div>
);
}
}
export default App;

データは以下の方法で設定できます。

localStorage.setItem('key', 'value');

データは以下の方法で取得できます。

localStorage.getItem('key');

データは以下の方法で削除できます。

localStorage.removeItem('aaaa');

axiosを使用してRestAPIを呼び出す方法【React】

■はじめに

実際にシステムを作る際には、RestAPIの実行は必須と言って良いほど、使用します。

ここでは、「axios」を使用したRestAPIの実行方法を記載します。

■手順

axiosをインストールするために、以下のコマンドを実行する

npm i axios

App.jsのソースコードの全量は以下。

import React from 'react';
import axios from 'axios';
class App extends React.Component{
render()
{
function btnGetClick() {
const data = { param : 'aa', paramtwo : 'aa' };
axios.get('https://hogehoge.com/hoge', {params: data})
.then((res) => {
console.log(res);
})
.catch(console.error);
}
function btnPostClick() {
const data = { param : 'aa', paramtwo : 'aa' };
axios.post('https://hogehoge.com/hoge', data)
.then((res) => {
console.log(res);
})
.catch(console.error);
}
return (
<div>
<h1>Hello World</h1>
<button onClick={btnGetClick}>GET通信</button>
<button onClick={btnPostClick}>POST通信</button>
</div>
);
}
}
export default App;

以下でaxiosのインポートをしています。

import axios from 'axios';

「btnGetClick」「btnPostClick」でそれぞれ、リクエストパラメータありのAPIの実行処理を書いています。

違いは、呼び出している関数が「get」「post」なのと、第二引数(パラメータ)の指定方法です。

「get」は以下のように、「{params: [パラメータ]}」というような書き方をする必要があります。

const data = { param : 'aa', paramtwo : 'aa' };
axios.get('https://hogehoge.com/hoge', {params: data})
.then((res) => {
console.log(res);
})
.catch(console.error);

画面読み込み終了後に呼び出す処理【React】

■はじめに

「render」から呼び出すと複数回呼び出されますが、画面読み込み後に「1回だけ呼び出したい」場合の書き方を紹介します。

APIでデータを取得したい場合や、DOMを書き換えたい場合には、ここで処理する方が良いと思います。

■手順

ソースコードの全量は以下

import React from 'react';
class App extends React.Component{
componentDidMount() {
// 読み込み後処理
}
render()
{
return (
<div>
<h1>HELLO</h1>
</div>
);
}
}
export default App;

「componentDidMount」が画面読み込み後に呼び出される処理です。

このなかで、APIの実行などを行いましょう。