@gitfuku62 (fuku 62)posted at 2022-07-21

React CDNの導入ができない問題。

Q&A

React CDNの使用方法

例）
reactの学習でCDNを使用したいと思っていたのですが、うまくいきません。
エラーが発生しているわけではなくreactが機能できていません。
例）

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>React app</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">wait...</div>
</body>
<script>
    let dom = docment.querySelector("#root");
    let docment = React.createElement("p", {}, "hello world");
    ReactDOM.render(element, dom);
</script>

</html>

自分で試したこと

reactの入門書で学習していて同じコードを打っていますが、全くreactが反応されていません。
react developer Toolsを導入したのですが、このファイルだけreactが使用されていないため使用できません。のメッセージを確認しました。
どうすれば良いでしょうか。ご教授お願いいたします。本当に困ってます。

1Answer

@Verclene posted at 2022-07-21

JavaScript

-   let dom = docment.querySelector("#root");
+   let dom = document.querySelector("#root");
-   let docment = React.createElement("p", {}, "hello world");
+   let element = React.createElement("p", {}, "hello world");
    ReactDOM.render(element, dom);

こんくらいChrome DevTools使えばすぐ間違いに気づけます.
というよりその入門書の内容をよく読めばこんな質問してないと思います.

ついでですが,React18においてはReactDOM.renderはno longer supportedとなってます.
1～2年前の書籍であっても既に相当古い内容になっていることも多いので,必ず公式ドキュメントには目を通しましょう.

2Like

Comments

@gitfuku62
Questioner
タイプミスだったんですね。
こんな質問にお時間取らせてしまい申し訳ございません。
書籍は2年前のものでした。まだ読み始めなんですが、読むだけ時間の無駄ですか？
ご参考までにご教示をお願いいたします。

Are you sure you want to delete the question?