Componentes React

Los componentes son como funciones que devuelven elementos HTML.

Los componentes son trozos de código independientes y reutilizables.Sirven para el mismo propósito que las funciones de JavaScript, pero trabajan de forma aislada y devuelven HTML a través de una función render().

Los componentes son de dos tipos, componentes de clase y componentes de función, en este tutorial nos centraremos en los componentes de clase.

Crear un componente de clase

Cuando se crea un componente React, el nombre del componente debe comenzar con una letra mayúscula.

El componente tiene que incluir la declaración extends React.Component, esta declaración crea una herencia a React.Component, y le da a tu componente acceso a las funciones de React.Component.

El componente también requiere un método render(), este método devuelve HTML.

Ejemplo

Crea un componente Class llamado Car

class Car extends React.Component { render() { return <h2>Hi, I am a Car!</h2>; }}

Ahora tu aplicación React tiene un componente llamado Car, que devuelve un elemento <h2>.

Para utilizar este componente en tu aplicación, utiliza una sintaxis similar a la del HTML normal:<Car />/p>

Ejemplo

Muestra el componente Car en el elemento «raíz»:

ReactDOM.render(<Car />, document.getElementById('root'));

Ejecuta el ejemplo «

Crea un componente Function

Aquí tienes el mismo ejemplo anterior, pero creado utilizando un componente Function en su lugar.

Un componente Function también devuelve HTML, y se comporta prácticamente igual que un componente Class, pero los componentes Class tienen algunos añadidos, y serán preferidos en este tutorial.

Ejemplo

Crea un componente Function llamado Car

function Car() { return <h2>Hi, I am also a Car!</h2>;}

De nuevo tu aplicación React tiene un componente Car.

Refiérete al componente Coche como si fuera HTML normal (salvo que en React los componentes deben empezar por una letra mayúscula):

Ejemplo

Muestra el componente Car en el elemento «raíz»:

ReactDOM.render(<Car />, document.getElementById('root'));

Ejecuta el ejemplo «

Constructor del componente

Si hay una función constructor() en tu componente, esta función será llamada cuando se inicie el componente.

La función constructora es donde se inician las propiedades del componente.

En React, las propiedades del componente deben guardarse en un objeto llamadostate.

Aprenderás más sobre state más adelante en este tutorial.

La función constructora es también donde se honra la herencia del componente padre al incluir la declaración super(), que ejecuta la función constructora del componente padre, y su componente tiene acceso a todas las funciones del componente padre (React.Component).

Ejemplo

Crea una función constructora en el componente Car, y añade una propiedad de color:

class Car extends React.Component { constructor() { super(); this.state = {color: "red"}; } render() { return <h2>I am a Car!</h2>; }}

Usa la propiedad de color en la función render():

Ejemplo

class Car extends React.Component { constructor() { super(); this.state = {color: "red"}; } render() { return <h2>I am a {this.state.color} Car!</h2>; }}

Ejecuta el ejemplo «

Props

Otra forma de manejar las propiedades de los componentes es utilizando props.

Las props son como argumentos de funciones, y las envías al componente como atributos.

Aprenderás más sobre props en el próximo capítulo.

Ejemplo

Utiliza un atributo para pasar un color al componente Coche, y utilízalo en la función render():

class Car extends React.Component { render() { return <h2>I am a {this.props.color} Car!</h2>; }}ReactDOM.render(<Car color="red"/>, document.getElementById('root'));

Ejemplo de ejecución»

Componentes en componentes

Podemos hacer referencia a componentes dentro de otros componentes:

Ejemplo

Utiliza el componente Coche dentro del componente Garaje:

class Car extends React.Component { render() { return <h2>I am a Car!</h2>; }}class Garage extends React.Component { render() { return ( <div> <h1>Who lives in my Garage?</h1> <Car /> </div> ); }}ReactDOM.render(<Garage />, document.getElementById('root'));

Ejecuta el Ejemplo «

Componentes en Archivos

React trata de reutilizar el código, y puede ser inteligente insertar algunos de tus componentes en archivos separados.

Para ello, crea un nuevo archivo con extensión .js y pon el código dentro de él:

Nota que el archivo debe comenzar importando React (como antes), y tiene que terminar con la sentencia exportar Car por defecto;.

Ejemplo

Este es el nuevo archivo, lo llamamos «App.js»:

import React from 'react';import ReactDOM from 'react-dom';class Car extends React.Component { render() { return <h2>Hi, I am a Car!</h2>; }}export default Car;

Para poder utilizar el componente Car, tienes que importar el archivo en tu aplicación.

Ejemplo

Ahora importamos el archivo «App.js» en la aplicación, y podemos utilizar el componente Car como si estuviera creado aquí.

import React from 'react';import ReactDOM from 'react-dom';import Car from './App.js';ReactDOM.render(<Car />, document.getElementById('root'));

Ejecuta el ejemplo «