React.js コンポーネント(class)サンプル

ひとまず簡単な雛形(CDSを使ってHTML単体で起動可能)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>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>
<h1>React</h1>
<div id="root">wait...</div>
<script type="text/babel">
    let dom = document.querySelector('#root');
    class Hello extends React.Component {
        constructor(props) {
            super(props);
        }
        render() {
            return <p>{this.props.message}</p>;
        }
    }
    let el = (
        <div>
            <Hello message='Hello React.js' />
        </div>
    );
    ReactDOM.render(el,dom);
</script>
</body>
</html>

React.js コンポーネント(class)サンプル

関連

コメント