React es una librería conocida por permitirnos usar el poder del código JavaScript con una sintaxis muy similar a la del código HTML. Esta librería se usa especialmente para crear interfaces de usuario en el proceso de desarrollar SPA o single page application. Por ello, aprender a usarla es fundamental para cualquier desarrollador web. En este post, te enseñaremos cómo crear una página listado en React a partir de una aplicación creada en create-react-app.
¿Qué es una página listado?
Una página listado es una sección de una aplicación que se dedica a enlistar un número de elementos. Este tipo de páginas son muy comunes en las redes sociales. Piensa, por ejemplo, en tu perfil de Twitter. Allí encuentras una página que crea un tipo de lista de tus Tweets más recientes en orden de publicación. En este post, recrearemos una página de este estilo.
¿Cómo crear una página listado en React?
Antes de enseñarte cómo crear una página listado en React, te recomendamos revisar nuestros posts sobre cómo crear una aplicación con create-react- app, el código de una aplicación creada con create-react-app y limpiar create-react-app. Estos posts te ayudarán a entender en qué momento del código estamos antes de empezar a crear nuestra página listado.
Entonces, el primer paso para crear una página listado en React es crear una carpeta components, donde insertaremos los componentes de nuestra aplicación. Te recomendamos crear esta carpeta bajo la carpeta src que viene predeterminada con create-react-app. En nuestra aplicación, tendremos distintas áreas que serán representadas por carpetas. Supongamos que, por ahora, tendremos un área de autenticación y otra de Tweets. Entonces, dentro de la carpeta components crearemos una supcarpeta llamada Tweets; es aquí donde podremos crear una página listado en React.
Dentro de la subcarpeta Tweets crearemos nuestro primer componente. Para ello, crearemos un archivo llamado TweetsPage.js. Esta herramienta crea componentes al declarar una función que luego exporta y renderiza. Entonces, para crear una página listado en React, primero debemos declarar una función.
Las funciones que declaras en React siguen las normas de JavaScript. Esto quiere decir que puedes declarar una función con la palabra clave function o con arrow functions. Ten presente que, si utilizas arrow functions con las llaves, debes declarar la palabra clave return dentro. Sin embargo, también puedes crear un retorno implícito evitando las llaves. Es decir, puedes escribir cualquiera de las siguientes líneas de código:
const TweetsPage = () => {
return <div> </div>
};
const TweetsPage = () => <div> </div>
Nosotros usaremos la segunda estructura para crear una página listado en React. Dentro de esta función, tendremos un elemento div con una clase className=‘tweetsPage’. Esta clase nos servirá posteriormente para declarar estilos y diseñar nuestra aplicación. Dentro de este div crearemos un elemento ul (unordered list), donde crearemos a su vez un par de elementos de lista li (list item). Estos elementos de lista serán enlaces.
Entonces, hasta ahora, nuestro componente de tipo función se ve de la siguiente manera:
const TweetsPage = ( ) => {
<div className= ‘tweetsPage’>
<ul>
<li></li>
<li></li>
</ul>
</div>
);
Dentro de los elementos de lista podemos crear un texto que diferencie nuestros elementos. Para ello, basta con insertar el texto dentro de las etiquetas <li> </li>. El último paso en la creación de este componente será exportarlo. Para ello, usamos la palabra clave export, al igual que lo haríamos en los módulos de JavaScript. Para conocer más sobre este tema, te recomendamos leer nuestros post sobre cómo funcionan los CommonJS Modules en JavaScript y cómo funcionan los ES6 Modules en JavaScript.
const TweetsPage = ( ) => {
<div className= ‘tweetsPage’>
<ul>
<li>Primer tweet</li>
<li>Segundo tweet</li>
</ul>
</div>
);
Export default TweetsPage;
Ahora que hemos asegurado esta exportación, podemos importar nuestro componente TweetsPage en nuestro componente App creado por create-react-app. Para ello, basta con insertar la siguiente línea de código:
import TweetsPage from ‘components/tweets/TweetsPage’;
Ahora, lo único que queda será renderizar nuestro componente dentro de la función App.
¿Cuál es el siguiente paso?
Ahora que sabes exactamente cómo crear una página listado en React, ¡es el momento de usar este conocimiento para crear tu propia aplicación web! En KeepCoding sabemos que, a la hora de aprender una nueva herramienta, la práctica es tan importante como la teoría. Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva donde desarrollarás tus propios proyectos con herramientas como React, JavaScript, CSS y HTML. ¿A qué esperas para empezar a programar? ¡Matricúlate ya!
