Рендеринг текста с тегом заголовка - PullRequest
Новая
       22

Рендеринг текста с тегом заголовка

1 голос
/ 20 апреля 2020

Я новичок в React, и у меня запутанная ситуация.

Я пытаюсь отобразить тег H1 с помощью ReactDOM, но закрывающий тег заголовка продолжает превращаться в строку.

Это мой код 

<!DOCTYPE html>
<html>
<head>
    <title> React Project</title>
    <script src="https://unpkg.com/react@16.7.0/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.development.js"></script>


</head>
<body>

    <div id="root"></div>
    <script type="text/javascript">
        ReactDOM.render(
        <h1>Hello World</h1>,   
        document.getElementById("root")
        );

    </script>

</body>
</html>

Код на SublimeText выглядит следующим образом:

введите описание изображения здесь

Ошибка is [Uncaught SyntaxError: неожиданный токен '<'] </p>

Я пытался использовать Constant в качестве React Официальный сайт предлагает, 

ReactDOM.render(
                 const element = <h1>Hello, world</h1>;
                document.getElementById("root")
                )

;

Но результат тот же.

Так что мне делать в этом случае?

Ответы [ 2 ]

0 голосов
/ 20 апреля 2020

Вам также необходимо использовать препроцессор JS для понимания формата JSX, например Babel 

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/react@16.7.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.development.js"></script>
<div id="root"></div>
<script type="text/babel">
  ReactDOM.render( 
    <h1> Hello World </h1>,   
    document.getElementById("root")
  );
</script>
0 голосов
/ 20 апреля 2020

Ваш тег <script> сообщает браузеру, что это Javascript, но на самом деле это JSX. Вам нужно перенести JSX с чем-то вроде Бабеля. Попробуйте инструкцию , которую можно найти здесь . 

<!DOCTYPE html>
<html>
<head>
  <title> React Project</title>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script src="https://unpkg.com/react@16.7.0/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.development.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    ReactDOM.render(
      <h1>Hello World</h1>,   
      document.getElementById("root")
    );
  </script>
</body>
</html>

Пожалуйста, прочитайте эту страницу, чтобы узнать больше .

...