Reactクイックスタートメモ

#Reactチュートリアル

https://ja.react.dev/learn

コンポーネントとは：それ独自のロジックと外観をもつUI(ユーザーインターフェース)の**一部**。ボタンくらい小さかったり、ページ全体くらい大きかったりする。

React のコンポーネントは常に大文字始まりのルール。大文字であることでReactコンポーネントであることがわかる

code:.js

// ボタンのコンポーネント

function MyButton() {

return (

提出

</button>

);

}

export default function MyApp() {

return (

<div>

<h1>Welcome to my app</h1>

<MyButton /> // ここで使う

</div>

);

}

export defaultとは：ファイル内の主要コンポーネントを指定している

ほとんどのReactプロジェクトはJSXという構文を使って書いてる。↑のコードもそう。JSXはHTMLより厳格なのでなのでちゃんとタグを閉じないといけない。

コンポーネントは複数のJSXタグを返せない。代わりに、共通の親要素で包む必要あり。

CSS

CSSクラスは classNameで指定する

ReactではCSSファイルの追加方法は決められてない。

## データの表示

こんな感じでかける

code:.js

return (

<h1>

{user.name}

</h1>

);

もっと複雑だとこう

code:.js

// 変数定義

const user = {

name: 'Hedy Lamarr',

imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',

imageSize: 90,

};

// 主要component

export default function Profile() {

return (

<img

className="avatar"

src={user.imageUrl}

alt={'Photo of ' + user.name}

style={{

width: user.imageSize,

height: user.imageSize

}}

</>

);

}

https://gyazo.com/4ba09cdeb2a46f877b9c536bd60e12e4

✅ ifを使った条件付きのレンダリング

条件式書きたかったらふつうにJSのifで書く

code:.js

let content;

if (isLoggedIn) {

content = <AdminPanel />; //AdminPanelコンポーネントを返す

} else {

content = <LoginForm />; //LoginFormコンポーネントを返す

}

return (

<div>

{content} // ここが条件の結果によって変わる

</div>

);

↓ もっとコンパクトにかける

code:.js

<div>

{isLoggedIn ? (

) : (

)}

</div>

わざわざ変数作らんでもこれでいける

&&を使った書き方

code:js

<div>

{isLoggedIn && <AdminPanel />} // 左辺も右辺もtrueだったら <AdminPanel /> が返る

</div>

参考：&&の仕様

慣れてなければ if と else使うとこから始めよう

リストのレンダー

code:.js

const products = [

{ title: 'Cabbage', isFruit: false, id: 1 },

{ title: 'Garlic', isFruit: false, id: 2 },

{ title: 'Apple', isFruit: true, id: 3 },

];

export default function ShoppingList() {

const listItems = products.map(product =>

<li

key={product.id}

style={{

color: product.isFruit ? 'pink' : 'darkgreen'

}}

{product.title}

</li>

);

return (

<ul>{listItems}</ul>

);

}

どういうHTML出力してるか見たかったので検証ツールでみた

code:.html

<li style="color: darkgreen;">Cabbage</li>

<li style="color: darkgreen;">Garlic</li>

<li style="color: pink;">Apple</li>

イベントに応答する

コンポーネント内でイベント・ハンドラ関数を宣言することで、イベントに応答できる

code:.js

function MyButton() {

// handleClickという名前の関数定義

function handleClick() {

// ダイアログ表示

alert('You clicked me!');

}

return (

<button onClick={handleClick}> //ボタンがクリックされたらhandleClick関数が呼び出される

Click me // ボタンのテキスト

</button>

);

}

画面の更新

コンポーネントに何らかの情報を「記憶」させ、それを表示させたいことがよくある。例えば、ボタンがクリックされた回数を数えたいとします。そのためには、コンポーネントにステートを追加する。

まず、React.StateからuseStateをインポートする

reactの機能っぽい

code:.js

import { useState } from 'react';

これで、コンポーネント内部でステート変数を宣言できる：

code:.js

function MyButton() {

// useStateに0を渡したので、countが0になった

const count, setCount = useState(0);

// ...

useStateで取得できるのは、現在の状態（count）と、それを更新する関数（setCount）の2つ

これらは任意の名前をつけることができるが、慣例として[something, setSomething] と書く

useState()の引数に0を渡したので、ボタンが最初に表示されたとき、countは0になる。状態を変更したいときは、setCount()を呼び出し、新しい値を渡します。このボタンをクリックすると、カウンターが増える

code:.js

function MyButton() {

const count, setCount = useState(0);

function handleClick() {

setCount(count + 1);

}

return (

<button onClick={handleClick}> // クリックしたらhandleClick実行されるので、countが1ずつ増えていく

Clicked {count} times

</button>

);

}

つくった関数を export default で主要コンポーネントから呼び出す

code:.js

import { useState } from 'react';

export default function MyApp() {

return (

<div>

<h1>カウンター</h1>

<MyButton /> // 同じコンポーネントを2個呼び出すと、それぞれが独自の状態を取得する(片方クリックしてももう片方は+1されない)

</div>

);

}

function MyButton() {

const count, setCount = useState(0); //countを0に設定

function handleClick() {

setCount(count + 1);

}

return (

Clicked {count} times

</button>

);

}

https://gyazo.com/8322c61513946b8a0ae6ab5c2578b2bd

→ 各ボタンは自身のカウント状態を「記憶」し、他のボタンに影響を与えない。

Hookの使用

useで始まる関数はHookという。

useStateはReactが提供する組み込みHook。

他の組み込みHookはAPIリファレンスで見れる。既存のHookを組み合わせて独自のHookを書くこともできる。

Hookは他の関数よりも制約が多い。Hookを呼び出せるのは、コンポーネント（または他のHook）の先頭だけ。useStateを条件やループの中で使いたい場合は、新しいコンポーネントを作成してそこに置いてください。

Hooksとは

クラスを使用せずに Reactを書くことができる機能

例えば、関数コンポーネントにstateを持たせたり、ライフサイクルに応じた処理を実装したりできます。また、フックを利用すると、1つのコンポーネントを複数の関数に分割することも可能です。

従来よりも簡潔で読みやすいコードが書ける

コンポーネント間でデータをshareする

さっきのカウンターはクリックしたボタンの数しか変わらなかった→データを共有するにはこう書く

code:.js

import { useState } from 'react';

export default function MyApp() {

// countとhandleClock関数を親で定義しておく

const count, setCount = useState(0);

function handleClick() {

setCount(count + 1);

}

return (

<div>

<h1>Counters that update together</h1>

// ここで子コンポーネントMybuttonを呼び出してる

<MyButton count={count} onClick={handleClick} /> //const~で定義したcountとonClickを渡してる

</div>

);

}

// MyButtonコンポーネントは、2つのprops(countとonClick)を受け取る

function MyButton({ count, onClick }) {

return (

<button onClick={onClick}> //MyApp()でonClickに渡されたhandleClickが渡されて実行される

Clicked {count} times

</button>

);

}

完成系だと流れがわからんのでGPTに解説してもらった

useStateフックを使う

code:.js

const count, setCount = useState(0);

handleClick関数の定義

code:.js

function handleClick() {

setCount(count + 1);

}

MyApp主要コンポーネントの定義

この中で、2つのMyButtonコンポーネントをレンダリングする

code:.js

export default function MyApp() {

// ...

}

MyButtonコンポーネントの定義:

↓と書くことで、propsとしてcount（現在のカウント）とonClick（クリックイベントハンドラー）を受けとる

code:.js

function MyButton({ count, onClick }) {

// ...

}

MyAppからMyButtonコンポーネントの呼び出し

MyButtonにcountとonClickをpropsとして渡す

code:.js

ちゃんと同じ値になってる

https://gyazo.com/ada0169114d0783d3b40e07ef36e189b