React Hooks + TypeScriptによるFunction componentの基礎学習
はじめに
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」と以下のページを表示できれば成功です。
学習手順
⒈プロジェクトの作成
⒉ プロジェクトフォルダの構造
⒊ function componet の作成
⒋ ローカルホストに接続して確認
⒈ プロジェクトの作成
DockerでReactとTypeScriptの開発環境構築の仕方 の中で構築した開発環境とプロジェクトを使用します。
上記の章で「react-ts-app」というプロジェクトを作成しました。
⒉ プロジェクトフォルダの構造
どのようなルーティングでブラウザにイメージやテキストが反映されているか構造を理解する。
# react-ts-app のフォルダ内
.
├── README.md
├── node_modules
├── package-lock.json
├── package.json
├── public <-- 中に入る
├── src
└── tsconfig.jsonpublicの中に入るとindex.htmlがある
# public フォルダ内
.
├── favicon.ico
├── index.html <-- ファイルを開く
├── logo192.png
├── logo512.png
├── manifest.json
└── robots.txtindex.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;
⒊ 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.tscomponentsフォルダ内に 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 に接続すると以下のように表示される。
まとめ
基礎の基礎だが、function component がどんなものかは理解できたと思います。
次回はProps について学習します。
以上！
この記事が気に入ったらサポートをしてみませんか？