ReactでHello Worldする最速の手順

node.jsやbabel、webpackを導入しなくても、Reactできますよ。

ReactでHello Worldする

HTMLファイルを作ります。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
</body>
</html>

<head>~</head>に次のタグを追加して、reactのライブラリを読み込みます。

<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>

<body>~</body>に次のタグを追加します。

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

ここに、reactで作成した”Hello, world!”の文字を表示します。

最後に、JavaScriptのコードを記述します。

<script>
    ReactDOM.render(
        React.createElement('h1', {}, "Hello, world!"),
        document.getElementById('root')
    );
</script>

HTML全体は次のようになります。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/react@15/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        ReactDOM.render(
            React.createElement('h1', {}, "Hello, world!"),
            document.getElementById('root')
        );
    </script>
</body>
</html>

ブラウザでHTMLファイルを開くと、”Hello, world!”の文字が表示されます。

JSXを使う

JSXを使う場合は、babelも必要になります。

<head>~</head>に次のタグを追加します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.js"></script>

<script>~</script>を次のように書き換えます。
scriptタグのtype属性を忘れずに。

<script type="text/babel">
    ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('root') );
</script>

ブラウザでHTMLファイルを開くと、”Hello, world!”の文字が表示されます。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/react@15/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('root') );
    </script>
</body>
</html>

この記事が役に立ったら、この本↓もおすすめです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です