React初学者のUdemy講座受講メモ（Reactとは編）

Reactを勉強してみようと思い立ち、セールで安くなっていたUdemyの講座を受けてきました。
復習のため学んだ内容をまとめて書いていきます。
受講した講座は[こちら](https://www.udemy.com/course/react-complete-guide/ "【2022年最新】React(v18)完全入門ガイド｜Hooks、Next.js、Redux、TypeScript")　個人的にすごくおすすめです！

# Reactとは
UI作成のためのJavaScriptライブラリ
**コンポーネント**という部品を組み合わせることで画面を作る
複雑な画面でも作りやすい！人気！！
スマホアプリ（ReactNative）、デスクトップアプリ（React+Electron）も作れる！

# コンポーネントとは

画面の要素をReactで定義したもの、部品
### 良い点

- **再利用性**：つかいまわせる！
- **可読性**：１コンポーネント１機能なのでコードを追いやすい　すっきり
- **疎結合**：結びつきが強くない、単体テストがしやすい

# **コンポーネントの定義方法**

JSの関数として定義する、帰り値はJSX（HTMLみたいなやつ）、Babelの仕様で**先頭を大文字**にする必要がある
```jsx 
function Welcome () {
    return <h1>HelloWorld!</h1>;
}
// アロー関数で書くと簡潔でよい
const Welcome = () => <h1>HelloWorld!</h1>;

// 呼ぶときは
<Welcome />
```


# コンポーネントの分割方法
別ファイルに分割する際のインポート、エクスポート方法

### エクスポート方法１「NamedExport」
```jsx
export { Welcome };
export { Welcome, Hello }; // 複数出力できる

// インポートするとき
import { Welcome, Hello } from "./component/Welcome";
```

### エクスポート方法２「DefaultExport」
```jsx
export default Example; // 複数渡せない→１ファイル１エクスポートになる

//これをインポートするときは以下のように書く
import Welcome from "./component/Welcome";
// 以下の様に名前を変えることができる
import Hello from "./component/Welcome";
```
# Fragmentとは
無駄な`<div>`を使わなくても要素をまとめられる
```jsx
<React.Fragment>
  <h3>Hello Component</h3>
  <h1>Hello Fragment;</h1>
</React.Fragment>
```
`<React.Fragment>`は描画時に無かったことになる
`</React.Fragment>`→`<>`の様に省略もできる
# JSX内でJSコードを実行する

JSの**式**は{}へ埋め込める

例えば以下の感じに

```jsx
const test = "World";
return <h3>Hello {test} </h3>;
```

また、JSX記法も式として認識されるので以下の様にもかける

```jsx
const jsx = <h1>JSX</h1>;
return <h3>Hello {jsx} </h3>;
```
### 式と文の違い
 **式**：何らかの値を返す、変数に代入できる
 **文**：変数の宣言、for文、if文など、セミコロン（；）で区切るもの

# propsでコンポーネントに値を渡す

基本的にコンポーネントはpropsによってのみ出力結果を変えるようにする！

以下のようなコンポーネントを呼び出すとき

```jsx
const Child = (props) => {
  return (
    <div className={`component ${props.color}`}>
      <h3>Hello Component</h3>
    </div>
  );
// 呼ぶときは以下のような感じ
<Child color="red" />
```

ほかにも様々な値を渡せる　以下は分割代入を用いている

```jsx
const Child = ({ color, num }) => {
  return (
    <div className={`component ${color}`}>
      <h3>{`Hello Component ${num}`}</h3>
    </div>
  );
};
// 呼ぶときは以下のような感じ
<Child color="red" num={1} />
```

スプレッド演算子なんかもうまくつかえる

```jsx
const o = {
  color: "red",
  num: 123,
};
<Child {...o} />
```

# props.childrenとは

開始タグと終了タグの間、もしくは属性に定義する要素
コンポーネントを渡すことができる

**開始タグと終了タグの間に記述した場合**
```jsx
<Container title="Childrenとは？">
  <Profile {...profile[0]} />
  <Profile {...profile[1]} />
</Container>
```

**属性に定義した場合**
```jsx
<Container
  title="Childrenとは？"
  children={[<Profile {...profile[0]} />, <Profile {...profile[1]} />]}
/>
```


受け取る側
```jsx
const Container = ({ title, children }) => {
  return (
    <div className="container">
      <h3>{title}</h3>
      {children}
    </div>
  );
};
```

# propsの重要なルール

**一方通行**：親から子へわたすもの
**読み取り専用**：書き換えはエラーになる

# JSXの正体

```jsx
const elm = (<h1 className="fuga">Hello!</h1>);
```

バベルで↓のJSオブジェクトへ変換される

```jsx
const elm = React.createElement("h1", {className:'fuga'}, "Hello!")
```

実行されると↓のReact要素になる

```jsx
const elm = {
	type:'h1', 
	props:{
		className:'fuga',
		children:'Hello!'
	}
}
```

React要素をレンダーすることで画面に表示される

```html
<div id="root"></div>
```

```jsx
const elm = (<h1 className="fuga">Hello!</h1>);
const root = createRoot(document.getElementById("root"));

root.render(elm);
```

# 次回
**[Stete、状態管理について](https://qiita.com/yamasans12/items/2b92b0b157a2b4ca10e9)**