More than 5 years have passed since last update.

React を静的HTMLでレンダリング

React

Posted at 2019-03-18

https://ja.reactjs.org/docs/getting-started.html#react-for-beginners にあった、
https://www.taniarascia.com/getting-started-with-react/ を参考に、1個の静的htmlファイルでReactをレンダリングする。

元にするjsxは、https://qiita.com/y_ohr/items/77d1a70dd6cbe4a8b365 で作成した内容。

index.htmlに全てべた書き

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />

    <title>Hello React!</title>

    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
</head>

<body>
    <div id="root"></div>
</body>

</html>

<script type="text/babel">
    class Square extends React.Component {
        constructor(props) {
            super(props);
            this.handleChange = this.handleChange.bind(this);
        }
    
        handleChange(e) {
            this.props.onNumberChange(e.target.value);
        }
    
        render() {
            return (
                <input
                    type="text"
                    value={this.props.number}
                    className="square"
                    onChange={this.handleChange}
                >
                </input>
            );
        }
    }

    const xyData = [
        { x: 0, y: 1 },
        { x: 3, y: 4 },
        { x: 6, y: 7 },
    ];

    class App extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                xyData
            };
        }

        renderSquare(i, m) {
            return <Square number={i} onNumberChange={m} />;
        }
    
        toNumber(n) {
            return n * 1;
        }

        render() {
            const title = 'XY加算機';
            const xyData = this.state.xyData.slice();
            return (
                <div>
                    <div className="title">{title}</div>
                    {xyData.map((value, i) => (
                        <div className="board-row">
                            {this.renderSquare(value.x,
                                (e) => {
                                    xyData[i].x = e;
                                    this.setState({ xyData });
                                })
                            }
                            +
                            {this.renderSquare(value.y,
                                (e) => {
                                    xyData[i].y = e;
                                    this.setState({ xyData });
                                })
                            }
                            =
                            <input value = {this.toNumber(value.x) + this.toNumber(value.y)} />
                        </div>
                    ))}
                </div>
            );
        }
    }

ReactDOM.render(<App />, document.getElementById('root'))
</script>

見づらいのでスクリプトを分割

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />

    <title>Hello React!</title>

    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
</head>

<body>
    <div id="root"></div>
</body>

</html>

<script type="text/babel" src="./app.js"></script>

app.js

class Square extends React.Component {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(e) {
        this.props.onNumberChange(e.target.value);
    }

    render() {
        return (
            <input
                type="text"
                value={this.props.number}
                className="square"
                onChange={this.handleChange}
            >
            </input>
        );
    }
}

const xyData = [
    { x: 0, y: 1 },
    { x: 3, y: 4 },
    { x: 6, y: 7 },
];

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            xyData
        };
    }

    renderSquare(i, m) {
        return <Square number={i} onNumberChange={m} />;
    }

    toNumber(n) {
        return n * 1;
    }

    render() {
        const title = 'XY加算機';
        const xyData = this.state.xyData.slice();
        return (
            <div>
                <div className="title">{title}</div>
                {xyData.map((value, i) => (
                    <div className="board-row">
                        {this.renderSquare(value.x,
                            (e) => {
                                xyData[i].x = e;
                                this.setState({ xyData });
                            })
                        }
                        +
                            {this.renderSquare(value.y,
                            (e) => {
                                xyData[i].y = e;
                                this.setState({ xyData });
                            })
                        }
                        =
                            <input value={this.toNumber(value.x) + this.toNumber(value.y)} />
                    </div>
                ))}
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('root'))

感想

create-react-appが色々インストールしているものは何か？
静的htmlによるレンダリングはnpm startとどう違う？
stateを保持するコンポーネントと使うコンポーネントと更新するコンポーネントが混乱する。

以上

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up