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の差分から導き出される。

renderメソッドでバーチャルDOMを構築
ユーザーがブラウザ上で何かしらの操作をする
renderメソッドでバーチャルDOMを構築
バーチャルDOMの差分から本当に変更が必要な部分を導出する
ブラウザの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`)
拡張方法	継承	移譲

create-react-app

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

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

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

backpaper0/README.md

Basics of React

特徴

JSX

Babel

バーチャルDOM

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

create-react-app

その他