Si entendiste bien las cuatro lecciones anteriores, ya estaras entendiendo cual es la gracia de React: crear componentes reutilizables! Para entenderlo mejor, vamos a crear uno: Vamos a crear una tabla de seguidos en Twitter.

ATENTI

Obviamente para que te quede como el ejemplo, tenes que trabajar con mucho CSS. No voy a explicarte como hacerlo porque no es el sentido de las lecciones. Tenes toda la parte de CSS a disposicion para poder aprender a hacerlo!

Paso 1: crear el archivo donde estara el componente

En primer lugar lo que vamos a hacer, para empezar a fomentar buenas practicas, será crear el componente en un archivo aparte. Ese archivo lo llamaremos TwitterFollowCard.jsx. Asegurate de crearlo en la carpeta src de tu proyecto.

Paso 2: ponerse a escribir el componente

La mejor forma para crear componentes es escribiendo una funcion que nos devuelva el componente. Vamos a escribir el elemento.

export function TwitterFollowCard({username, name, isFollowing}){
    return(
        <article className="tw-followCard">
        <header className="tw-followCard-header">
            <img 
            className="tw-followCard-avatar"
            src={`https://unavatar.io/${username}`}
            alt="Avatar del usuario" 
            />
            <div className="tw-followCard-info">
                <strong>{name}</strong>
                <p>{username}</p>
            </div>
        </header>
        <aside>
            <button className="tw-followCard-button">Seguir</button>
        </aside>
    </article>
    )
}

Voy a tratar de explicarte lo mas detalladamente posible que hice aca

• Primero cree una funcion que se exportará y se llamara TwitterFollow Card. La card tendra un header con su imagen y luego tendra el nombre de usuario y su nombre en la plataforma. Para el avatar utilizamos la herramienta unavatar.io que nos devolvera un avatar siempre.
• A su vez tambien le agregamos un boton, que será el boton de seguir.
• Como ves, todo esta dentro de un return, por lo que cada vez que llamemos a la funcion nos devolvera eso. Ademas, tiene 3 parametros. Uno con el nombre de usuario, otro con el nombre y un booleano para saber si esa persona esta siguiendo o no a nosotros.

Paso 3: Renderizar el elemento

Con este elemento renderizado, solo nos queda mostrarlo en pantalla. Para eso tenemos que renderizarlo

import React from 'react'
import ReactDOM from 'react-dom/client'
import { TwitterFollowCard } from './TwitterFollowCard.jsx';

const domRoot=document.getElementById("root");
const root=ReactDOM.createRoot(domRoot);
root.render(
  <>
    <TwitterFollowCard isFollowing name="Alejo Vilches" username="alejoevilches"/>
    <TwitterFollowCard isFollowing name="Gonzalo Pozzo" username="goncy"/>
    <TwitterFollowCard isFollowing name="Miguel Angel Duran" username="midudev"/>
  </>
);

Aqui esta la magia de React. Le decimos que debe renderizar tres TwitterFollowCards que hemos creado dentro de un React Fragment. Ademas, le hemos pasado los parametros que necesita la funcion.

1. Le decimos isFollowing que es lo mismo que escribir isFollowing=true.

ATENTI.

Si quisieras pasarle un valor a isFollowing no podes hacerlo asi. Debes escribirlo entre llaves: isFollowing={false}

1. Le decimos que cual sera el nombre que debe mostrar