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で表示する要素を返す。

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

チュートリアルでは3つのReactコンポーネントがあります。

・Square(正方形のマス目)・・・<button>をレンダー
・Board(盤面)・・・9個のマス目をレンダー
・Game・・・盤面とプレースホルダーをレンダー

✅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; 書き換え)することを避ける。
⇒望む変更を加えた新しいデータのコピーで古いデータを置き換えることで、変更の検出や再利用がしやすくなる。

注意
タイムトラベル機能の実装はアウトプットまでの整理がまだできていないので改めて追記します。

完成

おわりに

複数の子要素からデータを集めたい、または 2 つの子コンポーネントに互いにやりとりさせたいと思った場合は、代わりに親コンポーネント内で共有の state を宣言する必要があります。親コンポーネントは props を使うことで子に情報を返すことができます。こうすることで、子コンポーネントが兄弟同士、あるいは親との間で常に同期されるようになります。 ※引用

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

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

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

参考

React チュートリアル(Qiita)

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

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

備考

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

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

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

コメントを残す