为什么 import React, ReactDOM 不起作用

huangapple
go评论103阅读模式
英文:

Why is import React, ReactDOM not working

问题

In my index.js页面中，我有以下代码：

  1. import React from "react";
  2. import ReactDOM from "react-dom";
  4. const page = (
  5.     <div>
  6.         <h1 className="header">This is JSX</h1>
  7.         <p>This is a paragraph</p>
  8.     </div>
  9. )
  10. console.log(page)
  11. const container = document.getElementById("root");
  12. ReactDOM.render(
  13.     page,
  14.     container
  15. );

在我的index.html中，我有以下内容：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <!-- <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  9.     <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  10.     <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> -->
  12.     <title>Document</title>
  13. </head>
  15. <body>
  16.     <div id="root"></div>
  17.     <script src="index.js"></script>
  18. </body>
  20. </html>

如果要解决在本地主机上未呈现元素的问题，请取消注释以下代码：

  1. <!-- <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  2. <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  3. <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> -->

然后移除您的导入语句。

英文:

In my index.js page I have

  1. import React from &quot;react&quot;;
  2. import ReactDOM from &quot;react-dom&quot;;
  4. const page = (
  5.     &lt;div&gt;
  6.         &lt;h1 className=&quot;header&quot;&gt;This is JSX&lt;/h1&gt;
  7.         &lt;p&gt;This is a paragraph&lt;/p&gt;
  8.     &lt;/div&gt;
  9. )
  10. console.log(page)
  11. const container = document.getElementById(&quot;root&quot;);
  12. ReactDOM.render(
  13.     page,
  14.     container
  15. );

In my index.html I'm having

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  4. &lt;head&gt;
  5.     &lt;meta charset=&quot;UTF-8&quot;&gt;
  6.     &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
  7.     &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  8.     &lt;!-- &lt;script crossorigin src=&quot;https://unpkg.com/react@18/umd/react.development.js&quot;&gt;&lt;/script&gt;
  9.     &lt;script crossorigin src=&quot;https://unpkg.com/react-dom@18/umd/react-dom.development.js&quot;&gt;&lt;/script&gt;
  10.     &lt;script src=&quot;https://unpkg.com/babel-standalone@6/babel.min.js&quot;&gt;&lt;/script&gt; --&gt;
  12.     &lt;title&gt;Document&lt;/title&gt;
  13. &lt;/head&gt;
  15. &lt;body&gt;
  16.     &lt;div id=&quot;root&quot;&gt;&lt;/div&gt;
  17.     &lt;script src=&quot;index.js&quot;&gt;&lt;/script&gt;
  19. &lt;/body&gt;
  21. &lt;/html&gt;

Im not getting the elements rendered in my localhost.
It works if I uncomment
&lt;!-- &lt;script crossorigin src=&quot;https://unpkg.com/react@18/umd/react.development.js&quot;&gt;&lt;/script&gt;
&lt;script crossorigin src=&quot;https://unpkg.com/react-dom@18/umd/react-dom.development.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://unpkg.com/babel-standalone@6/babel.min.js&quot;&gt;&lt;/script&gt; --&gt;

and remove my imports.

Please help check in this issue.

答案1

得分: 2

这是一个关于如何在不使用Webpack、Rollup或Vite等打包工具的情况下，将React作为UMD使用的示例，同时使用了独立的Babel。

index.html:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <title>Home</title>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width" />
  7.     <script
  8.       crossorigin
  9.       src="https://unpkg.com/react@16.14.0/umd/react.development.js"
  10.     ></script>
  11.     <script
  12.       crossorigin
  13.       src="https://unpkg.com/react-dom@16.14.0/umd/react-dom.development.js"
  14.     ></script>
  15.     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  16.   </head>
  17.   <body>
  18.     <div id="root"></div>
  19.     <script type="text/babel" src="script.js"></script>
  20.   </body>
  21. </html>

script.js:

  1. const Page = () => (
  2.   <div>
  3.     <h1 className="header">This is JSX</h1>
  4.     <p>This is a paragraph</p>
  5.   </div>
  6. );
  8. const container = document.getElementById('root');
  9. ReactDOM.render(<Page />, container);

stackblitz

英文:

It seems you want to use React as a UMD with Babel standalone and without any bundle tools like Webpack, Rollup, and Vite.

A working example using react@16.14.0

index.html:

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  3.   &lt;head&gt;
  4.     &lt;title&gt;Home&lt;/title&gt;
  5.     &lt;meta charset=&quot;UTF-8&quot; /&gt;
  6.     &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot; /&gt;
  7.     &lt;script
  8.       crossorigin
  9.       src=&quot;https://unpkg.com/react@16.14.0/umd/react.development.js&quot;
  10.     &gt;&lt;/script&gt;
  11.     &lt;script
  12.       crossorigin
  13.       src=&quot;https://unpkg.com/react-dom@16.14.0/umd/react-dom.development.js&quot;
  14.     &gt;&lt;/script&gt;
  15.     &lt;script src=&quot;https://unpkg.com/@babel/standalone/babel.min.js&quot;&gt;&lt;/script&gt;
  16.   &lt;/head&gt;
  17.   &lt;body&gt;
  18.     &lt;div id=&quot;root&quot;&gt;&lt;/div&gt;
  19.     &lt;script type=&quot;text/babel&quot; src=&quot;script.js&quot;&gt;&lt;/script&gt;
  20.   &lt;/body&gt;
  21. &lt;/html&gt;

script.js:

  1. const Page = () =&gt; (
  2.   &lt;div&gt;
  3.     &lt;h1 className=&quot;header&quot;&gt;This is JSX&lt;/h1&gt;
  4.     &lt;p&gt;This is a paragraph&lt;/p&gt;
  5.   &lt;/div&gt;
  6. );
  8. const container = document.getElementById(&#39;root&#39;);
  9. ReactDOM.render(&lt;Page /&gt;, container);

stackblitz

huangapple
  • 本文由 发表于 2023年5月13日 10:40:16
  • 转载请务必保留本文链接：https://go.coder-hub.com/76240862.html
  • babeljs
  • javascript
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定