前提
Reactインストール済
Goodle Chrome Reactの拡張機能追加
React Developer Toolsをインストールしていきます。
上記のリンクの右上のChromeに追加を押します。
その後、ブラウザ右上のReact Developer Toolsを右クリックし、「拡張機能」をクリック。
「ファイルのURLへのアクセスを許可する」をONにする。
ディレクトリ作成
適当な場所に、React_projectsというディレクトリを作成し、index.htmlファイルを作成します。
このindex.htmlをエディタで開き書き込んで行きます。
Reactのスクリプトを読み込む
index.htmlをエディタで開きTry Reactのhtmlの一部を使い下記のように書き込みます。
scriptが使う部分です。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>React Practice</title>
<link rel="stylesheet" href="css/styles.css">
<!-- React本体-->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- Reactの結果をDOMに反映していくライブラリ-->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- バベルライブラリ-->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<script type="text/babel">
</script>
</body>
</html>
上記のようにできたらbodyをこのようにします。
<body>
<div id="root"></div>
<script type="text/babel">
(() => {
ReactDOM.render(
<p>Hello, World!!</p>,
document.getElementById('root')
)
})();
</script>
</body>
これをブラウザで表示すると、
このように表示できたと思います。