React 新手，无法让 ReactDOM 渲染 javascript 组件

Question

我正在从 Maximilian Schwarzmüller 的 Udemy（React - 完整指南（包括 Hooks、React Router、Redux））学习 React。在课程内容 4.Writing 我们的第一个 React 代码中，Max 使用 codepen.io 导入 react 和 reactdom cdn 链接和 babel 预处理器。我没有使用 codepen.io。我正在通过我的元素标签之前的脚本标签导入 react 和 reactdom 和 babel 预处理器。但是，我得到了一个未捕获的语法和未捕获的引用错误。我的代码如下：-

HTML 代码如下

    <!DOCTYPE html>
    <html>
      <head>
        <link rel="stylesheet" type="text/css" href="./main.css">
      </head>
    <body>

       <div id="p1"></div>


       <div class="person">
       <h1>Akshar</h1>
       <p>Your Age: 27</p>
       </div>

       <script src="./app.js"></script>
       <script 
       src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/cjs/react.development.js"> 
       </script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/cjs/react-dom- 
      server.browser.development.js"></script>
      <script type="text/babel" src="https://cdnjs.cloudflare.com/ajax/libs/babel- 
      standalone/6.26.0/babel.js"></script>
        </body>
      </html>

CSS 代码如下：-

      .person {
      display: inline-block;
      margin: 10px;
      border: 1px solid #eee;
      box-shadow: 0 2px 2px #ccc;
      width: 200px;
      padding: 20px;
      }

app.js 代码如下：-

    import React from 'react';
    import ReactDOM from 'react-dom';

    function Person() {
    return (
    <div class="person">
    <h1>Max</h1>
    <p>Your Age: 28</p>
    </div>
     );
    }

    ReactDOM.render(<Person/>, document.querySelector('#p1'));

Answer 1

这里有几件事：

脚本的顺序很重要。浏览器停止加载并按照它找到它们的顺序处理您的脚本。 <script src="./app.js"></script> 应该在最后。 https://www.innoq.com/en/blog/loading-javascript/
当您从 CDN 使用 React 和 ReactDOM 时，它们将被添加到全局范围（在浏览器中为 window）。您不使用 import React from 'react'; 和 import ReactDOM from 'react-dom';。您只需要直接访问变量。 https://reactjs.org/docs/add-react-to-a-website.html

Check this link too.

React 新手，无法让 ReactDOM 渲染 javascript 组件

New to React and cannot get ReactDOM to render javascript component

reactjs

babeljs

react-dom