React基礎

React

2017年8月11日

概要

React.jsとはFacebook謹製のjsフレームワークです。
似たようなjsフレームワークにangular.jsがありますが、htmlを拡張していくのがangularでjs自体を拡張していくのが私の印象でした。(angular2はType.scriptでないといけないのでなるべくピュアなES6を勉強す流には向いているのか？)加えてReact.jsはjsの関数型機能をベースにつくられています。そういう意味ではReactを単なるビューを司るフレームワークという一般的な紹介には疑問を感じています。今回はこのReactの基本的な部分を紹介します。

コンポーネント

コンポーネント(component)とは日本語にすると構成要素とかという意味になります。
要するに部品という意味です。イメージ的には、よくあるheaderやfooterの共通化のようなものです。
このコンポーネントには主に2種類あります。
なんで2種類あるのというお話ですが、functional componet はstateを保持できません。逆に class componentは state を保持することができるという違いがあります。

functional (or stateless) componet

関数でコンポーネントを作成するのがfunctional componet　です。
下記のような形になります。

function Hello() {
    return(
        <div>
            こんにちは
        </div>
    )
}

class component

クラスを宣言してReact.Componentを継承してコンポーネントを作成します。

class Hello extends React.Component {
    render() {
    return (
        <div>
            こんにちは
        </div>
    )
    }
}

htmlをエスケープさせないようにする

変数に格納したhtmlはReactDOM.reder内部でエスケープされてしまうので下記のようにする必要があります。

const textHtml = {__html:'<h2>test</h2>'};

<span dangerouslySetInnerHTML = { textHtml } />

コンポーネントの値(stateとprops)

propsとは

propsとはコンポーネントに値を渡すときに利用されるものです。
上記した functional componet を利用して書くと下記のようになります。
ReactDOM.render内部でHelloコンポーネントにpropsを渡しています。
propsはデフォルトの値を与えたり必須チェックを行うこともできます。

function Hello(props) {
    return(
        <div>
            こんにちは{props.name}
        </div>
    )
}

---

ReactDOM.render(
    <Hello name="名前" />, document.getElementById('root'));
registerServiceWorker();

---

Hello.propTypes = {
    name: React.PropTypes.string.isRequired
}
---
Hello.defaultProps = {
    name: 'デフォルト'
}

stateとは

stateとはclassコンポーネントの中で保持する値のことを言います。
constructorを宣言しその中で値を保持して利用します。

constructor() {
    super();
        this.state = {
            name: 'ステート'
        };
    }

---