フロントエンドとしてよく話題になっていたので学んでみることに。今までいた会社がjQueryをまだ推奨していることもあって個人的に脱却したいなという目標があります。
セッティングとかちょいちょいやるけどすぐに忘れてしまうのでまとめておこうと思います。
モダンJavaScriptの基本から始める React実践の教科書 （最新ReactHooks対応）
じゃけぇ（岡田 拓巳） (著)
Reactとは
Facebook社が開発したWebサイト上のUIパーツを構築するための仮想DOMライブラリとのこと。
フレームワークと書かれていたりライブラリと書かれていたりどっちが正しいのかは追々理解するとして・・・
フレームワークとライブラリの違い
フレームワークは全体の処理の流れを実装するのに対し、ライブラリは機能の集まり。
Reactのはじめ方
まずはnode.jsをインストールした状態でターミナルやコマンドラインから実行。
npx create-react-app プロジェクト名React × TypeScriptで作成の場合
npx create-react-app プロジェクト名 --template typescript実行したフォルダ内に指定したプロジェクト名のフォルダができるので移動。スタートコマンドを実行するとReactをローカル環境で立ち上げる可能。
cd プロジェクト名が入ったフォルダ
npm startファイル名
Reactの場合JSX気泡と呼ばれる書き方をします。JSのファイル中でHTMLのようなタグを書ける。
Reactプロジェクトを作成後、一度srcフォルダ無いにあるファイルを全て削除。
これを忘れててどれに何を書いたのかわからない上にうまく動かなくて困りました。
Reactの基盤を作っていく
HTMLにコンポーネントをレンダリングする
レンダリングしたいファイルを用意し、レンダリングする要素を記述します。今回はrootというidを指定。
指定されたid属性にコンポーネントで設定した内容が表示されるようになります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="root"></div>
</body>
</html>
仮想DOMを利用する
WebサーバーでHTMLを生成する場合、ブラウザおDOMは毎回新しいHTMLでリセットされるため、DOMの操作について考慮する必要があまりないです。リクエストするたびに取得したデータをHTMLに整形して出力するたけという単純なプログラムになります。
Ajaxを利用した場合、Ajaxで取得したデータを基に表示の生合成をとるために既存のDOMを操作する必要性があります。そのため、DOMの操作は複雑になることが多い。
Reactはわかりやすいプログラムを実装するためのライブラリです。仮想DOMから高速に処理ができるため、表示の更新時にデータから仮想DOMをを新たに構築しなおす。そのためデータの流れが一方向になって単純なプログラムにすることが可能となります。
仮想DOMとは
DOMのデータ構造を真似して、要素や属性値、ツリー構造を表すオブジェクトを独自に実装です。「DOMと同じデータを表すことができるオブジェクト」という認識が正しいのでしょうか。
ただし、DOMと言ってもブラウザとの紐付けもない純粋なJavaScriptのオブジェクトが仮想DOM。（であってるのか？）
つまりは仮想DOMを生成しただけではブラウザの画面には反映されないのです。Reactの場合使用するのがReactDomになります。
ReactDomのimport
react-domライブラリからReactDomという名前でモジュールをインポートします。
作成したjsに下記を入力しモジュールを追加。
import ReactDOM from "react-dom";次にAppという名前で、アロー関数で定義。renderという関数がReactDomに用意されているため設定。
import ReactDOM from "react-dom";
const App = () => {
};
//第一引数：<App />, 第二引数renderの箇所
//Reactでは関数名をHTMLのようにタグを囲むことによってコンポーネントとして扱うことが可能
ReactDOM.render(<App />, document.getElementById("root"));コンポーネント
一つのファイルに書いていくと冗長的な書き方になってしまいます。さまざまな粒度のコンポーネントに分割することで再利用や保守性を高めることができます。
srcフォルダにjsファイル（jsxと拡張子を変更）を追加しReactDOMのimportで書いたjsのアロー関数部分を移動し、アロー関数部分をexportと追記する。
export const App = () => {
return (
<div>
</div>
)
};jsxに変更した際に1点問題があります。return内は1つのタグで囲われている必要があるということがあります。
今回は<div>で囲みましたが、Reactに用意されているFragmentというものを使用することも可能です。
import { Fragment } from "react";
export const App = () => {
return (
<Fragment>
</Fragment>
)
};もう一つの記法として省略記法（空タグ）を使う方法もあります。
export const App = () => {
return (
<>
</>
)
};コンポーネント化したものを読み込む
親のjsに下記を追記。拡張子は省略可能です。
import ReactDOM from "react-dom";
import { App } from "./App";
//第一引数：<App />, 第二引数renderの箇所
//Reactでは関数名をHTMLのようにタグを囲むことによってコンポーネントとして扱うことが可能
ReactDOM.render(<App />, document.getElementById("root"));さいごに
本を読みながらわからないことは調べながら理解しています。今回使っている書籍に関しても最初にJSのおさらいがさらっと書かれており、JSを学んだ直後の人でも取っ掛かりやすいかと思います。
おすすめ。
モダンJavaScriptの基本から始める React実践の教科書 （最新ReactHooks対応）
じゃけぇ（岡田 拓巳） (著)
コメント