Saltar al contenido
MundoCursos

¿Cómo crear componentes en React?

¿Estás buscando cómo crear componentes en React? ¡No busques más! Hemos preparado una guía a fondo en la que te vamos a enseñar paso a paso cómo puedes hacerlo.

Lo que te sorprenderá, en especial si llevas poco tiempo trabajando con React, es descubrir que hay distintas maneras de desarrollar componentes. En las próximas líneas te explicaremos los sistemas principales y te pondremos en contexto respecto a su uso. ¿Preparado para elegir tu sistema preferido y comenzar a crear tus propios componentes?

1. Con el sistema createClass

Tradicionalmente es la versión más clásica de la creación de componentes en React. Con el tiempo se han ido introduciendo otras de las ideas que te explicamos después, pero esta todavía sigue siendo la más famosa.

Eso ha derivado en que también sea el sistema que se suele explicar en la mayoría de guías. Así que no te extrañe que, si has buscado con anterioridad, solo se te haya informado de esta opción.

Aquí vas a crear un componente por medio del uso de ES5 (ECMAScript 5) con createClass. La estructura que tienes que utilizar es la que sigue:

var TuComponente = React.createClass({

  propTypes: {...},

  getDefaultProps: {...},

  getInitialState: function () {...},

  render: function () {...}

});

En este código te tienes que fijar en varios elementos presentes, como la función de estado inicial, el sistema render, los props por defecto que utilizarás. Tendrás que completar cada una de las funciones con los valores que necesites dependiendo del proyecto en el que estés trabajando.

¿Te gustaría aumentar tus conocimientos en React?

Está claro que ser autodidacta es una de las mejores cualidades que podría tener cualquier aprendiz de programación.

No obstante, si quieres acelerar al máximo tu aprendizaje, te recomendamos que veas esta guía para elegir el mejor curso de React del mercado para ti.

2. Con classes a partir de ECMAScript 6

En la segunda de las opciones ya hacemos uso de ES6 (ECMAScript 6), comúnmente conocido también como ECMAScript 2015 porque se lanzó en ese año (o ES15), lo que supone introducir el uso de classes. Supone la simplificación del proceso, aunque tiene sus propios aspectos positivos y negativos que todavía llevan a que haya usuarios que prefieren el método tradicional.

Como verás en el código, se utiliza React.Component y una sintáxis basada en el uso de las clases. Primero llevas a cabo la implementación del estado inicial, incorporas el sistema render que ya conoces y dejas las props fuera de las clases.

class TuComponente extends React.Component {

  constructor (props) {

     super(props);

     this.state = {...};

  }

  render () {...}

}

TuComponente.propTypes = {...};

TuComponente.defaultProps = {...};

3. Con el uso de versiones más nuevas de ES

Hoy día tanto ECMAScript 5 como la versión 6 han quedado muy atrás a la vista de todas las actualizaciones que se han lanzado.

Si bien se siguen usando, es justo recomendar que se haga uso de otras versiones de ES para obtener más beneficios.

Versión a versión se han ido realizando ajustes que benefician a que la creación de componentes en React sea más sencilla.

React JS componentes de clase

Con ES7 se incorporaron los inicializadores de propiedad, los cuales se pueden usar en las props, tanto en las proptypes como en las defaultprops, para añadirlas a la clase. La flexibilidad que aporta es tal que también se da la opción de usar los Property Initialiazers con el estado inicial.

El código resultante sería el siguiente, pero piensa que hay muchas variantes teniendo en cuenta otros añadidos que se han ido incorporando. Si tienes ocasión es recomendable que profundices en ES y lo que te puede aportar en la creación de componentes de React.

class TuComponente extends React.Component {

  static propTypes = {...}

  static defaultProps = {...}

  state = {...}

  constructor (props) {

    super(props);

  }

  render () { ... }

}

4. A modo de función

Por derecho propio, se ha transformado en uno de los métodos más utilizados.

Aunque hay situaciones en las que no se puede usar, en el resto de los casos acaba siendo la opción por la que optan la mayoría de los especialistas en React.

Uno de los motivos por los que se opta por este método es porque mejora el rendimiento de las aplicaciones.

React JS componentes de función

Se ahorra en carga y aumenta la flexibilidad de la programación. Eso sí, ten en cuenta que, como decíamos, no es un sistema para todas las ocasiones. Solo se puede sacar partido de él cuando el componente no tiene estado o cuando se trata de uno representacional.

El componente se genera definiéndolo a modo de función, así que no tiene estado, sino que se usa el sistema render para generarlo. Es una buena idea por la mejora de rendimiento que ofrece y esto ha llevado a que se transforme en un estándar muy sólido. Utilízalo de la siguiente manera:

const TuComponente = function (props) {

return (...);

};

También puedes modificar el código y ampliarlo con capacidades adicionales procedentes de ES2015, como es el caso de distintas props así:

const TuComponente = ({prop1, prop2 }) => (...);

¿Cuál de los cuatro métodos es más recomendable?

Para aumentar tu versatilidad trabajando con React, te diremos que es recomendable que pruebes los cuatro sistemas para ver cuál encaja mejor con tu filosofía de trabajo y costumbres. De todas formas, como te hemos mencionado antes, hacer el componente como una función es un método que se está utilizando mucho, al menos si no vas a darle ningún estado.

En los demás casos es preferible que recurras a una de las iniciativas con ECMAScript, eligiendo la que mejor te venga en base a sus funciones y elementos. La de ES6 suele ser la más usada por su rendimiento y efectividad, pero no dejes de explorar el resto de las opciones.