React - Quick Start - 版の履歴

Yoo: /* あなたが学ぶこと */

2026-07-07T14:05:52Z

あなたが学ぶこと

← 古い版		2026年7月7日 (火) 14:05時点における版
3行目:		3行目:
	ようこそ React の説明書へ！このページはあなたが React を使う時の日常的な考え方の８０％ほどを紹介します。		ようこそ React の説明書へ！このページはあなたが React を使う時の日常的な考え方の８０％ほどを紹介します。

	~~=== あなたが学ぶこと ===~~		あなたが学ぶこと。

	* どうやって ''コンポーネント'' 達を作ったり、囲ったりするのか		* どうやって ''コンポーネント'' 達を作ったり、囲ったりするのか
	* どうやって ''マークアップ'' やスタイルを適応させるのか		* どうやって ''マークアップ'' やスタイルを適応させるのか

Yoo: /* JSX を使ってマークアップを書こう */

2026-07-07T14:01:42Z

JSX を使ってマークアップを書こう

← 古い版		2026年7月7日 (火) 14:01時点における版
42行目:		42行目:

	== JSX を使ってマークアップを書こう ==		== JSX を使ってマークアップを書こう ==
	上の例であなたが見たマークアップの書き方は「JSX」と呼ばれます。JSX ~~はオプション的な機能ですが、便利なのでほとんどの~~ Reactプロジェクトで利用されます。私たちがオススメする全ての[https://react.dev/learn/installation 開発ツール]で JSX はサポートされています。		上の例であなたが見たマークアップの書き方は「JSX」と呼ばれます。JSX を利用するかどうかは自由ですが、便利なのでほとんどの Reactプロジェクトで利用されます。私たちがオススメする全ての[https://react.dev/learn/installation 開発ツール]で JSX はサポートされています。

	JSX は HTML より厳格です。あなたはきちんと <code><nowiki><br /></nowiki></code> のようにタグを閉じる必要があります。しかも、あなたが作るコンポーネントは複数の JSXタグを同時に生成できません。複数の JSXタグがある場合は、それらを共通の親タグ、<code><nowiki><div>...</div></nowiki></code> や、空文字の <code><>...</></code> で包んであげる必要があります。<syntaxhighlight lang="react" line="1">		JSX は HTML より厳格です。あなたはきちんと <code><nowiki><br /></nowiki></code> のようにタグを閉じる必要があります。しかも、あなたが作るコンポーネントは複数の JSXタグを同時に生成できません。複数の JSXタグがある場合は、それらを共通の親タグ、<code><nowiki><div>...</div></nowiki></code> や、空文字の <code><>...</></code> で包んであげる必要があります。<syntaxhighlight lang="react" line="1">

2026年7月7日 (火) 13:51にYooによる

2026-07-07T13:51:49Z

← 古い版		2026年7月7日 (火) 13:51時点における版
39行目:		39行目:
	></iframe>		></iframe>

	上記のように <code>export default</code> と書くことによって、ファイルのメインとなるコンポーネントを決めることができます。もしあなたが JavaScript の書き方に慣れてないなら、[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export MDN] と [https://javascript.info/import-export javascript.info] ~~は最高の情報源になります。~~		上記のように <code>export default</code> と書くことによって、ファイルのメインとなるコンポーネントを決めることができます。もしあなたが JavaScript の書き方に慣れてないなら、[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export MDN] と [https://javascript.info/import-export javascript.info] は最高の情報源ですので参照して下さい。

	== JSX を使ってマークアップを書こう ==		== JSX を使ってマークアップを書こう ==

Yoo: /* スタイルを適応する */

2026-07-07T13:49:22Z

スタイルを適応する

← 古い版		2026年7月7日 (火) 13:49時点における版
63行目:		63行目:
	border-radius: 50%;		border-radius: 50%;
	}		}
	</syntaxhighlight>React はあなたに ~~CSSファイルの追加方法を特に指定していません。もっとも簡単なのは自分の~~ HTML に [https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/link <link>] で組み込む方法でしょう。制作ツールやフレームワークを使っている場合は、それらの説明書を読んで CSSファイルを自分のプロジェクトに追加する方法を確認して下さい。		</syntaxhighlight>React はあなたに CSSファイルの追加方法を特に指定していません。恐らく、もっとも簡単なのは自分の HTML に [https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/link <link>] で組み込む方法でしょう。制作ツールやフレームワークを使っている場合は、それらの説明書を読んで CSSファイルを自分のプロジェクトに追加する方法を確認して下さい。

	== Displaying data ==		== Displaying data ==
	JSX lets you put markup into JavaScript. Curly braces let you “escape back” into JavaScript so that you can embed some variable from your code and display it to the user. For example, this will display <code>user.name</code>:		JSX lets you put markup into JavaScript. Curly braces let you “escape back” into JavaScript so that you can embed some variable from your code and display it to the user. For example, this will display <code>user.name</code>:

Yoo: /* スタイルを適応する */

2026-07-07T13:48:47Z

スタイルを適応する

← 古い版		2026年7月7日 (火) 13:48時点における版
58行目:		58行目:
	React では CSS クラスを指定する時は <code>className</code> を使います。これは HTML の <code>class</code> 属性と同じように機能します。<syntaxhighlight lang="react" line="1">		React では CSS クラスを指定する時は <code>className</code> を使います。これは HTML の <code>class</code> 属性と同じように機能します。<syntaxhighlight lang="react" line="1">
	<img className="avatar" />		<img className="avatar" />
	</syntaxhighlight>~~それから、適応させたい CSSルールを別の CSSファイルに書きます。~~<syntaxhighlight lang="react" line="1">		</syntaxhighlight>適応させたい CSSルールは別の CSSファイルに書いて下さい。<syntaxhighlight lang="react" line="1">
	/* In your CSS */		/* In your CSS */
	.avatar {		.avatar {

Yoo: /* JSX を使ってマークアップを書こう */

2026-07-07T13:47:58Z

JSX を使ってマークアップを書こう

← 古い版		2026年7月7日 (火) 13:47時点における版
44行目:		44行目:
	上の例であなたが見たマークアップの書き方は「JSX」と呼ばれます。JSX はオプション的な機能ですが、便利なのでほとんどの Reactプロジェクトで利用されます。私たちがオススメする全ての[https://react.dev/learn/installation 開発ツール]で JSX はサポートされています。		上の例であなたが見たマークアップの書き方は「JSX」と呼ばれます。JSX はオプション的な機能ですが、便利なのでほとんどの Reactプロジェクトで利用されます。私たちがオススメする全ての[https://react.dev/learn/installation 開発ツール]で JSX はサポートされています。

	JSX は HTML より厳格です。あなたはきちんと <code><nowiki><br /></nowiki></code> のようにタグを閉じる必要があります。しかも、あなたが作るコンポーネントは複数の ~~JSXタグを生成できません。複数の~~ JSXタグがある場合は、それらを共通の親タグ、<code><nowiki><div>...</div></nowiki></code> や、空文字の <code><>...</></code> で包んであげる必要があります。<syntaxhighlight lang="react" line="1">		JSX は HTML より厳格です。あなたはきちんと <code><nowiki><br /></nowiki></code> のようにタグを閉じる必要があります。しかも、あなたが作るコンポーネントは複数の JSXタグを同時に生成できません。複数の JSXタグがある場合は、それらを共通の親タグ、<code><nowiki><div>...</div></nowiki></code> や、空文字の <code><>...</></code> で包んであげる必要があります。<syntaxhighlight lang="react" line="1">
	function AboutPage() {		function AboutPage() {
	return (		return (

Yoo: /* コンポーネント達を作ったり、囲ったりする */

2026-07-07T13:46:52Z

コンポーネント達を作ったり、囲ったりする

← 古い版		2026年7月7日 (火) 13:46時点における版
39行目:		39行目:
	></iframe>		></iframe>

	上記 <code>export default</code> と書くことによって、ファイルのメインとなるコンポーネントを決めることができます。もしあなたが JavaScript の書き方に慣れてないなら、[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export MDN] と [https://javascript.info/import-export javascript.info] は最高の情報源になります。		上記のように <code>export default</code> と書くことによって、ファイルのメインとなるコンポーネントを決めることができます。もしあなたが JavaScript の書き方に慣れてないなら、[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export MDN] と [https://javascript.info/import-export javascript.info] は最高の情報源になります。

	== JSX を使ってマークアップを書こう ==		== JSX を使ってマークアップを書こう ==

Yoo: Yoo (トーク) による版 11692 を取り消し

2026-07-07T13:46:22Z

Yoo (トーク) による版 11692 を取り消し

← 古い版		2026年7月7日 (火) 13:46時点における版
39行目:		39行目:
	></iframe>		></iframe>

	上記 <code>export default</code> ~~と書くことによ~~		上記 <code>export default</code> と書くことによって、ファイルのメインとなるコンポーネントを決めることができます。もしあなたが JavaScript の書き方に慣れてないなら、[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export MDN] と [https://javascript.info/import-export javascript.info] は最高の情報源になります。

	== JSX を使ってマークアップを書こう ==		== JSX を使ってマークアップを書こう ==

Yoo: /* コンポーネント達を作ったり、囲ったりする */

2026-07-07T13:45:04Z

コンポーネント達を作ったり、囲ったりする

← 古い版		2026年7月7日 (火) 13:45時点における版
39行目:		39行目:
	></iframe>		></iframe>

	上記 <code>export default</code> によって、ファイルのメインとなるコンポーネントを決めることができます。もしあなたが JavaScript の書き方に慣れてないなら、[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export MDN] と [https://javascript.info/import-export javascript.info] は最高の情報源になります。		上記 <code>export default</code> と書くことによ

	== JSX を使ってマークアップを書こう ==		== JSX を使ってマークアップを書こう ==

Yoo: /* コンポーネント達を作ったり、囲ったりする */

2026-07-07T13:43:57Z

コンポーネント達を作ったり、囲ったりする

← 古い版		2026年7月7日 (火) 13:43時点における版
28行目:		28行目:
	</div>		</div>
	);		);
	}</syntaxhighlight><code><MyButton /></code> が大文字で始まっていることに気付くでしょうか。これによって、あなたはこれが React のコンポーネントだと知ることができます。React ~~のコンポーネントは必ず大文字で始めるべきです。HTMLタグは全て小文字ですが。~~		}</syntaxhighlight><code><MyButton /></code> が大文字で始まっていることに気付くでしょうか。これによって、あなたはこれが React のコンポーネントだと知ることができます。React のコンポーネントは必ず大文字で始めて下さい。一方で、HTMLタグは全て小文字です。

	さて、結果を見てみましょう。		さて、結果を見てみましょう。