【Part2】はじめてのReact勉強メモ

はじめに

前回の続きです。

公式チュートリアルのHello Worldからやってみます。

やってみる

Hello World

前回構築した環境のindex.jsを改変して、以下のようにしてみます。
ReactDOM.render()で既存のDOMにReactDOMをバインドする感じですね。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

// ここを追加
ReactDOM.render(
  <h1>Hello World!</h1>,
  document.getElementById('root')
);

// ここを一旦コメントアウト
// ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

Introducing JSX

先ほどReactDOM.render()で使った表現、変数にも代入できるんですね。

const element = <h1>Hello, world!</h1>;

JSX内に変数を埋め込むにはこんな感じでやるみたいです。

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

関数も使えるんですね。

const formatName = ...

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

タグの属性に文字列を指定する場合はこんな感じにして、

const element = <div tabIndex="0"></div>;

変数を埋め込むときはこんな感じだそう。

const element = <img src={user.avatarUrl}></img>;

空のタグはこんな感じで閉じて、

const element = <img src={user.avatarUrl} />;

もちろんタグのネストもできるよ。

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

XSSなんかの対策で、JSXは描画前に内部の値をすべて文字列にエスケープするようになっているので、アプリに書かれていないものを直接差し込むのは出来ないようになっているそう。

const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;

ここまで見てきたJSX、実際はどんな形になっているの？って話なんですが、こんな感じに書いた場合

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

実際はBabelが以下のようにコンパイルしてくれていて、

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement内で幾つかチェックをかました後にこんな感じの値が返ってくるようになっているそう。

// Note: this structure is simplified
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

index.js

この章で出てきた要素をいろいろとindex.jsに混ぜてみました。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

const name = 'world';
const formatName = name => `Hello ${name}.`;
const hash = {
  a: '#a',
  b: '#b'
}

// ここを追加
ReactDOM.render(
  <div>
    <h1>This is title.</h1>
    <h2>{formatName(name)}</h2>
    <h2>
      <a href={hash.a}>Jump to #a</a>
      <a href={hash.b}>Jump to #b</a>
    </h2>
  </div>,
  document.getElementById('root')
);

// ここを一旦コメントアウト
// ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

Rendering Elements

DOMとReactDOMは違うよという導入です。

<div id="root"></div>

これを"root"DOMと呼んで、この内部をreactの支配下にするという話ですね。要は仮想DOMでやるという話だと思います。
一からreactアプリを作る際は基本的にこの"root"DOMはひとつですが、複数持っても良いそうです。

Reactエレメントは一度描画されれば基本的に不変なので、以下のように再描画する必要があるそうです。

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

さっそくindex.jsに混ぜてみました。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

const name = 'world';
const formatName = name => `Hello ${name}.`;
const hash = {
  a: '#a',
  b: '#b'
}

// ここを追加
const tick = () => {
  ReactDOM.render(
    <div>
      <h1>This is title.</h1>
      <h2>{formatName(name)}</h2>
      <h2>
        <a href={hash.a}>Jump to #a</a>
        <a href={hash.b}>Jump to #b</a>
      </h2>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>,
    document.getElementById('root')
  );
}

setInterval(tick, 1000)

// ここを一旦コメントアウト
// ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

終わりに

本日はここまで。記法こそVue.jsとは違いますが、結構すんなりと受け入れながら理解できています。
次回はComponents and Propsからやっていきます。