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>
この記事が役に立ったら、この本↓もおすすめです。
