CDNを使ってReact.jsを動かす手順
CDNとはContent Delivery Networkの略で、WebサイトやWebアプリケーションのコンテンツをユーザーに配信するためのネットワークです。
CDNでReact.jsを動かすメリット
CDNを使うと、Node.jsなどをPCにインストールせずにReact.jsを使ったWebサイトやWebアプリケーションを開発することができます。Node.jsがよくわからない方にとっては、この方法でReact.jsを手っ取り早く動かすのが1番スムーズかもしれません。
ただし、本番環境でReact.jsのCDNを使うのは、動作パフォーマンスの面からオススメしません。
CDNを設置する手順
React.jsではJSXという書き方でプログラムのコードを書きますが、これがHTMLではもちろん動きません。そこで、React.js用の2つのCDNと、JSXをJavaScriptに翻訳するBabelというプログラムのCDN、計3つのscriptタグを設置するのがポイントになります。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const App = () => (
<div>Hello World</div>
);
ReactDOM.render(<App />, document.getElementById("root"));
</script>
</body>
</html>