Componentes

Los componentes son como funciones que devuelven elementos HTML.

Componentes de React

Los componentes son fragmentos de código independientes y reutilizables. Cumplen la misma función que las funciones de JavaScript, pero funcionan de forma aislada y devuelven HTML.

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

En las bases de código de React más antiguas, es posible que encuentres que se utilizan principalmente componentes de clase. Ahora se sugiere utilizar componentes de función junto con ganchos, que se agregaron en React 16.8. Hay una sección opcional sobre componentes de clase para tu referencia.

Crea tu primer componente

Al crear un componente React, el nombre del componente DEBE comenzar con una letra mayúscula.

Componente de clase

Un componente de clase debe incluir la extends React.Component declaración. Esta declaración crea una herencia para React.Component y le otorga a su componente acceso a las funciones de React.Component.

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

Ejemplo Consigue tu propio servidor React.js

Crea un componente de clase llamadoCar

class Car extends React.Component {

  render() {

    return <h2>Hi, I am a Car!</h2>;

  }

}

Componente de función

A continuación se muestra el mismo ejemplo que el anterior, pero creado utilizando un componente Función.

Un componente de función también devuelve HTML y se comporta de forma muy similar a un componente de clase, pero los componentes de función se pueden escribir utilizando mucho menos código, son más fáciles de entender y serán los preferidos en este tutorial.

Ejemplo

Cree un componente de función llamado Car

function Car() {

  return <h2>Hi, I am a Car!</h2>;

}

Representación de un componente

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

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

Ejemplo

Mostrar el Carcomponente en el elemento "raíz":

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Car />);

Accesorios

Un componente es una pieza de lógica encapsulada. Por ejemplo, aquí hay un componente que muestra un Hello, World!mensaje:

function HelloWorld() {

  return <span>Hello, World!</span>;

}

El problema con <HelloWorld />el componente es que no es flexible. No se puede cambiar la persona que saluda, por ejemplo, usar Jokeren lugar de Earth.

Puedes resolver este problema utilizando el concepto de propiedades del componente .

Hagamos que el <HelloWorld />componente sea más flexible agregando una propiedad who que who permita personalizar a la persona que se está saludando. Nombremos el nuevo componente <Hello>.

Hay 2 pasos para agregar la who propiedad al <Message>componente:

1) Haz que la función de tu componente lea las propiedades del propsparámetro :

function Hello(props) {

  return <div>Hello, {props.who}!</div>;

}

Ahora Hello la función tiene un parámetro props. Al renderizar el componente, React se asegurará de asignar al props objeto todas las propiedades que le asigne al componente.

2) Al renderizar el componente, agregue la propiedad al componente usando la sintaxis similar a un atributo who="Earth":

// Render

<Hello who="Earth" />

// Output

<div>Hello, Earth!</div>

Los componentes se pueden pasar como props, que representa propiedades. Los accesorios son como argumentos de función y se envían al componente como atributos.

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

Ejemplo

Utilice un atributo para pasar un color al componente Car y utilícelo en la función render():

function Car(props) {

  return <h2>I am a {props.color} Car!</h2>;

}

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Car color="red"/>);

Componentes en Componentes

Podemos hacer referencia a componentes dentro de otros componentes:

Ejemplo

Utilice el componente Coche dentro del componente Garaje:

function Car() {

  return <h2>I am a Car!</h2>;

}

function Garage() {

  return (

    <>

      <h1>Who lives in my Garage?</h1>

      <Car />

    </>

  );

}

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Garage />);

Componentes en archivos

React se trata de reutilizar código y se recomienda dividir los componentes en archivos separados. Para ello, crea un nuevo archivo con una .js extensión de archivo y coloca el código dentro de él:

Tenga en cuenta que el nombre del archivo debe comenzar con un carácter en mayúscula.

Ejemplo

Este es el nuevo archivo, lo llamamos "Car.js":

function Car() {

  return <h2>Hi, I am a Car!</h2>;

}

export default Car;

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

Ejemplo

Ahora importamos el archivo "Car.js" en la aplicación y podemos usar el Car componente como si hubiera sido creado aquí.

import React from 'react';

import ReactDOM from 'react-dom/client';

import Car from './Car.js';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Car />);