Reactの初期設定について

概要

プロジェクト作成

npx create-react-app@latest react-sample --template typescript
 
cd react-sample
npm run start

プロジェクトを生成したのちに、描画コンポーネントを作成する。

Reactの描画コンポーネントについて

Reactの描画コンポーネントについて

概要

Reactはコンポーネントという、要素の部品を組み合わせてwebページを作成する。

	flowchart TB
	  親コンポーネント--> com1[子コンポーネント] & com2[子コンポーネント] & com3[子コンポーネント]

記述例としては以下の通りである。

const SampleComponents = () => {
	return(
		<div>
			<h1>こんにちは</h1>
		</div>
	);
}

値の受け渡し

親コンポーネントから子コンポーネントに値を渡すときには、propsを使用する。

const Parent = () => {
	return(
		<div>
			<Child title="タイトル"/>
		</div>
	);
}
 
const Child = (props : {title : string}) => {
	const { title } = props;
	
	return(
		<div>
			<h1>{title}</h1>
		</div>
	);
}

propsへ何個も値を渡したい場合は型定義を使用する。

CSS

クラス

クラス設定を行う場合は通常のHTMLのクラスではなく、classNameを使用する。

<div className="card">

スタイルの適用

cssを適用する際にはcssファイルを使用するか、<style>を使用するか、<div>タグ等の中に記述することができる。
その場合は以下のような書き方をする。

<div style={{display: 'flex', textAlign: 'center'}}>

元記事へのリンク