ReactDOM не отображает простой div

Я пытаюсь сделать простой div в главном html-файле с использованием метода визуализации ReactDOM, но div не отображается на экране, и исключений не возникает. Я делаю это неправильно?ReactDOM не отображает простой div

app.js:

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

ReactDOM.render(
    <h1> Hi! </h1>, document.getElementById('root') 
);

index.html:

<!doctype html> 
<html> 
    <head> 
    <title>Example</title> 
    </head> 
    <body> 
    <h1> Hello World! </h1> 
    <div id="root"></div> 
    </body> 
</html>

экран показывает только "Hello World!" h1 тег.

Я также использую webpack webpack dev сервер и Babel.

источник

2017-02-23 Einat Lugassy

Вы не включил 'app.js' файл в' index.html' –

Причина вы забыли включить файл bundle.js в html, добавьте эту строку в теле:

<script src = "bundle.js"></script>

Попробуйте это:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Example</title> 
    </head> 
    <body> 
     <h1> Hello World! </h1> 
     <div id="root"></div> 
     <script src = "bundle.js"></script> 
    </body> 
</html>

Вместо <!doctype html> использования <!DOCTYPE html>.

bundle.js: При запуске webpack, начинается процесс с точки входа определенной в webpack.config.js, он будет собирать все ваши файлы и создавать bundle файл. Вы должны указать, что bundle в файле html.

Примечание: измените путь и имя файла, если используете другое имя, кроме bundle.js.

Проверить этот ответ для определенного пользователя компонентов: Simple Component is not rendering: React js

источник

2017-02-23 08:44:48

ReactDOM не отображает простой div

ответ

Смежные вопросы