Никаких исключений при выполнении кода в react js, но не получении ожидаемого результата

#javascript #node.js #reactjs #webpack

#javascript #node.js #reactjs #webpack

Вопрос:

Я совершенно сбит с толку при запуске программы Hello world в react js с помощью webpack

пожалуйста, найдите ниже вложение для структуры проекта

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

Когда я выполняю npm run dev команду из cli, браузер запускается, но index.js значение не отображается, совершенно не уверен, что не так, поскольку я не вижу никаких исключений в коде ни в cmd, ни в консоли браузера

К вашему СВЕДЕНИЮ:

index.js

 import React from 'react';
import {render} from 'react-dom';

class App extends React.Component {

  render () {
      return
       <div>
        <p>Hello, World!</p>;
        <h1>Hell yay !!</h1>
       </div>;
  }
}

render(<APP /> , document.getElementById("app"))
 

и index.html

 <html>
 <head>
 <meta charset="utf-8">
 <title>React.js using NPM, Babel6 and Webpack</title>
 </head>
 <body>
 <div id="app" />
 <script src="build/bundle.js" type="text/javascript"></script>
 </body>
</html>
 

Комментарии:

1. Это render(<APP /> то, что у вас на самом деле есть в вашем коде? Разве это не должно быть <App /> ?

2. @codecubed. io да, но это должно вызвать a ReferenceError . Я думаю, что есть проблема в bundle.js

3. Вы перестроили свое приложение?

4. Я изменил «render (<APP />» на «render (<App />», перестроил и запустил, затем в консоли браузера увидел ошибку.. «ПРИЛОЖЕНИЕ» не определено

5. Теперь он работает с вашим предложенным решением codecubed. io спасибо 🙂

Ответ №1:

Является ли render (тем, что у вас на самом деле есть в вашем коде? Разве это не должно быть? — codecubed.io прокомментировал выше.

После выполнения этого предложения оно сработало, заслуга переходит к ‘codecubed.io’ Еще раз спасибо 🙂