Reactとは





Reactとは

  • UIを構築するためのjsライブラリ
  • コンパイルする必要がある(react-toolsなどを使う)
  • JSXという記法でHTMLを書ける(JSXなしでもReactは利用できる)
  • DOMを直接操作するのではなく、VirtualDOMに対して操作する
  • 仮想DOMなので必要な部分だけが更新される
  • React単体ではcssの機能はなく、CSS-Modulesなどを使う
  • コンポーネント単位で部品を作っていく

コンポーネントとは

他のプログラムから呼び出されたり連結されたりして使用されるプログラム部品
モジュール(module)と明確な違いはなくほとんど同じ概念

Functional Component（Stateless Functional Component)

  • JavaScriptの関数を使ってコーポネントを書ける
  • ES6の記法で書く
  • JSXでUIを構築し、関数を戻り値として返す(DOMを関数の戻り値に書く)
  • 引数にpropsとして定義すればpropsオブジェクトで利用が可能
  • React.createClass(ES5)とは書き方が異なる

JSXについて

  • classではなく、className

    1
    <div className="jsx"></div>

  • HTMLタグに変数、数字を代入するときは {}を使う

PropsとState

Props

  • propsは外部から注入される変数
  • コンポーネント利用時に属性として設定ができる値(後から変更不可)
  • 親コンポーネントから渡されたプロパティ
  • this.propsというオブジェクトで利用できる
  • 引数にpropsとして定義すればpropsオブジェクトで利用できる
  • defaultPropsとしてPropsの初期値が設定できる

State

  • 外部から注入できない
  • 値の変更ができる
  • そのコンポーネントが持っている状態

ファイル読み込み

ES6のimportを使った読み込み

1
2
import React from 'react';
import ReactDom from 'react-dom';

importはReactを使うために書く決まり
render()で生成したいHTML(jsx)
render(){ return( の直下は1つのdomしか置けない

ReactDOM.render()で描画を行う

1
ReactDOM.render()

外部から値を受け取らないコンポーネント

1
2
3
const abc = function() {
  return <div>abc</div>
}

アロー関数で書くと

1
const abc = () => <div>abc/div>

関数の引数でpropsを受け取る

1
2
3
4
5
6
7
8
function abc(props) {
  return <div>abc {props.text}</div>;
}

ReactDOM.render(
  <abc text="abc" />,
  document.querySelector('content')
);

React.createClass(ES6を使わない)

ES5ではコンポーネント定義はcreateClassを使う

import

1
<script type="text/jsx" src="src/helloworld.js"></script>

でhtmlから参照することができる

クラス宣言

1
2
3
let MyComponent = React.createClass({
    //
});