Настройка React / Webpack / Babel и создание пользовательских компонентов - PullRequest
Новая
       15

Настройка React / Webpack / Babel и создание пользовательских компонентов

0 голосов
/ 07 мая 2019

Я настраиваю действительно простой проект React / Webpack / Babel, следуя этому замечательному руководству - https://www.robinwieruch.de/minimal-react-webpack-babel-setup/

Я не в курсе этого в моем index.js 

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

const title = 'My Minimal React Webpack Babel Setup';

ReactDOM.render(
  <div>
    {title}
    <p>Another test</p>
  </div>,
  document.getElementById('app')
);

У меня есть этот рендеринг на моем локальном хосте - потрясающе!

Итак, что я хотел сделать дальше, это настроить свой собственный компонент, я создал папку в том же корне, что и index.js под названием «компоненты», и создал файл с именем «testComponent.js», который выглядит следующим образом 

import React from 'react';

export default class testComponent extends Component {

render() {

  return (
      <div>
          Test component
      </div>
    )
  }
}

Затем я добавил это в свой index.js, импортировав компонент и добавив его в функцию рендеринга, но, похоже, это сломало мое приложение 

import React from 'react';
import ReactDOM from 'react-dom';
import TestComponent from './components/testComponent';

const title = 'My Minimal React Webpack Babel Setup';

ReactDOM.render(
  <div>
    {title}
    <p>Another test</p>
    <TestComponent />
  </div>,
  document.getElementById('app')
);

Мне бы очень хотелось поиграться с .jsx, и я думаю, что это руководство по настройке для меня, но я не могу понять, почему это происходит, и я чувствую, что где-то пропускаю шаг ...

1 Ответ

3 голосов
/ 07 мая 2019

Ваш скрипт TestComponent не импортирует Компонент из «реакции».Вам нужно либо изменить оператор импорта на 

import React, { Component } from 'react';

Или вам нужно изменить «extends Component» на «extends React.Component»

...