React.jsの基本

## 概要
今回は新たにReactを学習し始めたのでその基本をアウトプットしたいと思います。

## 基本構文
基本は下記が構文になります。

```Sample.jsx
import ReactDOM from "react-dom";

ReactDOM.render(
  <h1>Hello World!</h1>,
  document.getElementalById("root"), // index.htmlタグのidがrootになっていると仮定
);
```
基本的には`ReactDOM.render`を使用してレンダリングを行っていきます。

## コンポーネント
Reactにもコンポーネントの概念があります。
コンポーネントは２種類あり、`関数コンポーネント`と`クラスコンポーネント`があります。

### 関数コンポーネント
関数として下記のようにコンポーネント化することができます。

```Children.jsx
export const Message = () => { // コンポーネント名はパスカルケースで記載
  return <h1>Hello World!</h1>;
};
```

```Parent.jsx
import ReactDOM from "react-dom";
import { Message } from "Children";

ReactDOM.render(
  <Message />,
  document.getElementalById("root"),
);
```

上記のようにコンポーネントタグを`ReactDOM.render`に定義することでブラウザに`Hello World!`がレンダリングされる。

#### 親コンポーネントから子コンポーネントへpropsの受け渡し方

```Parent.jsx
import ReactDOM from "react-dom";
import { Message } from "Children";

ReactDOM.render(
  <Message message="Hello World!"/>, // コンポーネントタグにプロパティを渡す
  document.getElementalById("root"),
```

```Children.jsx
export const Message = (props) => { // 引数にpropsを取り親要素から渡されたプロパティを指定する
  return <h1>{props.message}</h1>
};
```
これでブラウザに`Hello World!`がレンダリングされます。

#### stateの定義の仕方
関数コンポーネントで`state`を利用する場合は`useState`を使用します。

```Children.jsx
import { useState } from "react";

export const Message = () => {
  const [message, setMessage] = useState("Hello World!"); // useStateの引数は初期値を入れる
  return <h1>{message}</h1>
};
```
分割代入の**第1引数はstateに設定したい任意の変数**を入れ、**第２引数にはstate（今回はmessageのこと）変更する際に使用する任意の関数**を入れる。
そして`useState()`の引数には初期値を入れる。

#### stateを更新する場合
例えば、ボタンを押すと表示されるmessageが変わる機能を実装すると仮定すると

```Children.jsx
import { useState } from "react";

export const Message = () => {
  const [message, setMessage] = useState("Hello World!"); // useStateの引数は初期値を入れる
  const onClickChangeMessage = () => setMessage("Good Bye"); // 第２引数に設定したsetMessageを利用してstateのmessageを変更する
  return(
    <>  // 複数タグがある場合はひとつのタグで囲わないと行けない
      <h1>{message}</h1>
      <button　onClick={onClickChangeMessage}>ボタン</button> // ボタンを押すとGood Byeに文字列が変わる
    </>
  )
};
```

### クラスコンポーネント
クラスコンポーネントは先程の関数コンポーネントとは少し違い作成するのは少し面倒。
また下記のように単純ならそこまで面倒ではないが、`props`や`state`を使用するとなると
関数コンポーネントよりは複雑になる。

```Children.jsx
class Message extends React.Component {
  render () {
    return <h1>Hello World!</h1>
  };
};
```

```Parent.jsx
import ReactDOM from "react-dom";
import { Message } from "Children";

ReactDOM.render(
  <Message />,
  document.getElementalById("root"),
);
```
上記のようにすればブラウザに`Hello World!`がレンダリングされる。

#### 親コンポーネントから子コンポーネントへpropsの受け渡し方

```Parent.jsx
import ReactDOM from "react-dom";
import { Message } from "Children";

ReactDOM.render(
  <Message message="Hello World!" />, //　同様にプロパティを設定
  document.getElementalById("root"),
);
```

```Children.jsx
class Message extends React.Component {
  render () {
    return <h1>{this.props.message}</h1> //propsの前にthisを付ける
  };
};
```

関数コンポーネントと異なり`this`をつけなければなりません。

#### stateの定義の仕方
クラスコンポーネントの場合は`constructor`を設定しないといけません

```Children.jsx
class Message extends React.Component {
  // 追加
  constructor(props) {
    super(props); // super(props)を必ず付ける
    this.state = {
      message: "Hello World!",
    };
  };
  //

  render () {
    return <h1>{this.state.message}</h1> //propsの前にthisを付ける
  };
};
```

#### stateを更新する場合

```Children.jsx
class Message extends React.Component {
  constructor(props) {
    super(props); // super(props)を必ず付ける
    this.state = {
      message: "Hello World!",
    };
  };
  const onClickChangeMessage = () => this.setState({ message: "Good Bye" })
  render () {
    return <h1 onClick={() => this.setState("Good Bye")}>{this.state.message}</h1> //propsの前にthisを付ける
  };
};
```
クラスコンポーネントでは`setState`を使用して`state`を更新する。

## 関数コンポーネントとクラスコンポーネントの使い分け
以前までは`state`はクラスコンポーネントでしか使用できなかったようだが、
現在はバーションアップして関数コンポーネントでも`state`を利用できるようになったので
簡易的に書ける関数コンポーネントを使用した方が良さそう。

## まとめ
基本的なことをまとめましたが、まだまだ序盤なのでもっと応用的な部分も学びポートフォリオをReact化したいです。