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

2022年2月2日 23:54

はじめに

React HooksとTypeScriptによるPropsの使い方を簡単に学習しました。
前回の function component の続きになります。
使用するプロジェクトは前回と同じものを使用するので詳細な解説は本章ではしてません。
確認する場合は以下のReact Hooks + TypeScriptによるFunction componentの基礎学習で解説しています。

function component の学習内容は以下のページで解説しています。

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

学習に使用した教材・参考サイト

学習に使用、参考にしたサイトです。

・[基礎編]React Hooks + Django REST Framework API でフルスタックWeb
・【初心者】React × TypeScript 基本の型定義

ゴール

以下のページをlocalhost:3000で表示できればゴールです。

学習手順

⒈ Propsを使用する時とは
⒉ Propsの作成
⒊ローカルホストに接続して確認

⒈ Propsを使用する時とは

例えば以下の画像の Hello World1 Hello World2 と表示されているテキストを別のテキストに動的に変化させたい場合に使用できるかと思います。
上記のゴールで表示する画像です。
Hello Today と Hello everyone と表示されています。

プロジェクト構造

# react-ts-app フォルダ


react-ts-app
├── README.md
├── node_modules
├── package-lock.json
├── package.json
├── public
├── src        <-- ココの中
└── tsconfig.json

src
├── App.css
├── App.test.tsx
├── App.tsx           <-- 本章で使用
├── components
│   └── Hello1.tsx    <-- 本章で使用
├── index.css
├── index.tsx
├── logo.svg
├── react-app-env.d.ts
├── reportWebVitals.ts
└── setupTests.ts

画像のテキストはApp.tsx から Hello1.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;

以下のコードはfunction component を利用して上記の画像を描写しています。

# Hello1.tsx


// Propsを使用する前

import React from 'react';


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

export default Hello1;

⒉ Propsの使用方法

Propsを使用しているのが以下のコードです。
typeで変数textに対して文字列stringを定義しています。TypeScriptだけに、、、
Propsの書き方もReact.FCを使用した書き方などもあるようですが、本章は基礎なのでシンプルでわかりやすいものをとりあえずです。

# Hello.tsx


// Propsを使用した場合

import React from 'react';

// 型を定義する
type Props = {        
 text: string
}

// Propsを使用
const Hello1 = (props:Props) => {
 return <div>
           <h1>Hello {props.text} </h1>
           <h1>Hello World2</h1>
        </div>;
};

export default Hello1;

App.tsx にも変更を加えます。
Hello.tsx に <Hello1 text="Today" />と<Hello1 text="everyone" /> を動的に返します。

# 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 text="Today" />    // <-- 動的にテキストを変化させる為にtextにTodayとeveryoneを渡している
       <Hello1 text="everyone" />　　　// <--  追記
     </header>
   </div>
 );
}

export default App;

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

localhost:3000 に接続して以下の画像が表示されればゴールです。

おわりに

Propsの基礎的な使用方法でした。
次回はイベントハンドラーを学習します。