Reactを使えるようになろう！～実際にコードを書いてみよう！～

実際にコードを書いてみよう！

さて、前回書いた通り、実際コードを書いてみることで、
どのようなコードをかけばいいか学んでみましょう。

コンポーネントは以下のように記述します。

特徴として、コンポーネントは、HTMLタグのまとまりを返す関数であると考えてください。
注意点として、関数が返す値となるHTMLタグは必ず一つのまとまりでなければならないことに注意です

ヘッダー

export default function Header(){
	return (
		<header>
			<nav>
				<ul>
					<li>title</li>
				</ul>
			</nav>
		</header>
	)
}

フッター

export default function Footer(){
	return (
		<footer>
			<ul>
				<li>
					Created [自分の名前] {new Date(),getYear()}
				</li>
			</ul>
		</footer>
	)
}

カード部分

export default function Card({img,title}:{img: string,title: string}){
	return (
		<article>
			<img src={img} />
			<h3>{title}</h3>
		</article>

ここまでかけたら、次はページ部分を構成していきます。

ページ部分

ページ部分は、これまで作成したコンポーネントを組み合わせて構成します。

その際に、複数のコンポーネントを一つの塊で扱わないといけません。
そのため、特殊なタグを使わなければなりません。それが

<></>

です。これを使って複数のコンポーネントを一つの塊として扱えるようにします。

export default function Page(){
	const [cards,setCards] = useState<>([])
	return (
		<>
			<Header />
			<main>
				{cards,map((data,idx) => <Card 
					key={idx} 
					title={data.title} 
					img={data.img}
				/>)}
			</main>
			<Footer />
		</>
	)
}

これで、前回説明したコンポーネントの簡単なコーディングを理解できたでしょうか？

ところで、useState()や、{}で囲まれたものがHTMLタグに囲まれている値がありましたね
これが何かということは、次回お話します。

次回予告

次は、状態を管理する関数、Hooksと呼称される関数群について説明したいと思います。

このHooksがしっかり使えることこそ、Reactをうまく扱うことの必要条件となってきます。