英文:
Why is import React, ReactDOM not working
问题
In my index.js页面中，我有以下代码：
import React from "react";
import ReactDOM from "react-dom";
const page = (
<div>
<h1 className="header">This is JSX</h1>
<p>This is a paragraph</p>
</div>
)
console.log(page)
const container = document.getElementById("root");
ReactDOM.render(
page,
container
);
在我的index.html中，我有以下内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <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 src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> -->
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script src="index.js"></script>
</body>
</html>
如果要解决在本地主机上未呈现元素的问题，请取消注释以下代码：
<!-- <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 src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> -->
然后移除您的导入语句。
英文:
In my index.js page I have
import React from "react";
import ReactDOM from "react-dom";
const page = (
<div>
<h1 className="header">This is JSX</h1>
<p>This is a paragraph</p>
</div>
)
console.log(page)
const container = document.getElementById("root");
ReactDOM.render(
page,
container
);
In my index.html I'm having
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <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 src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> -->
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script src="index.js"></script>
</body>
</html>
Im not getting the elements rendered in my localhost.
It works if I uncomment
<!-- <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 src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> -->
and remove my imports.
Please help check in this issue.
答案1
得分: 2
这是一个关于如何在不使用Webpack、Rollup或Vite等打包工具的情况下，将React作为UMD使用的示例，同时使用了独立的Babel。
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<script
crossorigin
src="https://unpkg.com/react@16.14.0/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@16.14.0/umd/react-dom.development.js"
></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel" src="script.js"></script>
</body>
</html>
script.js:
const Page = () => (
<div>
<h1 className="header">This is JSX</h1>
<p>This is a paragraph</p>
</div>
);
const container = document.getElementById('root');
ReactDOM.render(<Page />, container);
英文:
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:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<script
crossorigin
src="https://unpkg.com/react@16.14.0/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@16.14.0/umd/react-dom.development.js"
></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel" src="script.js"></script>
</body>
</html>
script.js:
const Page = () => (
<div>
<h1 className="header">This is JSX</h1>
<p>This is a paragraph</p>
</div>
);
const container = document.getElementById('root');
ReactDOM.render(<Page />, container);
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论