Reactチュートリアルをやってみた

はじめに

以前から、Reactは気になっていました。

Laravel×Vue.jsの仕組みがなんとなくわかり始めたので、このタイミングでReactにも触れてみたいと思います。

教材は定番そうなReactチュートリアルです。

この記事の目的

Reactの基本を学ぶ

【React】気になる教材まとめ

※もうこれ1か月も前なのか。。。

Reactチュートリアルやってみた

工程1.ローカル環境構築

参考※Node.jsがインストールされている必要あり。

①インストール

npx create-react-app react-app

②srcフォルダのファイルを編集

rm -f * // フォルダ内全削除
touch index.css // その後教材のソースコードをコピペ
touch index.js // その後教材のソースコードをコピペ

③index.jsに以下を追記

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

④起動

npm start

http://localhost:3000/が自動で開く

工程2.Reactの概要を学ぶ

✅Reactとは

React はユーザインターフェイスを構築するための、宣言型で効率的で柔軟な JavaScript ライブラリです。
複雑な UI を、「コンポーネント」と呼ばれる小さく独立した部品から組み立てることができます。

✅コンポーネント

Reactで画面に表示される部品のこと。

作り方。

class コンポーネント名 extends React.Component{
  render(){
    return ~~JSX~~
  }
}

Reactコンポーネントのクラスで呼び出されているrenderメソッドは、JSXなどで定義されたReact要素を返す処理を行う。
returnで表示する要素を返す。

※レンダリング：何らかの抽象的なデータ集合を元に、一定の処理や演算を行って画像や映像、音声などを生成すること。

✅JSXとは

HTMLのタグを直接JavaScriptのスクリプトに記述できる仕組み。

注意点
①複数の要素がある場合は<div>タグで囲んで1つの要素にまとめること。
②imgタグでは閉じタグが必要になる。<img src=’画像のURL’ />
③コメントは{/* */}で囲む。

✅プロパティ

クラスに値を保管しておくために使うもの。

✅props

コンポーネントの属性をまとめて保管するためのもの。

親から子へとインスタンスプロパティであるpropsを渡すことでコンポーネント間でデータのやりとりをする。(this.propsと記載)

※値を変更することはできない。

✅state

コンポーネントの状態を表す値を保管するためのもの。(this.stateと記載)

constructorメソッドを利用してオブジェクトの初期化を必ず行う。

class クラス名 {
  constructor(props) {
    super(props); // 必ずsuper(props)の呼び出しから始める
    ~以下初期化処理~
    this.state = {
      value: null,
    };
    ~~プロパティ、メソッド~~
  }
}

※stateはpropsに似ているが、コンポーネントによって完全に管理されるプライベートなもの。かつ状態管理のために値の変更が可能。

setState：コンポーネント内で呼び出すと、その内部の子コンポーネントも自動的に更新される。

✅React DevTools

React DevToolsを使うとReactコンポーネントのpropsとstateを確認可能。

工程3.Reactアプリを完成させる

※盤面が埋まった状態は以下のようになる。

[
'O', null, 'X',
'X', 'X', 'O',
'O', null, null,
]

✅Stateのリフトアップ

Square コンポーネントを制御されたコンポーネント (controlled component) にする。

SquareコンポーネントからBoardコンポーネント内でマス目の状態を保持できるように編集。(全面的に制御する)
⇒親側で状態を保持することで、どちらが勝者か判定できるようになる。

stateを持たないコンポーネントは関数コンポーネントでシンプルに記載することができる。

✅イミュータビリティ(不変性)の重要性

データの値を直接いじってデータをミューテート（mutate; 書き換え）することを避ける。
⇒望む変更を加えた新しいデータのコピーで古いデータを置き換えることで、変更の検出や再利用がしやすくなる。

完成

おわりに

上記の考え方や真偽値の反転による〇✖の切り替え、Vue.jsにも共通してる部分だしとても参考になる。

タイムトラベル機能を応用するにはまだ理解が浅いので、要反復。

Reactのチュートリアルはザ・プログラミングって感じでとても面白く勉強になった。

参考

React チュートリアル(Qiita)

【入門】Reactチュートリアルをやりながら実践入門

正真正銘のReactだけの不純物なしでReact入門

備考

以前コチラの本をKindle半額キャンペーンで買っていました。

Reactのチュートリアルに取り掛かる前に、ざっと眺めたのですが、今後こちらは参考程度に使うことにしました。

理由①React.jsのみでWebアプリをそこまで作らない。②Next.js、Firebaseの説明も含まれているが一旦切り離して基礎を学びたいため。