Стартер & ldquo; Hello World & rdquo; Реактный проект дает пустую страницу

Ваше заявление на импорт неверно. При использовании локального импорта вы должны указать расширение файла.

Изменить

import HelloWorld from './HelloWorld';

на

import HelloWorld from './HelloWorld.jsx';

РЕДАКТИРОВАТЬ: Как указывает BoyWithSilverWings, приложение никогда не отображалось в DOM , Вы должны сделать этот шаг. Вот код из примера HelloWorld, из которого вы извлекли:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

Когда вы переместили это в индексный файл, вы удалили вызов рендеринга.

Итак, несколько вещей:

Прежде всего, измените имя вашего корневого компонента с index на Index. Реактивные компоненты должны начинаться с заглавной буквы.

Затем, вы должны использовать ReactDOM.render() на корневом уровне. Это то, что фактически инициирует процесс рендеринга и согласования всех подкомпонентов.

import React,{ Component } from 'react';
import ReactDOM from 'react-dom';

import HelloWorld from './HelloWorld';

class Index extends Component {
  render() {
    return (
      <div className="index">
        <HelloWorld name="Mark" />
      </div>
    );
  }
}

ReactDOM.render(<Index />, document.getElementById("app"));

Обратите внимание, что вам также нужен файл index.html с div в теле с атрибутом id, который соответствует селектору выше (в этом примере «app»).