设置React / Webpack / Babel并创建自定义组件

Question

我在这里设置了这个伟大的指导下一个非常简单的反应，和/的WebPack /巴贝尔项目- 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')
);

我已经在我的localhost-fab上获得了此渲染！

因此，我接下来要做的就是设置自己的组件，在与index.js相同的根目录下创建一个名为“ components”的文件夹，并创建一个名为“ testComponent.js”的文件，如下所示

import React from 'react';

export default class testComponent extends Component {

render() {

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

然后我通过导入组件并将其添加到render函数将其添加到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，我认为这是我的设置指南，但我不知道为什么会中断，我觉得我在某个地方缺少一步。

Answer 1

您的TestComponent脚本不会从“反应”中导入组件。 您需要将import语句更改为

import React, { Component } from 'react';

或者，您需要将“扩展组件”更改为“扩展React.Component”