Как подключиться реагировать на html используя фразу jsx

Question

Спасибо, что прочитали это.

In React,

const name = 'test';
const element = <h1>Hello, {name}</h1>;
ReactDOM.render(element, document.getElementById('test'));

Между тем в html,

...
<div class="article-body">
    <!-- We will put our React component inside this div. -->
    <div id="test"></div>
    <!-- Load React. -->
    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

    <!-- Load our React component. -->
    <script src="test.js"></script>
    ...

я изменил коды с ReactJS

Это не работает, но возвращение 'Hello' работает нормально,
, что

const element = 'Hello';
ReactDOM.render(element, domContainer);

Что не так с jsx ???? Я что-то пропустил при использовании jsx?

Редактировать:
Я пробовал

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

, но не работает, либо "Hello", либо <h1>Hello</h1>.
Код реакции находится в test.jsx.

Answer 1

React не поставляется с транспортером JSX. Вам придется явно добавить его в свой проект. Babel - это один из таких переносчиков, который может помочь в понимании синтаксиса JSX.

Добавьте нижеприведенный скрипт babel в свой html файл

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

И окружите свой код типом text/babel как показано ниже -

 <script type="text/babel">
    const name = 'test';
    const element = <h1>Hello, {name}</h1>;
    ReactDOM.render(
      element,
      document.getElementById('root')
    );
 </script>

Это пример для примера - https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html