🐡

[note] react

2022/02/13に公開

React

tech

随時更新

YouTubeのvideoIDが不正です

[note]react-official-document

what is react

React is a JavaScript library for building user interfaces, developed by Facebook and the community.

JSXの記法

JavaScript の構文の拡張言語テンプレート言語とは違う
htmlライクな記述
javascriptの構文が使える

JSXを使う理由

以下の 2 つの例は等価

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

上記を簡単に書けるようにしたのがjsx

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

あとは

以下の表示のためのロジックを実現する
- イベントへの応答や経時的な状態の変化、画面表示のためのデータを準備する方法といった、他の UI ロジックと本質的に結合したもの
マークアップとロジックを別々のファイルに書いて人為的に技術を分離するのではなく、React はマークアップとロジックを両方含む疎結合の「コンポーネント」という単位を用いて関心を分離
JSX があるために React は有用なエラーや警告をより多く表示することができ

jsxは何をしているのか

jsx→React.createElementに変換
react要素を生成

jsx基礎文法

reactライブラリをimportする（ver17から不要）
return文の中がjsx気泡
- 基本的にはhtmlと同じ
- classはclassNameに

import React from "react";

interface Props {
  num: string;
}

class Sample extends React.Component<Props> {
  render() {
    return <p>{this.props.num}つ目のコンポーネント</p>;
  }
}

export default Sample;

特殊なjsx構文

jsxは必ず階層構造（最上位のコンポーネントは並列にできない）
React.Fragmentで囲む（htmlとして出力されない、divタブ等必要のないタグを避けれる）
React.Fragmentは省略でかける

  render() {
    return (
      <React.Fragment>
        <p style={{ color: "pink", fontSize: "30px" }}>Dandyyy</p>
        <Sample num={"5"} />

        <p>{this.state.message}</p>
        <button onClick={this.handleClick}>ボタン</button>
        <p>{this.state.counter1}</p>
        <button onClick={this.doAction1}>Click</button>
      </React.Fragment>
    );
  }
}

create-react-appで環境構築

create-react-appとは

reactの環境構築ツールチェイン

最も簡単にreactの開発環境えお構築できる
本来のreact環境構築は以下の設定が必要
- トランスパイラのbabel
- バンドラーのwebpack

スクリプトの解説

# ローカルサーバー起動
npm start

# 本番用ファイルを生成してbuildディレクトリ に出力
npom run build

コンポーネントとprops

コンポーネントとは

見た目と機能を持ったUIのパーツ
コンポーネントを組み合わせてページを作る
大きく2種類に分ける
- Class Component（クラスコンポーネント）
- Functional Component（関数コンポーネント）主流

コンポーネントの違い

Functional Component記述量が少ない
昔はClassでないとできないことがあった
react hooksの登場でクラスコンポーネントと同じ機能が使えるように

Class Component（クラスコンポーネント）→限定的にか今は使われない

import React, {Component} from 'react';

class Button extends Component {
  render() {
    return <button>Say ,{this.props.hello}</button>
  }
}

export default Button;

Functional Component（関数コンポーネント）主流

import React from 'react';

const Button = (props) => {
    return <button>Say ,{props.hello}</button>
}

export default Button;

なぜコンポーネントを使うのか

再利用するため（再利用性）
- 同じ記述を何度もする必要がない
コードの見通しを良くするため（可読性）
- 1コンポーネント = 1ファイル
- 別ファイルに分けることでコードが読みやすく
変更に強くするため（保守性）
- 修正は1箇所だけでOK

react使うときはできるだけ小さい単位で分けていく

コンポーネントの使いかた

ファイル名は大文字
子コンポーネントでexport
親コンポーネントでimport

propsでデータを受け渡す

子コンポーネントの引数にpropsを指定する
親から子にデータを渡す

コンポーネントの再利用

Sample部分

import React from "react";
import Sample from "./Sample";

interface Props {}

interface State {
  message: string;
  counter1: number;
}

class App extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);

    this.state = {
      message: "最初のメッセージ",
      counter1: 0,
    };

    this.handleClick = this.handleClick.bind(this);
    this.doAction1 = this.doAction1.bind(this);
  }

  handleClick() {
    this.setState({
      message: "ボタンが押されました",
    });
  }
  doAction1() {
    this.setState({
      counter1: this.state.counter1 + 1,
    });
  }

  render() {
    return (
      <React.Fragment>
        <p style={{ color: "pink", fontSize: "30px" }}>Dandyyy</p>
        <Sample num={"5"} />
        <Sample num={"6"} />
        <Sample num={"7"} />

        <p>{this.state.message}</p>
        <button onClick={this.handleClick}>ボタン</button>
        <p>{this.state.counter1}</p>
        <button onClick={this.doAction1}>Click</button>
      </React.Fragment>
    );
  }
}

export default App;

コンポーネントのimportとexport

なぜコンポーネントを使うのか
こちら、そのようにして別ファイルのコンポーネントを使うのか

javascriptのモジュール機能（この考え方からコンポーネント単位での考えができている）

プログラムをモジュールという単位に分割する（そもそもはjavascript mdmから）
原則は1ファイル = 1モジュール
必要な時に必要なモジュールのみ読み込む

default export（名前なしexport）

推奨されるexport方法
1ファイル = 1export
1度宣言したアロー関数をdefault export
名前付きexport

アロー関数（名前なし）のdefault export

const Title = (props) => {
  return <h2>{props.title}</h2>
};
export default Title;

名前付き関数のdefault export

reactでは一般的
名前なしと書き方が違うだけでやっていることは同じ
！実際ではdefaultという名前でexportしている（Titleではない）

export default function Title(props) {
  return <h2>{props.title}</h2>
};

default import（名前なしimport）

default exportしたモジュールをそのまま読み込む
import モジュール名 from "ファイルパス"

Title.jsx

const Title = (props) => {
  return <h2>{props.title}</h2>
};
export default Title;

import Title from "./components/Title"

名前付きexport

reactでよく使う

1ファイルから複数モジュールをexportしたい時に使う
reactではエントリポイント（だいたいindex.js）でよく使う
エントリポイントでは別名exportも併用する

importするときのファイルパスをすっきりさせる（よく使うモジュールのファイルパスがエントリポイントからに統一させる）ため、エントリポイントの役割を果たすファイルに一度importさせてから改めてexportする

export {default as Article} from "./Article"
export {default as Content} from "./Content"
export {default as Title} from "./Title"

名前付きimport

1ファイルから複数モジュールを読み込む
エントリポイントから複数コンポーネントを読み込む

import {Content ,  Title} from "./index";

もし直接imortしたら

import Content from "./components/Content"
import Title from "./components/Title"
どんどん増えていく

コンポーネントの状態管理

インタラクティブなアプリの実現

reactのHooksとは

2020/02に正式にリリース
hook は Reactの state やライフサイクルの機能などを、関数コンポーネント内に使用できるようにするための関数
クラスコンポーネントの機能に接続するもの
基本的にはフックを用いた関数コンポーネントで書いていき、必要な場合のみクラスで作成する。というのが今後のスタンダードになると予想

Reactでなぜstateを使うのか

domを直接書き換えない（reactの仮想domを使う）
値を再描画
- stateが変更されたとき
- propsが変更されたとき

useStateの使い方

// useStateによるstateの宣言
const [count, setCount] = useState(0)
// stateの更新
setCount(count + 1)

propsとstateの違い

props：引数のようにコンポーネントに渡される値
state：コンポーネント内部で宣言・制御される値