refirio.org

Memo

■簡易な開発
■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画面を確認すると、開発ツールが表示されている
コマンドプロンプトで終了すると、開発ツールが終了される
Memo

Advertisement
