Reactで静的Webサイトを作成しました。公式のサンプルをもとにformをサブミットして、API呼び出し、結果を表示する単純なWebサイトになります。最終的にVSCodeのLiveServerを使ってローカルホストで動作確認まで行います。作業はすべてVSCODE上で行います。
 |
| 入力 |
 |
| 結果表示 |
- FW：React
- LNG：Typescript
- IDE：VSCODE
- OS：Windows
- API：A3RTのTalkAPI(ChatBot)
目次[非表示]
Reactのテンプレートから基本のスケルトンを作成
Reactのインストール
VSCODEのターミナルにて、npmコマンドを使い、npxとReactをインストールします。
$apt update
$npm install n -g
$n stable
$apt purge -y nodejs npm
$exec $SHELL -l
$npm install -g npx #NPXのインストール
$npx create-react-app a3rt --template typescrip #Reactのサンプルソースをインストール
スケルトンの作成
インストール後、./srcのファイルのうち、APP.css,APP.tsx,index.tsx,react-app-env.d.ts以外を削除します。残ったファイルを以下のようにスケルトン化します。
./Package.jsonに以下の通り追加します。ビルド結果のJSやCSSを相対パスで読み込むことができるようになります。
{
"homepage": "./",
}
基本のコンポーネント配置
./src配下に、compornentsフォルダを作成し、Forms.tsx,Responce.tsx,Load.tsxを配置します。Reactでは基本的にcompornentという単位でオブジェクトを管理します。compornentをメインのAPP.tsxに配置し、APP.tsxをindex.tsxに配置します。index.tsxはindex.html上でinnerhtmlとして呼び出されるイメージになります。
Forms.tsxでは、onSubmit時に、setImessage（compornent間でImessageのStateを受け渡す）、getOmessage（API呼び出し）を実行します。Responce.tsxでは、APIから返却されたOmessageを表示します。OmessageはApp.tsx経由で受け渡されることになります。すべてのStateはApp.tsxに所属します。
/*props定義*/
type FromPropsType={
imessage:string;
setImessage:any;
getOmessage:any;
}
const Form =({imessage,setImessage,getOmessage}:FromPropsType)=>{
return(
<form onSubmit={getOmessage}>
<input type="text" name="imessage" placeholder="" onChange={e=>setImessage(e.target.value)} value = {imessage}/>
<button type="submit">SUBMIT</button>
</form>
);
};
export default Form;
/*props定義*/
type ResponcePropsType = {
responce:{
omessage:string
}
}
const Responce =({responce}:ResponcePropsType)=>{
return(
<div>
{responce.omessage && <div className="">{responce.omessage}</div>}
</div>
);
};
export default Responce;
Load.tsxは、通信中の場合にspinを表示するCompornetです。
const Load =()=>{
return(
<div className="load">
<h5>Loading</h5>
</div>
);
};
export default Load;
App.tsxは、compornentを管理します。
{
import React from 'react';
import './App.css';
import Form from './components/Form';
import Responce from './components/Responce';
import Load from './components/Load';
import {useState} from "react";
type ResponceStateType={
omessage:string
}
function App() {
const[load,setLoad]=useState<boolean>(false);
const[imessage,setImessage]=useState("");
const[responce,setResponce]=useState<ResponceStateType>({
omessage:""
});
const getOmessage=(e:any)=>{
------------
------------
------------
}
return (
<div className="container">
<Form imessage={imessage} setImessage={setImessage} getOmessage={getOmessage}/>
<Responce responce={responce}/>
{load ? <Load/>:<div>} /*参考演算子でLoadを出し入れします*/
</div>
);
}
export default App;
Reactにロジックを追加
getOmessageを追加
A3RTのTalkAPIを呼びだせるように以下のように追加します。apikeyはリンクより、A3RTのWebサイトにて発行します。
const getOmessage=(e:any)=>{
e.preventDefault();
const fdata = new FormData();
fdata.set('apikey', 'xxxxxxxxxx');
fdata.set('query', imessage);
fetch(`https://api.a3rt.recruit-tech.co.jp/talk/v1/smalltalk`,{
method: "POST",
body: fdata
})
.then(res=>res.json())
.then((data)=>{
setResponce({
omessage:data.results[0].reply
})
setImessage("");
setLoad(false);
})
.catch(err=>{
alert("エラーが発生しました。リロードしてください。")
setLoad(false);
}
)
}
Load用のCSSを追加
text-align: center;
}
.load {
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
Webサイトの実行
npm startで実行
以下の通り実行します。規定のブラウザ上に今回作成したWebサイトが表示されます。
npm start
You can now view a3rt in the browser.
Local: http://localhost:3001
On Your Network: http://172.19.80.1:3001
Note that the development build is not optimized.
To create a production build, use npm run build.
live serverで実行
まず、Reactのbuildを行い、その後、VSCode上の右下にあるパネル「GoLive」をクリックし、サーバを起動します。
Compiled successfully.
サーバが起動すると、規定のブラウザ上に以下の画面がでるので、buildフォルダを選択します。選択すると今回作成したWebサイトが表示されます。
まとめ
今回はReactで静的Webサイトを作成する方法を紹介しました。Paas環境で実行する方法については、AzureやAWS上で、ストレージ上に静的Webサイトを作成すると簡単だと思います。
.png)
