React公式ページで学んでみた①（備忘録）

# はじめに
初めまして！
エンジニアになって数年、今まで本を読むだけでしたが、もっとプライベートで楽しみながら成長したい！自分が学んだ足跡を残していきたい！と思い記事を書きました！
最終的には自在に開発できるようになりたいと思っています。:triumph:
いろいろな記事を参考にさせてもらっています。:bow_tone2:
その中でもこれってどういう意味？とかつまづいたところを念入りに書いていこうかと思います。:fist:

# 今回の目的
Reactの勉強したいけど、基礎から叩き込みたいな〜と思いつつ本を読むのも飽きてきていた某のっぽです。
その時、体にコード巻きつけるくらいできるエンジニアが本読まなくても公式ドキュメント見れば大体いけますよってこと言っていたので、実際にやってみた内容を備忘録でまとめていきます！
今回はクイックスタートを見ていきます！

# 使用したものや事前準備
・Macbook Pro
・Visual Studio Code

# 主に参考にさせていただいた記事

https://ja.react.dev/learn

# コンポーネント宣言
・コンポーネントは、マークアップ（HTML)を返すJavaScript関数。UIの部品を表す再利用可能なコード。
・①アロー関数（関数式）、②関数宣言でコンポーネントを作成する。

```React
// ①アロー関数（関数式）
const コンポーネント名 = () => {}
// ②関数宣言
function コンポーネント名() {} 
```
・頭文字が大文字でコンポーネント、小文字でJavaScriptとして判別される。
※一部例外でカスタムフック名内でもuseStateが使えます（useCompとか)
```React
// 頭大文字
const Component = () => {
// タグとして扱える。内部でuseStateとか使える。
}
// 頭小文字
const javascript = () => {
// 関数や値として活用できる。
}
```
# 外部ファイルから使用したい時
・export
　外部ファイルから使用を可能にする。
・default
　このファイルのメイン関数であることを宣言する。
```React
// defaultの書き方
export default function Test{
    return <div></div>
}
// constの場合は、別行で宣言
const Test{
    return <div></div>
}
export default Test;
// constでdefaultがいらない場合
export const Test{
    return <div></div>
}
```
# コンポーネントをタグとして使用する
・コンポーネントの場合、マークアップのReturn内ではタグとして使用できる。
```React
const Component = () => {}

export const App = () => {
    return (
        <Component />
    );
};
```
・Return内のタグはタグひとつで囲む必要がある。
```React
return (
    //二つはNG
    <Component />
    <Component />
);
```
```React
return (
    //空タグで一つにまとめる
    <>
        <Component />
        <Component />
    </>
);
```
## JavaScriptも一緒に書くとき
・return内でも{}を使えばJavaScriptの記述は可能
```React
function testAlert() {
    alert('関数');
}
return (
    <>
        <Component />
        <Component />
        {/*下記の書き方だとonClickなどイベントに書いててもレンダリング完了後に即時実行される*/}
        {alert('直接')}
        {testAlert()}
    </>
);
```

# Propsを渡す
propsに値、state、関数を渡すことができる。
{}内で、関数（）と記述すると即時実行になるのでアロー関数を利用することで防ぐ。
イベントを処理するハンドラ関数は、「handle~」で命名する
onClickなどイベントを表すものは、「on~」で命名する
```React
import { useState } from 'react';
function Square({ value, onAlertClick, onAllowClick }) {
  return <button className="square" onClick={onAlertClick ? () => onAlertClick("click") : onAllowClick}>{value}</button>;
}
export default function Board() {
  const [value,setValue] = useState("1");
  //イベントを処理するハンドラ関数は、handle~で命名する
  function handleClick(text){
      return alert(text);
  }
  return (
    <>
      <div className="board-row">
        {/*stateと関数が渡される。*/}
        <Square value={value} onAlertClick={handleClick} />
        {/*value222は存在しないため値が渡されない*/}
        <Square value222="2" /> 
        {/*アロー関数で引数をつけて渡す*/}
        <Square value="3" onAllowClick={() => alert("allow")}/>
      </div>
    </>
  );
}
```

# コンポーネント内のState
同一のコンポーネントを使用していても内部のstateは独立して管理される。

![スクリーンショット 2024-03-09 16.47.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/943982/5934920f-ab74-ee9a-94c4-31612988ee6c.png)

 ![スクリーンショット 2024-03-09 16.48.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/943982/298f444f-c0e6-c1fd-6776-dd7f9f67ddf6.png)

# リフトアップ（State Lifting）
複数の子コンポーネント間で共有される状態（state）を管理するための一般的なパターン


# 最後に
綺麗にまとめられないのが悩み:thinking:

# 次

https://qiita.com/mr_noppo/items/804a2489287ac4848ff4