React 公式よりももっと低レベルなところから始める、React チュートリアル

Tweet

React が必要になる状況

いつ React が必要になるのでしょうか？

例えば次のサンプルのように、DOMを増減するアプリケーションがあるとして、設計について特に考慮せずにjQueryで単純にDOMを増減させると、目的は達成できるのですが、現在のアプリケーションの「状態」を確認することが非常に難しくなります。例えば、青いブロックが今何個あるのか、といったことを確認するためにはDOM全体を捜査しなければわかりません。

See the Pen React easy tutrial1 by nakanishi (@nakanishi) on CodePen.

そして、状態の管理が難しいと、いつかアプリケーションが破綻します。

上記のアプリケーションがなぜ状態管理が難しいか

上記のアプリケーションの状態管理がなぜ難しいかというと、状態がすべて本物のDOMとして管理されているために、毎回それを捜査・取得する必要があるからです。もし最初からJSの変数に情報が入っていれば、こんなことはしなくてすみます。

ですから、状態をJSで管理して、その状態をjQueryで反映させる、というコードに書き換えてみます。

jQueryで、状態をrenderするような書き方

次のコードは、一箇所に状態を集めて、その状態を元にDOMを作成し、レンダリングするような方式をとっています。

See the Pen React easy tutrial2 by nakanishi (@nakanishi) on CodePen.

ただしこれでもマイナス点はあって、一旦DOMをすべて削除してから、再度すべてを再レンダリングしているので、無駄が非常に多いという問題があります。できれば変更されたところだけをレンダリングし直してほしいわけです。そのほうが負荷を小さくできるわけですから。

それを実現してくれるのがReactやVueといった、仮想DOMというシステムもとにしたライブラリやフレームワークです。

Reactを始める

次のコードはReactを使ったコードです。ボタンをクリックすると、Hello,の後ろの名前が変更されます。しかしこの変更は先ほどまでのコードのようにjQueryでDOMを直接変更してはいません。あくまで、「状態管理をしている変数の値だけを変更」しています。そして、状態が変更された結果、Reactがそれを察知して、View=実際に目に見えるDOMを変更します。

See the Pen React myTutrial1 by nakanishi (@nakanishi) on CodePen.

//このソースではヘッダーでreactとreact-domライブラリを読み込んだのと同じ状態になっている
//npmをES6シンタックスでインポートする場合には、以下のコードを冒頭に書く
//import React from 'react'
//import ReactDOM from 'react-dom'

//Helloコンポーネントをつくる
class Hello extends React.Component {
  constructor() {
    super();
	//状態をもつ。状態は単なるJSオブジェクトで管理する。
	this.state = {
		name: "name"
  	};
}
	
	textChange(text) {
		//setStateメソッドはリアクトコンポーネントが最初から持つメソッドで、
		//this.stateを変更するもの。
		this.setState({name:text});
	}
	
	//renderでreturnしたものが、コンポーネントを呼び出したときに、レンダリングされる内容
	//returnの内容が複数行にわたる場合は、()でくくると良い。
  render() {
    return (
			//{}の中はJSとして解釈される
			//this.state.nameはこのコンポーネントの状態のうち、
			//nameというプロパティを持つもの。これを参照して、表示させている。
      <div>
        <h1>Hello, <span className="name">{this.state.name}!</span></h1>
				<button onClick={()=>{this.textChange("Mark")}}>Mark</button>
				<button onClick={()=>{this.textChange("Evan")}}>Evan</button>
      </div>
			//onClick={}の中身が、クリック時に実行される。
			//ここではES6のアロー関数を用いて、自身のメソッドであるthis.testChangeを呼び出している。
    );
  }
}

//argument1が、どのコンポーネントを描画するか。
//argument2がどの対象にReactを紐付けるか。
ReactDOM.render(
  <Hello />,
  document.getElementById('root')
);

一番シンプルなリアクトApp

https://codesandbox.io/s/j1wn8ko1y9