Reactメモ

はじめに

Reactよくわからない。

React使う

色々調べてみたけどベースとなる経験が圧倒的に無いのでReactの利点というものがよく分からなかった。
複数サンプルを使ってみて、どれもフォーム入力したら同時に描画するものだったのでそれが特徴なのかなって思った。
電卓を作ってみた。(書かない)

headタグ内

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>

書いておく。

出力

ReactDOM.renderを使って表示する。
下の例だとHello World!と表示される。

bodyタグ内

<div id="test"></div>

<script type="text/babel">
    const name = "world";
    class Hello extends React.Component{
        render() {
            return (
                <p>hello {name}!</p>
            );
        }
    }
    ReactDOM.render(
        <Hello />,
        document.getElementById("test")
    )
</script>

<div>タグに<p>タグが埋め込まれている。
const name = "world"; JavaScriptの変数。
class Hello extends React.Component{~ Reactのコンポーネントを生成している。クラス名は先頭大文字の必要がある。
render() {~ React要素を返している。
<p>hello {name}!</p> JSX(よく分からない)。{}の中にJavaScriptの文を書ける。
ReactDOM.render(~ React要素をレンダリングする。第一引数はReact要素、第二引数は埋め込み先の要素。

こうも書ける

Hello World!と出る。

bodyタグ内

<div id="test"></div>

<script type="text/babel">
    class Hello extends React.Component{
        render() {
            return (
                <div>
                <p>Hello </p>
                <World />
                </div>
            );
        }
    }
    class World extends React.Component{
        render() {
            return (
                <p>World!</p>
            );
        }
    }
    ReactDOM.render(
        <Hello />,
        document.getElementById("test")
    )
</script>

`

Hello

` 要素は一つしか返せないので複数返したいときは一つにまとめる。 `` 別コンポーネントを呼べる。

state

コンポーネントにstateを追加する。
ボタンを押すと押した数が追加され、表示される。

bodyタグ内

<div id="testState"></div>

<script type="text/babel">
    class TestState extends React.Component{
        constructor(props) {
            super(props);
            this.state = { disp: ''};
            this.onClickBtn = this.onClickBtn.bind(this);
        }
        onClickBtn(e) {
            const str = this.state.disp + e.target.value;
            this.setState({disp: str});
        }
        render() {
            const buttons = [1, 2, 3];
            return (
                <div>
                <Display disp={this.state.disp} />
                {buttons.map(button => {
                    return (
                        <Button key={button} onClickBtn={this.onClickBtn} button={button}/>
                    )
                })}
                </div>
            );
        }
    };
    class Display extends React.Component{
        render() {
            return (
                <p>{this.props.disp}</p>
            );
        }
    }

    class Button extends React.Component{
        render() {
            const val = this.props.button;
            return (
                <button type="button" className="btn" value={val} onClick={this.props.onClickBtn}>{val}</button>
            );
        }
    }
    ReactDOM.render(
        <TestState />,
        document.getElementById("testState")
    )
</script>

constructor(props) {~ stateを作る。setState()で値を更新すると再レンダリングされる。自作関数内でthisを使う場合bindしておく。参照。
<Display disp={this.state.disp} /> Displayコンポーネントにstateのdispをdispという名前で渡している。
<Button key={button} onClickBtn={this.onClickBtn} button={button}/> map関数で繰り返されている。key="ユニークな値"を設定しないとエラーがでる。
<p>{this.props.disp}</p> 渡された値はthis.props.名前で受け取る。