React js не отображает привет, мир

<!DOCTYPE html>
<html lang = "en">
    <head>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    </head>
    <body>
        <div class="root"></div>
        <script type="text/babel">
            ReactDOM.render(
                    <h1>Hello,World!</h1>,
                    document.getElementById('root')
            );
        </script>
    </body>
</html>

Приведенный выше код создает только пустую страницу, глядя на консоль, я не вижу никаких ошибок.


reactjs javascript react-dom
person Bipul Adh    schedule 03.12.2017    source источник

Ответы (2)


arrow_upward
2
arrow_downward

У вашего элемента есть class с именем root. Вам нужен элемент с id под названием root:

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

ДЕМО

РЕДАКТИРОВАТЬ: вам также нужно будет добавить модуль babel-standalone (см. предыдущий ответ SO).

person Andy    schedule 03.12.2017
comment
изменил его на «id». Все равно никакого эффекта. На самом деле причина, по которой я обратился к классу, заключалась в том, чтобы поэкспериментировать с различными настройками, поскольку id не работал в первую очередь. - person Bipul Adh; 03.12.2017
comment
Если вы посмотрите на демо, оно работает. Что-то еще идет не так. Вы получаете какие-либо ошибки в консоли? Как вы транспилируете это? Вы используете веб-пакет или какие-то другие средства? - person Andy; 03.12.2017
comment
Мой фрагмент отлично работает с codepen, но не работает в моем локальном браузере. - person Bipul Adh; 03.12.2017
comment
Полезна ли эта ссылка? Похоже, вам также может понадобиться включить скрипт babel-standalone. - person Andy; 03.12.2017
comment
ты настоящий mvp. - person Bipul Adh; 03.12.2017

arrow_upward
0
arrow_downward

Вы сказали document.getElementById('root'), но ваш элемент — это класс. Ваш элемент должен иметь идентификатор корня: <div id="root"></div>.

person Ricky Nelson    schedule 03.12.2017