Construye una Landing Page en React

¿Eres un/a desarrollador/a web en busca de nuevas habilidades y proyectos emocionantes? ¡Tengo una propuesta para ti! En este artículo, te guiaré en el apasionante mundo de la construcción de landing pages utilizando React con los primeros pasos y recomendaciones. Si cuentas con conocimientos básicos de HTML, CSS y JavaScript, estarás listo/a para adentrarte en el fascinante universo de React. Acompáñame en este emocionante viaje de aprendizaje y descubre cómo dar vida a tus ideas en la web con una landing page construida en React.

Si eres dev y apenas empiezas con el desarrollo web, una herramienta con valor positivo para ti como profesional es arrancar de lleno en la construcción de landing pages en React.

Ahora bien, ¿qué es React? Es una biblioteca de JavaScript utilizada por su alto rendimiento y su enfoque en la organización y reutilización del código. Su popularidad entre los desarrolladores se debe a su capacidad para ofrecer una experiencia interesante y una estructura de código modular, lo que facilita el desarrollo y el mantenimiento de aplicaciones web.

Construir una landing page es, en pocas palabras, un proceso sencillo que se puede dividir en varios pasos.

En primer lugar, necesitas un editor de código, como Visual Studio Code, y un conocimiento básico de HTML, CSS y JavaScript. Luego, se puede utilizar una herramienta como Create React App para generar un proyecto de React básico que incluya todas las dependencias necesarias. A partir de ahí, se pueden agregar componentes y estilos específicos para crear tu landing page.

Si has estado siguiendo hasta este punto, es momento de sumergirnos en el universo de Webpack. Imagina a nuestro código JavaScript como un intrincado laberinto de información, donde tener todo en un solo archivo sería como quedar atrapados en él. Resultaría difícil de leer y casi imposible de mantener. Es aquí donde entra en acción Webpack.

Webpack divide nuestro código en archivos pequeños para manejarlos con facilidad. Es como tener un mapa para navegar por el laberinto.

¿Cómo funciona todo esto? Es sencillo: usamos la palabra import para traer variables, clases o funciones de otros archivos, y la palabra export para exponer aquellos elementos que queremos que sean utilizados por otros archivos. Con estas dos simples herramientas, podemos establecer una comunicación fluida entre los distintos componentes de nuestro proyecto. Así de simple, así de poderoso.

Por ejemplo, si queremos importar una función de otro archivo, podemos hacerlo así:

También podemos usar la exportación predeterminada, una forma de exportar un solo elemento por defecto en nuestro archivo. En otras palabras, podemos exportar una variable, una clase o una función utilizada por otros archivos sin usar corchetes.

Por ejemplo, si queremos exportar una variable llamada UNO como predeterminada, podemos hacerlo así:

Fácil, ¿verdad? Con Webpack y la importación y exportación de JavaScript, podemos navegar por el laberinto de nuestro código sin preocuparte por orden o mantenimiento.

En el mundo de React, todo se trata de componentes. ¿Te suena familiar el uso de Bootstrap? Con React, llevamos ese concepto un paso adelante al dividir y encapsular todo tu sitio web en componentes más pequeños y reutilizables. Imagina tener bloques de construcción modulares que puedes combinar y reutilizar en diferentes partes de tu aplicación.

Esto no solo mejora la organización y la mantenibilidad de tu código, sino que también te permite desarrollar de manera más potente.

Con React, también puedes crear componentes basados en funciones o clases, utilizando las estructuras familiares de JavaScript. Cada componente es una pieza autónoma de tu sitio web con su propia lógica y funcionalidad, y puede ser fácilmente combinado con otros componentes para interfaces de usuario dinámicas.

La capacidad de dividir tu sitio web en componentes más pequeños hace que sea más fácil de entender, mantener y actualizar. Cada componente puede ser desarrollado y probado por separado, lo que significa que puedes trabajar tranquilo/a en diferentes partes de tu sitio web de manera paralela sin preocuparte por romper el código.

¿Qué debes hacer para empezar con tu landing page? Lo describiré en las siguientes secciones de este artículo. ¡Manos a la obra!

Preparación del entorno

Es hora de configurar nuestro entorno de desarrollo con React y, para ello, necesitarás instalar Node.js y Visual Studio Code desde sus sitios web oficiales.

Una vez instalado el editor de código, crearás una nueva aplicación React. Puedes utilizar create-react-app, la cual generará una nueva aplicación de React en Visual Studio Code.

Abre una terminal en Visual Studio Code e ingresa el siguiente comando:

Este comando creará  una nueva carpeta llamada mi-aplicacion que contendrá todos los archivos y configuraciones necesarios para desarrollar tu landing page.

Ahora, abre la carpeta de la aplicación en Visual Studio Code. En este punto, puedes abrir la carpeta de la aplicación seleccionando File en la barra de menú y luego Open Folder, navega hasta la carpeta de tu aplicación (mi aplicación, en este caso, o el nombre que desees otorgarle a tu aplicación) y selecciónala para abrirla en Visual Studio Code.

Ahora ya podemos comenzar a codificar y desarrollar la aplicación. Te mostraré cómo se ven los archivos al abrir la carpeta correspondiente.

Para ver nuestra creación en acción, se debe iniciar el servidor de desarrollo ejecutando el siguiente comando en la terminal de Visual Studio Code. Eso sí, asegúrate de estar ubicado/a en la carpeta de tu aplicación.

Esto iniciará el servidor de desarrollo y abrirá tu aplicación en tu navegador predeterminado. Cualquier cambio que realices en los archivos de la aplicación se actualizará automáticamente en el navegador.

Estructura básica de una landing page

Encabezado o Navbar. La estructura de una landing page varía según el diseño y los objetivos específicos de tu proyecto. Claro, suelen estar presentes algunos elementos comunes. En general, el encabezado o el <header> es la primera sección visible en una landing page. El <header> puede contener un logotipo, un eslogan, un menú de navegación (o <navbar>), títulos creativos o algún botón de llamada a la acción.

Cuerpo. Es la sección principal de una landing page. Aquí se incluye contenido relevante, como por ejemplo información acerca del servicio, del producto o de la marca. También puede albergar características principales y puede seccionarse en pequeñas partes y construir componentes de React para cada sección.

Pie de página o footer. Al final de la landing page está el <footer> o pie de página. Esta sección suele contener información adicional, enlaces de contactos, políticas de privacidad, entre otros. También se puede crear un componente para representar el pie de página.

Diseños y estilos

Ya estructurados los componentes de la landing page en React, es posible aplicar estilos haciendo uso de CSS o de bibliotecas como Bootstrap para alcanzar el diseño considerado.

CSS. Se pueden definir los estilos CSS directamente en los archivos de los componentes de React, mediante clases o identificadores.

Biblioteca de Estilos. Algunas bibliotecas ya cuentan con estilos predefinidos (como Bootstrap que es mi favorito al brindarnos responsividad en su amplia gama de componentes y estilos).

Funcionalidad

Para agregar funcionalidad a una landing page con React, podemos utilizar eventos. Algo que puedes hacer es asociar funciones a los eventos para manejar acciones del usuario, como por ejemplo, el hecho de hacer clic en un botón o ingresar texto en un campo de entrada. Para ello, utilizamos el evento onClick para ejecutar una función cuando se hace clic en un botón.

Para utilizar eventos en React, debes crear funciones para manejarlos. Estas funciones se llaman manejadores de eventos y se definen como funciones regulares de JavaScript. Por ejemplo:

Puedes asignar eventos a elementos utilizando la sintaxis JSX (como asignar un evento onClick a un botón para manejar el clic del usuario).

Para comenzar, desglosaré el código paso a paso, de manera que puedas comprender cómo funciona cada línea y cómo se relaciona con el resultado visual de la página que estamos construyendo: una landing page. Con esta explicación detallada, estarás listo para sumergirte de lleno en el  proceso de desarrollo y comprender cómo cada elemento del código contribuye a la creación de una página.

1) Importaciones

En este bloque, importaremos  las funciones React y useState de la biblioteca de React. La primera es necesaria para utilizar componentes y useState es un hook de React que permite utilizar estados en componentes funcionales.

2) Definimos el componente

Aquí definimos un componente de función llamado LandingPage.

3) Declaración del estado

Empleamos el hook useState para declarar un estado llamado email y una función setEmail para actualizar este estado. Inicializamos el estado email con una cadena vacía ('').

4) Manejar el cambio del campo de entrada

Lo que sucede ahora es una definición de una función llamada handleInputChange que toma un evento como argumento. En esta función, utilizamos setEmail para actualizar el estado email con el valor del campo de entrada. Event.target.value es la propiedad que contiene el valor del campo de entrada cuando el usuario realiza un cambio.

4) Renderizar el componente

En la sección de return, renderizamos el componente, mostramos un encabezado y un campo de entrada de tipo email. El valor del campo de entrada está enlazado al estado email declarado anteriormente, y el evento onChange está asociado a la función handleInputChange para manejar el cambio en el campo de entrada.

5) Exportar el componente

Por último, exportamos el componente LandingPage para que pueda ser utilizado en otros archivos. Recuerda, comienza por el Navbar, que será la barra de navegación que se mostrará en la parte superior de tu página. Define los elementos de navegación y asegúrate de que estén correctamente enlazados a las secciones correspondientes.

Luego, crea el footer, que estará ubicado en la parte inferior de la página. Puedes agregar información relevante, enlaces adicionales y cualquier otro contenido que desees mostrar en esta sección.

Enfócate en el contenido principal de tu landing page. Añade imágenes, texto, formularios o cualquier otro elemento que necesites para transmitir la información que deseas mostrar a tus usuarios.

A medida que avances en la creación de tu página, no dudes en reutilizar tus componentes creados en diferentes secciones o bloques de tu código. Esto te ayudará a mantener un código más limpio, modular y fácil de mantener.

Publicación y distribución

Una vez creada nuestra landing page en React, el siguiente paso es publicarla en línea para que los visitantes puedan acceder a ella. Existen varias opciones para alojar una landing page, siendo una de las formas más comunes y económicas utilizar servicios de alojamiento web gratuitos como GitHub Pages o Netlify.

Estos servicios permiten alojar y distribuir sitios web sin costo, lo que los hace ideales para proyectos personales o pequeñas empresas. En otro artículo, profundizaremos en los métodos más utilizados para la publicación y distribución de sitios web en servicios de alojamiento gratuitos.

Crear una landing page en React puede ser fácil si se siguen los pasos adecuados y se aplican las mejores prácticas.

Ahora que ya sabes cuán sencillo es construir una landing page con React, te invito a  combinar habilidades, técnicas, dinamismo y creatividad, los pongas en práctica y comiences a diseñar páginas web que aporten valor agregado.

Espero que este artículo haya captado tu atención. Manos a la obra y éxito con tu landing page.