Component creation in Reactjs with ES6

so it would be

import React from 'react';

class HelloWorldComponent extends React.Component {
    render() {
        return <div className="message">Hello World! </div>;
    }
}

Here you must take into account how the implementation of your component will be.

The example you describe is what is known in react as a presentation component so you can use a class with only one constructor. You don't even have to inherit fromReact.Component

import React from 'react';

class HelloWorldComponent {
  constructor() {
    return <div className="message">Hello World! </div>;
  }
}

export default HelloWorldComponent;

This translates to

var HelloWorldComponent = function() {
    return <div className="message">Hello World! </div>;
}

Which is a syntax supported by react

There is an even simpler syntax which is using arrow functions

var HelloWorldComponent = () =>  {
    return <div className="message">Hello World! </div>;
};

export default HelloWorldComponent;

There is always the traditional option

import React from 'react';

class HelloWorldComponent extends React.Component {
    render() {
        return <div className="message">Hello World! </div>;
    }
}

export default HelloWorldComponent;

Which basically does the same thing as everything above but with more code and harder to read.

In case it is a container component, it is important that you understand that it React.createClassdoes not behave exactly the same as extends React.Component. In this case you must call super(props)in the constructor and you no longer need to call componentWillMountsince the constructor is in charge of this step.

import React from 'react';
import Foo from './Foo'
import Bar from './Bar'

class HelloWorldComponent extends React.Component {
    constructor(props) {
        super(props);
        // Aquí pones todo lo que usualmente pondrías en componentWillMount
    }

    render() {
        return (
            <Foo />
            <Bar />
        );
    }
}

export default HelloWorldComponent;

In ES5 the function React.createClassensures that the value of thisis correct in the methods of your component, however it extends React.Componentdoes not do the same so you have two options

1. manual binding

   import React from 'react';
   import Foo from './Foo'
   import Bar from './Bar'
   
   class HelloWorldComponent extends React.Component {
       constructor(props) {
           super(props);
           this.metodo = this.metodo.bind(this);
       }
   
       metodo() {
           //haz algo con this
       }
   
       render() {
           return (
               <Foo />
               <Bar />
           );
       }
   }
   
   export default HelloWorldComponent;
   

2. Arrow functions

   import React from 'react';
   import Foo from './Foo'
   import Bar from './Bar'
   
   class HelloWorldComponent extends React.Component {
       constructor(props) {
           super(props);
       }
   
       metodo = () => {
           //haz algo con this
       }
   
       render() {
           return (
               <Foo />
               <Bar />
           );
       }
   }
   
   export default HelloWorldComponent;
   

You can read more about the two types of components in Simple and Smart Components and more about what to consider when using React and ES6 .

Another way you have to create a stateless or "stateless" component is the following:

import React from 'react'

export default function HelloWorldComponent () {

  return ( <div className="message">Hello World! </div> )

}

With ES6 you must extend a Component. Your example in ES6 is like this:

import React from 'react';

class HelloWorldComponent extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className='message'>Hello world!!</div>
        );
    }
}