クイックスタート – React

Reactのアプリケーションはコンポーネントで構成されている

コンポーネントは独自のロジックと外見を持つUIの部分のこと

ボタンのような小さいものからページ全体の大きなものまで規模は様々

function MyButton() {
	return (
		<button>I'm a button</button>
	);
}

関数を定義すれば、他のコンポーネントにネストすることができる

export default function MyApp() {
	return (
		<div>
			<h1>Welcome to my app</h1>
			<MyButton />
		</div>
	);
}

これらのコードはJSXという構文で構成されており、ほとんどのReactプロジェクトではJSXが使用されている

JSXはHTMLより構文が厳格で、タグは/で閉じる必要があり、コンポーネントは複数のJSXタグを返してはいけないなどのルールがある（どうしても複数のタグで返したい場合は、<>...</>を使うと良い）

HTMLクラスを追加

ReactでHTMLのクラスを追加する場合はclassNameを使う。これがHTMLのclassと同じ動作をする

<img className="avatar" />

データを表示する

波括弧を使うことで、JavaScriptの変数を埋め込むことができる

return (
	<h1>
		{user.name}
	</h1>
);

属性としてデータを渡したい場合は、こうする

return (
  <img
	  className="avatar"
	  src={user.imageUrl}
  />
);

分岐

JavaScriptの構文を使って分岐をすることができる

let content;
if (isLoggedIn) {
	content = <AdminPanel />;
} else {
	content = <LoginForm />;
}
return (
	<div>
		{content}
	</div>
);