Por ejemplo la creación de este componente en Reactjs como sería con EcmaScript6?
var HelloWorldComponent = React.createClass({
render: function() {
return <div className="message">Hello World! </div>
}
})
Stack Overflow en español es un sitio de preguntas y respuestas para programadores y profesionales de la informática. Solo te toma un minuto registrarte.
Regístrate para unirte a esta comunidadAsí seria
import React from 'react';
class HelloWorldComponent extends React.Component {
render() {
return <div className="message">Hello World! </div>;
}
}
Aquí debes tener en cuenta como será la implementación de tu componente.
El ejemplo que describes es lo que se conoce en react como un componente de presentación por lo que puedes usar una clase con un constructor solamente. Ni siquiera tienes que heredar de React.Component
import React from 'react';
class HelloWorldComponent {
constructor() {
return <div className="message">Hello World! </div>;
}
}
export default HelloWorldComponent;
Esto se traduce a
var HelloWorldComponent = function() {
return <div className="message">Hello World! </div>;
}
Lo cual es una sintáxis soportada por react
Hay una sintáxis aún mas simple que es usando arrow functions
var HelloWorldComponent = () => {
return <div className="message">Hello World! </div>;
};
export default HelloWorldComponent;
Siempre queda la opción tradicional
import React from 'react';
class HelloWorldComponent extends React.Component {
render() {
return <div className="message">Hello World! </div>;
}
}
export default HelloWorldComponent;
Lo cual básicamente hace lo mismo que todo lo anterior pero con más código y más difícil de leer.
En caso que sea un componente contenedor es importante que entiendas que React.createClass
no se comporta exactamente igual que extends React.Component
. En este caso debes llamar a super(props)
en el constructor y ya no necesitas llamar a componentWillMount
pues el constructor es el encargado de este paso.
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;
En ES5 la función React.createClass
se encarga que el valor de this
sea el correcto en los métodos de tu componente, sin embargo extends React.Component
no lo hace igual por lo que tienes dos opciones
Binding manual
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;
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;
Puedes leer más sobre los dos tipos de componentes en componentes simples e inteligentes y más información sobre lo que debes tener en cuenta cuando uses React y ES6.
Otra forma que tienes para crear un componente stateless o "sin estado" es la siguiente:
import React from 'react'
export default function HelloWorldComponent () {
return ( <div className="message">Hello World! </div> )
}
Con ES6 debes de extender a Component
. Tu ejemplo en ES6 es así:
import React from 'react';
class HelloWorldComponent extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className='message'>Hello world!!</div>
);
}
}