React Hooks + TypeScriptによるFunction componentの基礎学習

2022年1月31日 23:08

はじめに

React Hooks では、class component を使用せず、function componentを使用するのでその理解を深める為の私の基礎学習備忘録です。
開発環境はdocker-composeでReactとTypeScriptの環境を準備してエディタはvscodeを使用しました。
最終的にDjango REST Frameworkの開発につなげていきます。

開発環境の構築方法は以下のページで簡単に解説しています。

・DockerでReactとTypeScriptの開発環境構築の仕方

学習に使用している教材

以下の教材を参考にしています。

・[基礎編]React Hooks + Django REST Framework API でフルスタックWeb開発
・最速で学ぶTypeScript
・【世界で7万人が受講】Understanding TypeScript 日本語版

ゴール

localhost:3000に接続したら、Reactロゴの下に「Hello World1 Hello World2」と以下のページを表示できれば成功です。

スクリーンショット 2022-01-31 19.02.41

学習手順

⒈プロジェクトの作成
⒉ プロジェクトフォルダの構造
⒊ function componet の作成
⒋ ローカルホストに接続して確認

⒈ プロジェクトの作成

DockerでReactとTypeScriptの開発環境構築の仕方　の中で構築した開発環境とプロジェクトを使用します。
上記の章で「react-ts-app」というプロジェクトを作成しました。

⒉ プロジェクトフォルダの構造

どのようなルーティングでブラウザにイメージやテキストが反映されているか構造を理解する。

# react-ts-app　のフォルダ内

.
├── README.md
├── node_modules
├── package-lock.json
├── package.json
├── public    <-- 中に入る
├── src    
└── tsconfig.json

publicの中に入るとindex.htmlがある

# public　フォルダ内

.
├── favicon.ico
├── index.html    <-- ファイルを開く
├── logo192.png
├── logo512.png
├── manifest.json
└── robots.txt

index.html の内容は以下、その中の下部にある<div id="root"></div>の部分がブラウザに写し出されている。

# index.html 

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="utf-8" />
   <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#000000" />
   <meta
     name="description"
     content="Web site created using create-react-app"
   />
   <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
   <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
   <title>React Basic</title>
 </head>
 <body>
   <noscript>You need to enable JavaScript to run this app.</noscript>
   <div id="root"></div>    //<-- この部分が反映されている
 </body>
</html>

カレントディレクトリに戻って、srcフォルダ内に入るとindex.tsx がある、ファイルを開くと以下のようになっている下部に document.getElementById('root') があり、root の部分がindex.htmlの root と紐づいている。
さらに、<App /> の部分は同じsrc ディレクトのApp.tsx と繋がっている。

# index.tsx

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

ReactDOM.render(
 <React.StrictMode>
   <App />    //<-- ココがApp.tsxと繋がっている
 </React.StrictMode>,
 document.getElementById('root')    //<-- ココがindex.htmlと繋がっている
);
reportWebVitals();

App.tsxの　<p>Edit <code>src/App.tsx</code> and save to reload. </p>　のテキストがロゴの以下に表示されているのが確認できる。

# App.tsx

import React from 'react';
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" />
       <p>
         Edit <code>src/App.tsx</code> and save to reload.    //<--　ココの部分が表示されている
       </p>
       
     </header>
   </div>
 );
}

export default App;

スクリーンショット 2022-01-30 22.06.18

⒊ function component の作成

srcフォルダの中に componets フォルダを作成

# src フォルダ内

.
├── App.css
├── App.test.tsx
├── App.tsx
├── components   <-- 作成したフォルダ
├── index.css
├── index.tsx
├── logo.svg
├── react-app-env.d.ts
├── reportWebVitals.ts
└── setupTests.ts

componentsフォルダ内に Hello1.tsx ファイルを作成

# components フォルダ内

.
└── Hello1.tsx    <--作成したファイル

Hello1.tsx ファイルに function component を記述する
React Hooks を使用するのに基本となる関数である。

# Hello1.tsx

import React from 'react';

const Hello1 = () => {
 return <div>
           <h1>Hello World1</h1>
           <h1>Hello World2</h1>
        </div>;
};

export default Hello1;

App.tsx ファイルを以下のように改変

# App.tsx

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Hello1 from './components/Hello1';    //<--　追加記述した

function App() {
 return (
   <div className="App">
     <header className="App-header">
       <img src={logo} className="App-logo" alt="logo" />
       <Hello1/>    //<-- 追加記述した
       
     </header>
   </div>
 );
}

export default App;

⒋ ローカルホストに接続して確認

私はDocker内で構築しているので docker-compose up -d でコンテナを立ち上げて localhost:3000 に接続すると以下のように表示される。