■ReactをCDNで利用
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>React</title>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
</head>
<body>
<h1>React</h1>
<div id="root">
<p>Loading...</p>
</div>
<script>
let dom = document.querySelector('#root');
let element = React.createElement(
'p', {}, 'Hello Rect!',
);
ReactDOM.render(element, dom);
</script>
</body>
</html>
なお、上記で読み込んでいるscriptは開発用のもの
本番環境では、以下のように圧縮されたファイルを読み込むといい
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
↓
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
■開発ツールスタンドアロン版
>npm install -g react-devtools
>react-devtools
以下のようなGUI画面が表示される
Add one of the following (click to copy).
<script src="http://localhost:8097"></script>
<script src="http://192.168.56.1:8097"></script>
to the top of the page you want to debug,
before importing React DOM.
作成したファイル内 <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> の直前に以下を追加する
<script src="http://localhost:8097"></script>
その後GUI画面を確認すると、開発ツールが表示されている
コマンドプロンプトで終了すると、開発ツールが終了される