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

Question

I'm setting up a really simple React / Webpack / Babel project following this great guide here - https://www.robinwieruch.de/minimal-react-webpack-babel-setup/

I'm off the ground with this in my 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')
);

I've got this rendering on my localhost - fab!

So what I wanted to do next is set up my own component, I created a folder in the same root as the index.js called 'components' and created a file called 'testComponent.js' which looks like this

import React from 'react';

export default class testComponent extends Component {

render() {

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

I then added this to my index.js by importing the component and adding it to the render function but this seems to break my app

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

I'd really like to play around with .jsx and I think this is the set up guide for me but I can't figure out why this breaks and I feel like I'm missing a step somewhere ..

Answer 1

Your TestComponent script doesn't import Component from 'react'. You need to either change the import statement to

import React, { Component } from 'react';

Or, you need to change "extends Component" to "extends React.Component"