Basics of React

README.md

Basics of React

• https://reactjs.org/

A JavaScript library for building user interfaces

import React from 'react';
import ReactDOM from 'react-dom';

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(
  <HelloMessage name="Taylor" />,
  document.getElementById('hello-example')
);

特徴

• JSX
• バーチャルDOM

JSX

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

JSXとはReactのUIを構築するために用意されているJavaScript構文の拡張。 利用は必須ではないが、利用した方が良い。

JSXを利用しない場合は次のようなコードを書かないといけない。

const element = React.createElement('h1', null, 'Hello, world!');

これはつまりJSXを利用している場合はJSXコードが上記のようなJavaScriptコードに変換してくれているということ（だからimport React from 'react';を必要とする）。 JSXコードからJavaScriptコードへの変換はBabelによって行われている。

Babel

• https://babeljs.io/docs/en/

Babel is a JavaScript compiler

• JSX
• ECMAScriptの後方互換
• Flow

JSXコードからJavaScriptコードへの変換を行うのは@babel/preset-reactというプラグイン。

デフォルトではReact.createElementを使ったコードに変換されるが、独自の関数を使ったコードに変換することもできる。

$ npm init
$ npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react

.babelrc

{
  "presets": [
    [
      "@babel/preset-react",
      { "pragma": "dom" }
    ]
  ]
}

index.js

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

$ ./node_modules/.bin/babel index.js
const element = dom("h1", null, "Hello, world!");

バーチャルDOM

React.createElementで構築したReact elementのツリー。

ブラウザのDOMを変更するのはコストが高い。 そこでバーチャルDOMを管理して本当に変更が必要な部分だけをブラウザのDOMに反映させている。

本当に変更が必要な部分はバーチャルDOMの差分から導き出される。

1. renderメソッドでバーチャルDOMを構築
2. ユーザーがブラウザ上で何かしらの操作をする
3. renderメソッドでバーチャルDOMを構築
4. バーチャルDOMの差分から本当に変更が必要な部分を導出する
5. ブラウザのDOMに変更点を反映する

• https://reactjs.org/docs/faq-internals.html

クラスコンポーネントと関数コンポーネント

Reactコンポーネントは2つの書き方がある。

クラスコンポーネント

class Hello extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (<h1>Hello, world!</h1>);
  }
}

関数コンポーネント

const Hello = props => (<h1>Hello, world!</h1>);

	クラスコンポーネント	関数コンポーネント
プロパティ	propsプロパティ	引数
状態管理	stateプロパティ	Hooks(useState)
ライフサイクル	componentDidMountメソッドなど	Hooks(useEffect)
拡張方法	継承	移譲

• https://reactjs.org/docs/components-and-props.html
• https://reactjs.org/docs/state-and-lifecycle.html
• https://reactjs.org/docs/hooks-intro.html

create-react-app

• https://github.com/facebook/create-react-app

Reactアプリケーションをセットアップするためのツール。

npx create-react-app hello-react
cd hello-react
yarn start

その他

• webpack
• Flux / Redux / 更にElm Architectureも
• React Router
• https://github.com/team-cerezo/react-tutorial
• https://gitlab.com/tis-tiw/chouseichan
• https://github.com/backpaper0/janken