React.js 2 – ソフトウェアエンジニアの技術ブログ：Software engineer tech blog

JSXで渡せるのは一つだけ。
XMLベースのため、hrなど閉じタグのないタグはエラーになる。

<div id="root"></div> <!-- 部品を表示 -->
    <script type="text/babel">
        (() =>{
            const name = "yamada";
            ReactDOM.render(
                <p>React, {name.toUpperCase()}</p>, document.getElementById('root')
            );
    })();
    </script>

React, YAMADA

複数の要素を渡す場合は、親要素で囲う

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React</title>
    <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div id="root"></div> <!-- 部品を表示 -->
    <script type="text/babel">
        (() =>{
            const name = "Yamada";
            ReactDOM.render(
                <div>
                    <p>React, {name.toUpperCase()}</p>
                    <p>{name.toLowerCase()}</p>
                </div>,
                document.getElementById('root')
            );
    })();
    </script>
</body>
</html>

React, YAMADA
yamada