2026年7月5日 (日) 14:08時点における版

Quick Start

Welcome to the React documentation! This page will give you an introduction to 80% of the React concepts that you will use on a daily basis.

@@ 1行目: / 1行目: @@
-[[ファイル:react-logo.png|thumb|React|300px]]
+= Quick Start =
+Welcome to the React documentation! This page will give you an introduction to 80% of the React concepts that you will use on a daily basis.
-とにかく 公式Learn を読む。英語だと分かりやすくて説明が上手。
+=== You will learn ===
-* [https://react.dev/learn Quick Start]
-==Pick UP==
+* How to create and nest components
-? operator など、Conditional rendering を使う。<syntaxhighlight lang="jsx" line="1">// if statement
+* How to add markup and styles
-let content;
+* How to display data
-if (isLoggedIn) {
+* How to render conditions and lists
-  content = <AdminPanel />;
+* How to respond to events and update the screen
-} else {
+* How to share data between components
-  content = <LoginForm />;
-}
-return (
-  <div>
-    {content}
-  </div>
-);
-// ? operator
-<div>
-  {isLoggedIn ? (
-    <AdminPanel />
-  ) : (
-    <LoginForm />
-  )}
-</div></syntaxhighlight>When you don’t need the <code>else</code> branch, you can also use a shorter <u>logical <code>&&</code> syntax</u>:<syntaxhighlight lang="jsx" line="1">
-<div>
-  {isLoggedIn && <AdminPanel />}
-</div>
-</syntaxhighlight>
-==Next.js==
-[[Next.js]] を参照。