React入門メモ

Tweet

前身：XHP→Facebookが開発。PHPのフレームワークをJSに移植したもの。そのため「毎回ページをレンダリングし直す 」という特徴がある。

MVCのうち、Vのみを担当する。

stateの変更→render関数→仮想ページ→最終的なDOMの更新

JSX

Reactのコンポーネント内でマークアップ言語を記述するためのシンタックス。最終的には完全なJSにトランスコンパイルされる。

利点はほとんどHTMLシンタックスと同じなので、他のUIやマークアップエンジニアが学習しやすく、プロジェクトのリソースを確保しやすい。

Create React App

React App開発環境の作成をするためのnpm。

https://github.com/facebookincubator/create-react-app#quick-overview

npm install -g create-react-app

create-react-app my-app
cd my-app/
npm start

しかし、WebStormなら、NewProject→ReactAppから一気に作成可能。(ただしcreate-react-appはインストールされていること)

その後、yarn startで開発用サーバーを立ち上げる。

JSXの実際

renderファンクション[render()]の中にreturnでJSXのシンタックスで書かれたコードを返す。

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          うぇいうぇい
        </p>
      </div>
    );
  }
}

export default App;

値をJSで決めておいてJSXの中で{変数}とすると、それが展開される。

配列ならそれらを結合したやつがでる。

よりシンプルなHello World

https://facebook.github.io/react/docs/hello-world.html

import React from 'react'; //reactのnpmをimport
import ReactDOM from 'react-dom'; //恐らくcreate-react-appと同時にインストールされたもの。ReactDOM.renderで使う

//ReactのサブクラスであるComponentを拡張して独自の
// AppComponentを作成する。
class AppComponent extends React.Component {
    render() {
        return (
            <h1>こんにちは世界</h1> //JSXシンタックス
        );
    }
}

// どうやらcreate-react-appで作ったappをトランスコンパイルしてくと、
// DOMにrootというIDをも領域がbody直下にできる。それをまず指定
const $app = document.getElementById('root')

//先程作ったAppComponentを$appに紐付けてレンダーする
ReactDOM.render(<AppComponent />, $app);

JSXの中の{}の中にはJS表現が書ける

https://facebook.github.io/react/docs/introducing-jsx.html

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

//予め関数を定義する
function formatName(user) {
    return user.firstName + ' ' + user.lastName;
}

//オブジェクトリテラルで変数を定義
const user = {
    firstName: 'たなか',
    lastName: 'じろう'
};

class AppComponent extends React.Component {
    render() {
        return (
            // {}の中でJSを書くと評価される。 2*2は計算されて4に。
            <h1>こんにちは！ {formatName(user)}!{2*2}</h1>
        );
    }
}

const $app = document.getElementById('root');


ReactDOM.render(<AppComponent />, $app)

Sassを使う

https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc