Question

我正在遵循此出色指南-https://www.robinwieruch.de/minimal-react-webpack-babel-setup/

来建立一个非常简单的React / Webpack / Babel项目

我在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')
);

我已经在我的本地主机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”

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

1 个答案: