React18入門 備忘録

概要

新しいプロダクトを開発するにあたり、React+TyeScript+Next.jsを使用してみようと思いましたが、
そもそもどれ1つ触ったことが無い(JavaScriptは多少)ので、
まずはReact(version 18)を学習している(現在進行系)備忘録になります。

環境

・macOS Monterey v12.6
・React v18.2
・node.js v18.12.1
・VisualStuioCode

用語説明

Node.js

Node.jsはブラウザ上でしか動作しなかったJavaScriptを、サーバーサイドやブラウザ以外の場所で動作させることができるJavaScriptエンジン(実行環境)です。
このエンジンは、基本機能を実装するいくつかのコアモジュールが付属しています。
また、「Babel」を動かすための環境の役割も担います。

npm(Node Package Manager)

npmはJavaScriprtのパッケージ管理ツールであり、Node.jsに含まれています。

Babel

JSX構文はブラウザがそのまま読み取れないため、「Babel」を使用してJavaScriptに変換する必要があります。
Babelとは、ある構文のJavaScripを別の構文のJavaScripｔに変換するツール(トランスパイラ)で、過去のバージョンのJavaScriptを担保してくれます。
例えば、分割代入等ES2015以降で登場した構文を古いブラウザで動作できるようES5用のコードに変換してくれます。

webpack

webpackは、複数のJavaScriptファイル等をまとめるツール(モジュールバンドラ)です。
ファイルとまとめることにより、パフォーマンス向上(ページの読み込み速度向上等)が期待できます。
「モジュール」とは、webpackによりまとめられたファイルのことで、JSXをはじめ、JavaScript、CSS等があります。
「Babel」にはECMAScriptModules(import/export)のJavaScriptファイルをまとめる機能はありませんので、「webpack」と「Babel」を組み合わせて利用するのが一般的です。

Reactでは、「webpack」が複数のJSXファイルを1つのファイルにまとめてくれ、さらにその過程で「Babel
」を通すことでJSXをJavaScriptに変換してくれます。

その他にも、「webpack」は、SassからCSSへのコンパイルや、画像の圧縮、ESlint等、ユースケースに応じたフロントエンド開発環境を構築してくれます。

Create React App

Reactの開発環境をコマンド1つで構築してくれます。
React開発環境構築にはNode.js、Babel、webpackが必要ですが、
Create React Appは、Babelとwebpackを内部で利用しているので、これらについて意識せず開発環境の構築ができます。

$ npx create-react-app my-app
$ cd my-app
$ npm start

VSCodeについて

おすすめ拡張機能

環境構築

・参考サイト
https://qiita.com/kuriya/items/36ae29366df0b7c95dec

・前提条件
homebrewインストール済

・Node.jsのバージョン管理
Node.jsをそのままPCにインストールするとバージョン管理が煩雑になります。
そのため、Node.jsのバージョン管理用のためにnodebrewをインストールします。
nodebrewをインストールするためには、homebrewをインストールしておく必要があります。
→つまり、homebrew→nodebrew→Node.jsの順番にインストールします。

// nodebrewをインストール
$ brew install nodebrew

// フォルダ生成(必要であれば)
$ nodebrew setup

// 最新の安定版をインストール
$ nodebrew install-binary stable

// インストール済node.jsバージョン確認
$ node -V

## 補足
// インストール済バージョン一覧
$ nodebrew ls

// インストール可能バージョン一覧確認
$ nodebrew ls-remote

// バージョンを指定しインストール
$ nodebrew install-binary [version]

// バージョンを指定して削除
$ nodebrew uninstall [version]

// 使用するnode.jsのバージョンを切り替え
$ nodebrew use [version]

ReactHooks

名称	説明
useState	stateとstateを更新するための関数を定義できるため、関数コンポーネント内部でstate(状態)を管理できる。
useEffect	関数コンポーネント内で、副作用(DOMの書き換え、変数代入、API通信等)の追加、制御、副作用関数の実行タイミングをUI構築後まで遅延させる。
useMemo	関数の結果を保持するためのフックで、結果が同じ場合の値等を保存(メモ化)し、そこから値を取得する。
useCallback	関数自体をメモ化するフック。React.memoと組み合わせて利用する。
useRef	要素の参照を行うためのフック。コンポーネント内で値を保持することができる。
useContext	Context機能をよりシンプルに使えるようになったフック。 親からpropsで渡されていなくても、Contextに収容されているデータによりシンプルにアクセスできる。
カスタムフック	関数名が「use」で始まる独自のフック。UIと切り離したロジックの抽出が可能で、ロジックごとに処理を切り分けることもできる。

useState

import React from 'react';
import ReactDOM from 'react-dom/client';

// 「いいね」表示を行うコンポーネント関数
const LikeButton = () => {
  // useState()でstateの管理
  // likedに、いいね前(false)かいいね済(true)どちらかの状態を持たせている
  const [liked, setLiked] = React.useState(false);

  // いいね前と、いいね済がトグルする関数toggleLikedを定義
  const toggleLiked = () => setLiked(!liked);

  return (
    // ボタンをクリックすると、trueとfalseがトグルする
    <button className='likeButton' onClick={toggleLiked}>
      {liked ? 'いいね済' : "いいね前"}
    </button>
  );
};

// domContainerを定義
const domContainer = document.getElementById('root');

// HTMLのDOMコンテナにレンダリング
const root = ReactDOM.createRoot(domContainer);
root.render(<LikeButton />);