Memo

コンポーネント
■関数コンポーネントを使う        <div id="root">
            <p>Loading...</p>
        </div>
        <script type="text/babel">
        let dom = document.querySelector('#root');

        // 関数コンポーネント
        function Hello() {
            return <p>Hello! React</p>
        }

        let element = (
            <div>
                <h2>JSX Sample</h2>
                <Hello />
            </div>
        );
        ReactDOM.render(element, dom);
        </script>
■関数コンポーネントで属性を利用する        <div id="root">
            <p>Loading...</p>
        </div>
        <script type="text/babel">
        let dom = document.querySelector('#root');

        // 関数コンポーネント
        function Hello(props) {
            return <p>{props.name}さん、{props.greeting}。</p>
        }

        let element = (
            <div>
                <h2>JSX Sample</h2>
                <Hello name="太郎" greeting="こんにちは" />
                <Hello name="花子" greeting="こんばんは" />
            </div>
        );
        ReactDOM.render(element, dom);
        </script>
■コンポーネントをクラスで作成する        <div id="root">
            <p>Loading...</p>
        </div>
        <script type="text/babel">
        let dom = document.querySelector('#root');

        // コンポーネントをクラスで作成
        class Hello extends React.Component {
            name = '';
            greeting = '';

            constructor(props) {
                super(props);
                this.name = props.name;
                this.greeting = props.greeting;
            }

            render() {
                return <p>{this.name}さん、{this.greeting}。</p>;
            }
        }

        let element = (
            <div>
                <h2>JSX Sample</h2>
                <Hello name="太郎" greeting="こんにちは" />
                <Hello name="花子" greeting="こんばんは" />
            </div>
        );
        ReactDOM.render(element, dom);
        </script>
Memo

Advertisement
