Создание компонента в Reactjs с ES6

Другая форма, которая у тебя есть, чтобы создавать компонент stateless или "без состояния" - следующая:

import React from 'react'

export default function HelloWorldComponent () {

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

}

Здесь ты должен иметь в виду, как это будет осуществление твоего компонента.

Пример, который ты описываешь, - то, что известно в react как компонент презентации, из-за которого ты можешь использовать класс со строителем только. Даже ты не должен получать в наследство React.Component

import React from 'react';

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

export default HelloWorldComponent;

Это переводится в

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

Что sintáxis, вынесенный из-за react

Есть еще более простой sintáxis, который используя arrow functions

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

export default HelloWorldComponent;

Всегда остается традиционный выбор

import React from 'react';

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

export default HelloWorldComponent;

Что главным образом делает то же самое, что и все предыдущее, но с больше кодом и тяжелее для того, чтобы читать.

В случае, который был бы составляющим контейнером, важно, чтобы ты понял, что React.createClass он не ведет себя точно равно как extends React.Component. В этом случае ты должен звонить в super(props) в строителе и уже ты не нуждаешься в том, чтобы позвонить в componentWillMount так как строитель - управляющий этого шага.

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;

В ES5 функция React.createClass он поручает себе, что стоимость this будьте правильный в методах твоего компонента, однако extends React.Component он не делает это равным, которым ты имеешь два выбора

1. Ручной 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;
   

Ты можешь читать больше о двух типах компонентов в простых и умных компонентах и большей информации о том, что ты должен иметь в виду, когда ты используешь React и ES6.

С ES6 ты, должно быть, увеличиваешь Component. Твой пример в ES6 - asГ-:

import React from 'react';

class HelloWorldComponent extends React.Component {

    constructor(props) {
        super(props);
    }

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