前身: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