React.js技术疑问：VS Studio编写代码后浏览器无法显示HTML内容

看了你的截图，我能找出几个新手常踩的坑，咱们一步步来解决：

1. 没引入React核心依赖 #

React得靠react和react-dom这俩库才能跑起来，你得在HTML里先把它们的CDN链接加上，而且要放在自己写的脚本前面：

<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>

要是以后上生产环境，记得把development.js换成production.js版本，体积更小也更稳定。

2. JSX需要Babel转译，脚本标签得加类型 #

你写的<h1>Hello React!</h1>这种JSX语法，浏览器本身是看不懂的，得用Babel转成普通JS才行。所以你的脚本标签要加上type="text/babel"，同时还要引入Babel的CDN：

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
  // 你的React代码放这儿
</script>

3. React 18的渲染方式变了，别用旧写法啦 #

你截图里用的ReactDOM.render()是React 17及以前的写法，React 18已经改用createRoot了，正确的代码应该是这样：

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello React!</h1>);

旧写法虽然可能还能跑，但会有警告，而且以后可能不支持了，趁早换成新的更稳妥。

4. 确认页面里有挂载用的根元素 #

别忘了在HTML里加一个id为root的容器，React要把内容挂载到这个元素上：

<div id="root"></div>

要是没有这个元素，React就算渲染了也没地方放呀。

最后一招：看浏览器控制台找报错 #

按F12打开开发者工具，切到Console标签看看有没有红报错。比如要是看到"React is not defined"，那肯定是没把React库引对；要是有JSX相关的错误，那就是Babel没配置好。

按这些步骤调整完，应该就能看到你的React内容啦！

内容的提问来源于stack exchange，提问作者Rima Paškevičiūtė