Una vez que creamos un root, ya podemos empezar a renderizar elementos que querramos con la propiedad render

reactRoot.render(
"Hola. Esta es tu primer texto renderizado en React"
)

Genial. Lograste crear un texto renderizado en React por primera vez. ¿Como haces si queres renderizar elementos HTML? No de la siguiente manera, porque esto creara un string

reactRoot.render(
"<button>Boton</button>"
)

Tampoco podes hacerlo sin comillas porque JavaScript lo entendera como una variable. Para eso tenemos que crear JSX. Acá le vamos a dedicar una pagina particular

Renderizar mas de un elemento

Supongamos que queremos renderizar dos botones. Podemos hacer esto?

reactRoot.render(
<button>Boton</button>
<button>Boton</button>
)

No, porque (esto es importantisimo) React solo nos deja renderizar un elemento a la vez. No podemos renderizar mas de uno. ¿Como hago para renderizar mas botones? Los debo incluir en otro elemento. Para eso podes utilizar React Fragments, los mismos se simbolizan con <> y se cierran con </>. Te muestro como se deberian renderizar dos botones

reactRoot.render(
<>
	<button>Boton</button>
	<button>Boton</button>
</>
)

Ahora, en realidad estamos renderizando un solo elemento, que dentro contiene dos elementos mas.

Renderizado dinamico

Segun diferentes situaciones, podemos elegir renderizar una cosa u otra. Por ejemplo vayamos al ejemplo de las TwitterCards y probemos renderizar “seguir” si isFollowing es false o “Siguiendo” si isFollowing es true.

export function TwitterFollowCard({formatUsername, username="unknown", children, isFollowing}){
    const text=isFollowing ? "Siguiendo" : "Seguir";
    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>{children}</strong>
                <p>{formatUsername(username)}</p>
            </div>
        </header>
        <aside>
            <button className="tw-followCard-button">{text}</button>
        </aside>
    </article>
    )
}

Como ves al principio, tengo una constante llamada text que a su vez es un operador ternario. Si isFollowing es true entonces text=”Siguiendo”, mientras que si es false text=”Seguir”. Luego el resultado de text se mostrara en el boton. A su vez podriamos, por ejemplo, cambiarle la clase para cambiarle el estilo depende del valor de isFollowing

Renderizar elementos de un array

La mayoria de las veces obtendremos datos de un array, ya sea de forma nativa o haciendo un fetch de esos datos. Para eso, debemos amigarnos con el metodo de array .map y algunas tecnicas para poder trabajar con arrays. Supongamos que tenemos este array

const jugadores=[
  {
    name:"Lucas Beltran",
    number:18,
    titular:true
  },
  {
    name:"Franco Armani",
    number:1,
    titular:true,
  },
  {
    name:"Santiago Simon",
    number:31,
    titular:false
  }
]

Ahora, lo que queremos es una lista que diga el nombre del jugador y el dorsal

function App() {
  return (
    <main>
      {jugadores.map((jugador, index) => (
        <div key={index} id={index}>
          <li>{jugador.name}</li>
          <li>{jugador.number}</li>
        </div>
      ))}
    </main>
  );
}