Reactの選択肢を増やすためにやる

セクション3 再レンダリングの仕組みを知り、レンダリングを最適化する

・propsが変更されたコンポーネントは再レンダリング、
・stateが変更されたコンポーネントは再レンダリング
・(重要)親のコンポーネントが再レンダリングされた時、子も再レンダリングされる

孫、子、親とあった時に、親がレンダリングされても孫が再レンダリングされる。

memoを使って最適化

memo を使えば、propsが変更されるまで再レンダリングされない処理として使える
React.memo / useCallback / useMemo の使い方、使い所を理解してパフォーマンス最適化をする

useCallback

useCallback(コールバック関数, 依存配列);

React.memo / useCallback / useMemo の使い方、使い所を理解してパフォーマンス最適化をする

セクション4 様々なCSSの当て方を知る

InlineStyle

普通に定数でインラインスタイルを指定して当てる方法

1
2
3
4
5
6

const titleStyle = {
  border: "solid 2px #392eff",
  borderRadius: "20px"; // camelCaseで書かないとエラー

  <p style={titleStyle}>InlineStyle</p>
}

CSS Modules

Hoge.module.scssのように module を指定する
importして使用する。
className で囲む
純粋なcssとして書ける。scssは、Syntactically Awesome StyleSheetsの略。

1
2
3
4

const titleStyle = {
  border: solid 2px #392eff;, // "" は不要
  border-radius: 20px; // ハイフンつなぎ
}

SytledJSX

JSXの中にcssを書いていく記法

jsx="true と明記する必要がある
jsx内に書くの冗長になりそうと思った
だがNext.jsだとデフォルトらしい

1
2
3
4
5
6
7
8

// importとかreturnとかその他諸々は割愛
<p className="container">StyledJSX</p>
<style jsx="true"> {`
  .container {
    border: solid 2px #392eff;
    border-radius: 20px;
  }
`}</style>

StyledComponents

人気がある、sassと同じ様にかける。
注意点。コンポーネントかsytledComponentsか分からなくなる。

1
2
3
4
5
6
7
8

<Container>
  <p>SytledComponents</p>
</Container>

const Container = styled.div`
  border: solid 2px #392eff;, // "" は不要
  border-radius: 20px; // ハイフンつなぎ
`;

emotions

@emotion/reactと@emotion/styledが必要

1
2
3
4
5
6
7

/** @jsx = jsx **/ //左記のようにおまじないがいる

const containerStyle = css`
  border: solid 2px #392eff;
  border-radius: 20px;
`
<p css={containerStyle}>emotion</p>

手法がいくつあかり、styled-componets で出来ることはできそうなイメージ。

種類ありすぎ。。

セクション5 React Router

よく使うやつ

BrowserRouter
Route
Switch
Link
useParams
URLSearchParam
useLocation
useHistory

exactはちゃんと書く。
renderする時propsでmatch url して重複防ぐ
pathは分割する
クエリパラメータ

React入門 ～React Router編～

セクション6 コンポーネントの分割方法(Atomic Design)

Atom(原子)の作成

buttonとかをまず共通のcssの物で作り、そこから分岐して拡張するイメージ。
同じ記述を原子に書かないようにしたい。

Molecule(分子)の作成

butttonとinputなど、atoms + α

Organism(有機体)の作成

atomとmoleculeを使った物など。
分割できるものは分割しておく。

I設計、ビジュアルデザイン、HTMLコーディングを実際に行う場合に「〇〇エリア」「〇〇ボックス」「〇〇領域」と呼ばれるもので、それ自体が独立して意味を持ち、ユーザとのインタラクションを定義可能なものという位置付

Template(レイアウト)の作成

生体を更に組み合わせたページ全体のレイアウトを定義

Page(一画面)の作成

ページのデータをTemplates層に流し込む

react-router-dom
styled-components

セクション7 グローバルなStateを管理する

propsのバケツリレーはつらいので、

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

import React, { createContext, useState } from 'react'

export const UserContext = createContext({});

export const UserProvider = (props) => {
  const { children } = props;

  const [userInfo, setUserInfo] = useState(null)
  return (
    <UserContext.Provider value={{ userInfo, setUserInfo }}>
      {children}
    </UserContext.Provider>
  );
};

UserContext を各コンポーネントで呼び出して使うようにすると、propsのバケツリレーを避けれる

セクション8 json placholder

json placeholderはいいぞという話だった

便利ね

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

import axios from "axios";
import "./styles.css";

export default function App() {
  const onClickUsers = () => {
    axios.get("https://jsonplaceholder.typicode.com/users").then((res) => {
      console.log(res.data);
    }).catch((err) => {
      console.log(err);
    })
  }

  const onClickUser1 = () => {
    axios.get("https://jsonplaceholder.typicode.com/users?id=1").then((res) => {
      console.log(res.data);
    }).catch((err) => {
      console.log(err);
    })
  }
  return (
    <div className="App">
      <button onClick={onClickUsers}>users</button>
      <button onClick={onClickUser1}>id=1のuser </button>
    </div>
  );
}

セクション9 React × TS

基本

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

/* eslint-disable @typescript-eslint/no-unused-vars*/


// tsの基本の型

// bool
let bool: boolean = true;

// number
let num: number = 1;

// string
let str: string = "busitora";

// array
let arr1: Array<number> = [0,1,2]; // こっちのが良さそう
let arr2: number[] = [0,1,2];

let tuple: [number, string] = [1, "aaa"];

// any
let any1: any = false;

// void 何も返却しない (型アサーション効くので書かなくても良き)
const func1 = (): void => {
  const test = "test"
}

// null
let null1: null = null;

// undefined
let undefined1: undefined = undefined;

// object
let obj1: object = {};

let obj2: { id: number, name: string} = {
  id: 1,
  name: "busitora"
};

https://codesandbox.io/s/ts-practice-87j6y?file=/src/App.tsx

型の簡単な練習(既知だった)

セクション10 React × TypeScript実践

JsonPlaceHoler

Omit<T, "hoge"> やPickは便利そう
FCやVFCが馴染みがなかった

ここにやったこと書いてある。

propsに型つけたり、型用のtsファイル作ったりなど。

https://codesandbox.io/s/floral-snowflake-g7z6h?file=/src/App.tsx

セクション11 カスタムフック

便利な処理をまとめて書くことで可読性、再利用性を高める

セクション12 実践アプリ

chakra ui便利

https://github.com/reachscript-jak/react-intermediate-practice-app

ログイン機能をreactで作るのは流石にしんどい
あと、CSSもめっさむずい。
定期的に見直していきたい。

コンポーネント分割や、設計力、あとシンプルにJS力など高めていきたい
めっちゃよかった、このudemy

備考

余談だが、カッコのブラケット結構読み方忘れるからメモ。