「React」の版間の差分

2026年6月24日 (水) 03:40時点における版

React

Quick Start

Pick UP

? operator など、Conditional rendering を使う。<syntaxhighlight lang="jsx" line="1">// if statement let content; if (isLoggedIn) {

 content = <AdminPanel />;

} else {

 content = <LoginForm />;

} return (

   {content}

);

// ? operator

 {isLoggedIn ? (
   <AdminPanel />
 ) : (
   <LoginForm />
 )}

</syntaxhighlight>When you don’t need the else branch, you can also use a shorter logical && syntax:<syntaxhighlight lang="jsx" line="1">

 {isLoggedIn && <AdminPanel />}

</syntaxhighlight>

Next.js

Next.js を参照。

@@ 1行目: / 1行目: @@
-= Quick Start =
+[[ファイル:react-logo.png|thumb|React|300px]]
-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.
-=== You will learn ===
+* [https://react.dev/learn Quick Start]
-* How to create and nest components
+==Pick UP==
-* How to add markup and styles
+? operator など、Conditional rendering を使う。<syntaxhighlight lang="jsx" line="1">// if statement
-* How to display data
+let content;
-* How to render conditions and lists
+if (isLoggedIn) {
-* How to respond to events and update the screen
+  content = <AdminPanel />;
-* How to share data between components
+} else {
+  content = <LoginForm />;
+}
+return (
+  <div>
+    {content}
+  </div>
+);
-== Creating and nesting components ==
+// ? operator
-React apps are made out of ''components''. A component is a piece of the UI (user interface) that has its own logic and appearance. A component can be as small as a button, or as large as an entire page.
+<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>
-React components are JavaScript functions that return markup:
+==Next.js==
+[[Next.js]] を参照。
-Now that you’ve declared <code>MyButton</code>, you can nest it into another component:
-Notice that <code><MyButton /></code> starts with a capital letter. That’s how you know it’s a React component. React component names must always start with a capital letter, while HTML tags must be lowercase.