設置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”