|
|
| 1行目: |
1行目: |
| [[ファイル:react-logo.png|thumb|React|300px]] | | [[ファイル:react-logo.png|thumb|React|300px]] |
|
| |
| * [https://react.dev/learn Quick Start]
| |
|
| |
| ==Pick UP==
| |
| ? operator など、Conditional rendering を使う。<syntaxhighlight lang="jsx" line="1">// if statement
| |
| let content;
| |
| if (isLoggedIn) {
| |
| content = <AdminPanel />;
| |
| } else {
| |
| 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]] を参照。
| |
