React コンポーネント

コンポーネントの作り方

Reactにおける，コンポーネントの記述方法は，関数を利用する関数コンポーネントとクラスを使用するクラスコンポーネントの２つがある．

関数コンポーネント

function FunctionComponent() {
	return (
		<div>
			<h1> Hello, World! </h1>
		</div>
	);
}

export default FunctionComponent;

const FunctionComponent = () => {
	return (
		<div>
			<h1> Hello, World! </h1>
		</div>
	);
}

export default FunctionComponent;

このように関数コンポーネントは，関数を利用して定義を行う．関数の定義方法として，通常の関数とアロー関数があるため，関数コンポーネントの定義に両方とも利用することができる．

クラスコンポーネント

class ClassComponent extends React.Component {
	render(){
		return(
			<div>
				<h1> Hello, World! </h1>
			</div>
		);
	}
}

クラスコンポーネントを定義する場合は，React.Conponentを継承するクラスで定義を行う．
renderメソッドはReactのクラスコンポーネントで定義される特別なメソッドで必ず実装する必要がある．コンポーネントの描画が行われる際に呼び出され，JSXを返す役割を持つ．

親コンポーネントと子コンポーネント

Reactではコンポーネントの中で別のコンポーネントを使うため，重要な概念として親コンポーネントと子コンポーネントという関係がある．

親コンポーネント：使う側

const ParentComponent() {
	return(
		<div>
			<ChildComponent />
		</div>
	)
}

使われる側：子コンポーネント

const ChildComponent() {
	return(
		<div>
			<p>Hello React!!</p>
		</div>
	)
}

このように，親コンポーネントとなるParentComponentが子コンポーネントであるChildComponentを使用する．

親コンポーネントから子コンポーネントへのデータの受け渡しはpropsというオブジェクトを利用する．propsについては別にまとめた．

コンポーネントを書く際の注意点

コンポーネントを記述していく上で，注意しなければいけないことがいくつかある．

１．タグ名の頭文字

//間違った書き方
const myComponent = () => {
	// ...
}

//正しい書き方
const MyComponent = () => {
	// ...
}

Reactでは，コンポーネントのタグ名は大文字で始める必要がある．小文字で始まるタグはHTMLの組み込む要素として認識される．コンポーネントは独自に作成されたものであることを示すために，大文字で始める必要がある．

２．クラス属性はclassではなく，className

//HTML
<div class="my-class">Content</div>

//React
<div className="my-class">Content</div>

タグにクラス属性を指定する場合は，classではなくclassNameを利用する．これは，JavaScriptのclassと違いをつけるためにclassName属性を使用する．

３．returnは１つの要素だけ

// エラー
return(
	<p>１つ目</p>
	<p>２つ目</p>
)
//正解パターン１
return(
	<div>
		<p>１つ目</p>
		<p>２つ目</p>
	</div>
)
//正解パターン2
return(
	<React.Fragment>
		<p>１つ目</p>
		<p>２つ目</p>
	</React.Fragment>
)
//正解パターン3
return(
	<>
		<p>１つ目</p>
		<p>２つ目</p>
	</>
)

returnで返すものは１つだけなので，複数の要素を返すとエラーが起きてしまう．
<div>タグで１つにまとめるか，<React.Fragment>で囲むことで，１つの要素として返すことができる．また，<React.Fragment>は省略可能で，<> </>でも良い．