React es una librería de Javascript en la que podemos crear componentes propios de React. Sin embargo, también podemos meter lógica de JavaScript en nuestros proyectos. Por ello, es una librería capaz de crear asincronía. En este post, te enseñaremos cómo usar los componentes y condicionales en React para preparar tu código de forma asincrónica.
Componentes y condicionales en React
Cuando hablamos de componentes y condicionales en React, nos referimos a los momentos en los que debemos crear condiciones en las que se ejecutará un componente u otro. Es decir, estamos hablando de preparar asincronía, un concepto que viene de JavaScript y se refiere a la preparación de acciones a ejecutar según las circunstancias actuales de la aplicación.
Para conocer más sobre la asincronía, te recomendamos leer nuestros posts sobre la asincronía en JavaScript, métodos setTimeout y setInterval en JavaScript y promesas en JavaScript.
Para explicarte cómo trabajamos con componentes y condicionales en React, te pondremos un ejemplo. Supongamos que tenemos un proyecto en el que estamos simulando la aplicación de Twitter. Entonces, hemos logrado crear una página listado en React de tweets. Para ello, hemos creado el componente TweetsPage con las siguientes líneas de código:
const TweetsPage = ( ) => {
const [tweets, setTweets] =. useState ([ ]);
useEffect (( ) => {
const tweets = await.getLatestTweets ( );
setTweets (tweets);
};
execute ( );
}, [ ]);
return (
<Page title=”What’s going on…”>
<div className{styles.TweetsPage}>
<ul>
{tweets.map (tweet => (
<li key={tweet.id}>
<Link to={‘/tweets/${tweet.id}’}>
<Tweet {…tweet} />
</Link>
</li>
))}
>/ul>
</div>
Las líneas de código anteriores crean un componente TweetsPage que se monta cuando coincide la ruta. En este componente, se renderiza el return. Después de renderizarlo la primera vez, se ejecuta el efecto. En este efecto, se hace una llamada a los tweets de la API usando una función personalizada getLatestTweets y luego se ponen en el estado.
Ahora, supongamos que el array al que accede el componente está vacío porque la base de datos de nuestra API no tiene datos todavía (setTweets ([ ]). Entonces, ya que no queremos que el usuario vea una página en blanco, deberemos construir una acción para que se ejecute cuando esto sucede. Para ello, usaríamos los componentes y condicionales en React.
¿Cómo usar los componentes y condicionales en React?
Para usar los componentes y condicionales en React, deberemos crear un componente que ejecute la acción que queremos. En el ejemplo anterior, hemos dicho que queremos ejecutar una acción cuando el array de tweets está vacío. Entonces, podemos crear un componente llamado EmptyList en el mismo archivo que el TweetsPage.
También puedes crear este componente en otro archivo y luego importarlo. Esto dependerá de lo largo que sea tu código y de cuánto quieras dividirlo.
const EmptyList = ( ) => (
<div style= {{ textAlign: ‘center’}}>
<p> Be the first twitter</p>
<Button as={Link} to=”/tweets/new” variant=”primary”>
Tweet
</Button>
</div>
);
Como puedes leer en las líneas de código anteriores, el componente EmptyList es un texto en el centro que invita al usuario a ser el primer twittero. Este texto está acompañado de un botón de tipo enlace que lleva a la página de creación de un nuevo tweet. Puedes aprender a hacer esto en nuestro post sobre crear botón con enlace en React.
Ahora que tenemos el componente EmptyList, ¿cómo lo involucramos en nuestro componente TweetsPage para ejecutar la acción correspondiente? Para ello, podemos usar la palabra condicional if o los símbolos de lógica condicional.
Entonces, una de las opciones es insertar un if fuera del return del componente:
if (!tweets.length) {
return <EmptyList />
Para comprobar que un array está vacío, puedes usar el comando array.length === 0. Sin embargo, un cero dentro de un array es igual a un false. Por ello, podemos usar el símbolo ! para crear el condicional.
Otra opción es crear la lógica dentro del return del componente afirmando que, si tweets.length es verdadero, renderizamos la lista. Si esto no se cumple, renderizamos el componente EmptyList. Esto lo podríamos escribir de la sigue manera:
return (
<Page title=”What’s going on…”>
<div className{styles.TweetsPage}>
{tweets.length?
<ul>
{tweets.map (tweet => (
<li key={tweet.id}>
<Link to={‘/tweets/${tweet.id}’}>
<Tweet {…tweet} />
</Link>
</li>
))}
>/ul> : <EmptyList/>
)}
</div>
De este modo, hemos identificado de modo declarativo los dos posibles estados de nuestro componente TweetsPage en función de la presencia de un elemento en el array tweets.
¿Quieres seguir aprendiendo?
Después de leer este post, sabes exactamente cómo usar los componentes y condicionales en React para crear asincronía. Como has podido notar, el mundo de la programación web es muy amplio y ¡todavía queda mucho que aprender! Por ello, te invitamos a formar parte de nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva en el que aprenderás todo lo necesario para convertirte en un experto del desarrollo web. ¡Anímate a seguir aprendiendo con nosotros y solicita más infomación!
