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

Question

我正在按照这个很棒的指南设置一个非常简单的 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 的同一根目录中创建了一个名为“components”的文件夹，并创建了一个名为“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，我认为这是适合我的设置指南，但我不知道为什么会中断，我觉得我在某个地方错过了一步 ..

Answer 1

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

import React, { Component } from 'react';

或者，你需要将“extends Component”改为“extends React.Component”