Setting up React / Webpack / Babel and creating custom components

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 ..

jtylerm · Accepted Answer · 2019-05-07 20:20:40Z

3

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"

answered May 7, 2019 at 20:20

jtylerm

4724 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Setting up React / Webpack / Babel and creating custom components

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related