React教程示例按钮无法显示，请求技术排查解决

我正在学习如何在页面中实现JavaScript逻辑，搭建个人网站时参照React教程添加Like按钮组件，但按钮无法正常显示。希望解决该问题，更好地理解React，为后续独立开发项目打下基础。

我的代码 #

app.js #

'use strict';

function LikeButton() {
  const [liked, setLiked] = React.useState(false);

  if (liked) {
    return 'You liked this!';
  }

  return React.createElement(
    'button',
    {
      onClick: () => setLiked(true),
    },
    'Like'
  );
}
const rootNode = document.getElementById('like-button-root');
const root = ReactDOM.createRoot(rootNode);
root.render(React.createElement(LikeButton));

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">
    <title>🌊J.tsunami's Personal Site</title>
</head>

<body>
    <table cellspacing="20">
        <tr>
            <td> <img src="https://media.licdn.com/dms/image/C5603AQEgipxU9UF6Ew/profile-displayphoto-shrink_800_800/0/1552332315908?e=2147483647&v=beta&t=fkKE_ioEoMDBtk_cPp1gFTzJWhwvWz7s28RM50rvFNg" alt="Jonathan Rodgers LinkedIn photo"></td>
            <td><h1>Jonathan Isaiah Rodgers</h1>
                <h2>Founder of Meta and Chat GPT/ Full-Stack Developer</h2>
                <p><em> As he dives in to a state <strong>deeper</strong> than instinct, <strong>there he finds</strong>...</em></p>
                <p>I am alumni of the University of California. I am an experienced Full-Stack Engineer. I am also a iOS and Web Developer. I love hamburger and beers too.</p></td>
        </tr>
    </table>

<hr>
<h3>MY fun side!</h3>
<div>Button Location:</div>
# **This is where I want to include the like button from the React tutorial**
<div id="like-button-root"></div>
<ul>
    <li><a href="https://github.com/jonnytsunami03">Tsunami Account</a></li>
    <li>Spicy Files</li>
    <li>So you want to learn how to code?</li>
    <li>Wishlist <i>check out this <em>link</em></i></li>
</ul>
<hr>
<table border="1px">
<thead>
<tr>
    <th>Dates</th>
    <th>Work</th>
</tr>
</thead>
<tbody>
    <tr>
        <td><strong>2022</strong></td>
        <td>Delivery Driver</td>
        <td>Summer Associate</td>
    </tr>
    <tr>
        <td><strong>2022</strong></td>
        <td>Outreach Coordinator</td>
    </tr>
</tbody>
</table>
<hr>
<h3>Education</h3>
<p>I attened UCLA as a Political Science Major with a concentration in International Relations and a minor in African American Studies</p>
<h3><a href="footage.html">My Hobbies</a></h3>
<ul>
    <li><a href="https://www.twitch.tv/jirodgers_">Streaming</a></li>
    <li><a href="https://www.youtube.com/channel/UCKizKQuqBnwegwZSZ8NEEFQ">Making videos</a></li>
    <li>Drinking Beer</li>
    <li>Hanging out with Friends, Attending music festivals</li>
</ul>
<hr>
<h3>Skills</h3>
<table cellspacing="10">
    <tbody>
        <tr>
            <td>Creative</td>
            <td>🌊🌊🌊🌊</td>
        </tr>
        <tr>
            <td>Delegating</td>
            <td>🌊🌊🌊</td>
        </tr>
        <tr>
            <td>Bootstrap 4</td> 
            <td>🌊🌊🌊🌊</td>
        </tr>
        <tr>
            <td>MERN</td>
            <td>🌊🌊🌊🌊</td>
        </tr>
    </tbody>
</table>
<hr>
<h3><a href="contact.html">Contact Me</a></h3>
<script src="https://unpkg.com/react@18/umd/project.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="like-button.js"></script>
</body>
</html>

问题解决方法 #

• 修复React CDN链接错误：当前引入的React脚本链接是https://unpkg.com/react@18/umd/project.min.js，这是错误的文件名，正确的开发环境链接应为https://unpkg.com/react@18/umd/react.development.js，生产环境可使用https://unpkg.com/react@18/umd/react.production.min.js。

• 统一脚本文件名：组件代码写在app.js中，但HTML里引入的是like-button.js，需将app.js重命名为like-button.js，或者将HTML中的<script src="like-button.js"></script>改为<script src="app.js"></script>。

• 清理HTML中的无效Markdown语法：页面里的# **This is where I want to include...**是Markdown语法，浏览器无法解析，会直接显示成文本。建议改为HTML注释<!-- 这里是要放置React Like按钮的位置 -->，或者用<p>标签包裹说明文字。

修改后刷新页面，Like按钮就能正常显示并工作了。

内容的提问来源于stack exchange，提问作者Jonathan Rodgers