React17+TypeScriptでaxiosを使用しIE11にも対応させる(Parcel使用)

こんにちは。としあきです。

前回React17でaxiosを使用してIE11にも対応させる記事を書きました。

今回はReact17+TypeScriptで同様のことを実現してみました。

ある程度のボリュームの開発になるとTypeScriptで記述して型チェックをした方が開発しやすいと思います。

スマートニュース

Parcelを使用する

Parcelのインストール

yarnを実行できるものとします。

yarn global add parcel-bundler

これで完了。

ライブラリのインストール

以下をインストールします。babelは不要です。typescriptでトランスパイルします。

yarn add react react-dom axios react-hot-loader
yarn add --dev @types/react @types/react-dom core-js typescript

index.tsx

index.jsは拡張子をtsxに変更します。

内容はで以下のように記述します。

import 'react-hot-loader/patch';
import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader'

import App from './App';

ReactDOM.render(<AppContainer><App/></AppContainer>, document.getElementById("root"));

React17対応のpatchがないため、ChromeのDevToolsで警告が出ます。

App.tsx

タイプスクリプトの場合、reactのインポートを以下のように記述します。

React17単体の仕様のように省略することはできませんでした。

import * as React from 'react';
import { ShowMessage } from './component/ShowMessage';

export const App = () => {
    return (
        <>
        <h1>Axiosテスト</h1>
        jsonから受け取ったメッセージを表示する:
        <ShowMessage/>
        </>
    );
}
export default App;

component/ShowMessage.tsx

JSONデータからメッセージを表示します。何が来ても受け取れるようany型にしました。

import * as React from 'react';
import {useState, useEffect} from 'react';
import ReadMessage from '../ReadMessage';

export const ShowMessage = () => {
    const [message, setMessage] = useState("");

    useEffect(() => {
        ReadMessage((data: any) => {
            setMessage(data.message);
        });
    }, []);

    return <p>{message}</p>
};

ReadMessage.ts

axiosを使ってサーバーにあるjsonファイルを読み込みます。Callback関数を使用して読み込みます。

Callback関数の型は以下のように書きます。

import axios from 'axios';

const axiosInstance = axios.create({
    headers: {
        'Context-Type': 'application/json',

    },
    responseType: 'json',
});

export const ReadMessage = (callback: (data: any) => void) => {
    axiosInstance.get('/message.json')
    .then(response => {
        console.log(response.data);

        callback(response.data);
    })
    .catch(error => {
        console.log('ERROR!!');
        console.log(error);
    });
}

export default ReadMessage;

message.json

{
    "status": "200",
    "message": "Hello, React+Typescript!"
}

Parcelの実行

実行コマンドは以下になります。

parcel src/index.html(エントリーポイント)

src/index.htmlは以下のように記述します。

参照するスクリプトをtsxにします。

<!DOCTYPE html>
<html xml:lang="ja" lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>テスト</title>
</head>
<body>
    <div id="root"></div>
    <script src="./index.tsx"></script>
</body>
</html>

デフォルトだとhttp://localhost:1234で実行できます。

ポートを変更したい場合-pオプションで指定します。

parcel src/index.html -p 8080

ビルドしなくてもIE11で動作します。

スマートニュース
Close Bitnami banner
Bitnami