Primeros pasos con React.js
Ok, eres una especie de desarrollador, has oído hablar de React.js y tienes curiosidad. O quizás piensas comenzar tu carrera como desarrollador front-end y quieres ampliar tus conocimientos. No importa la causa, estás aquí porque deseas aprender cómo usar nuestro aliado favorito, React.js.
Lo que necesitas para empezar:
- Conocimiento de JavaScript.
- Comprensión básica de las funciones de ES6, como arrow functions.
- Ganas de aprender.
A todas éstas: ¿Qué es React?
React.js es una biblioteca de JavaScript para el desarrollo front-end. Fue creada por el equipo de desarrollo de Facebook y lanzada en 2013.
Desde entonces, ha llamado la atención de muchos desarrolladores por su propuesta. Su característica principal es la capacidad de desarrollar interfaces ricas y complejas, basadas en componentes. Cada componente tiene control sobre sí mismo, definiendo su estado, estilo y reglas de negocio.
¿Y qué ganamos con todo esto? Pues, tenemos más control sobre cada parte de la interfaz que se construyó, podemos probar cada parte por separado, tener responsabilidades independientes y, al final, contar con una aplicación fácil de mantener.
¡Agradable! Pero, ¿qué debo aprender para empezar?
- Componentes y propiedades.
- Estilización.
- Estados (usaState)
A continuación, veremos cada uno de los temas.
Comencemos un proyecto desde cero para que nuestro aprendizaje sea más visual.
Hora de comenzar
Existen tres formas de iniciar un proyecto React.js.
La primera, no muy utilizada, es agregar React manualmente a un proyecto que ya existe. Esto pudiera ser necesario, dependiendo del contexto y la situación, pero hoy no será nuestro enfoque. Si quieres saber más de este apartado, ingresa en la documentación oficial.
La segunda, más popular, es crear el proyecto a través de Create React App. CRA desarrolla un proyecto con las herramientas de compilación JS ya configuradas y con livereload. Tampoco nos centraremos en esta alternativa, pero recomiendo ahondar al respecto.
La tercera vía, más recomendable, es crear el proyecto por medio de Vite. Funciona de la misma manera que CRA, pero con herramientas más modernas y rápidas para compilar JS.
Para empezar, debemos ejecutar en la terminal:
Posteriormente, necesitas responder algunas interrogantes:
¡Listo! Proyecto creado. Ingresa a la carpeta y ejecuta el comando yarn para instalar todas las dependencias.
Ahora, abre el proyecto en tu editor de códigos (VSCode). Debes tener algo como esto:
Para ejecutar la aplicación, ingresa:
Ingresa a localhost:3000 y verás lo siguiente:
¡Excelente! Primer paso concluido. A continuación, entenderemos un poco más sobre los temas de los hablé anteriormente.
Componentes y propiedades
Presta atención a lo siguiente:
Esta imagen muestra cuántas personas han visto un perfil determinado. Es momento de crear este componente en React.
Cada vez que comenzamos un proyecto React ya configurado (CRA, Vite…) es bueno hacer un reset de algunas configuraciones que no necesitamos.
En principio, podemos eliminar los archivos css, favicon y svg de la publicación src, dejando solo los archivos main.jsx y App.jsx.
Ahora, dentro del archivo main.jsx podemos remover la importación css que ya no existe. De igual forma, dentro de App.jsx también eliminamos las importaciones inexistentes y actualizamos el contenido a lo siguiente:
Aquí el resultado:
A continuación, crearemos un componente en sí. Dentro de la carpeta src, genera un archivo llamado Card.jsx con el siguiente código:
Para visualizar el resultado, dentro de App.jsx agregamos el componente Card.jsx.
Nuestra aplicación luciría así en este momento:
Entendamos qué sucede: creamos un componente React y su principal característica es el poder de utilización. Podemos importar el mismo componente en diversos segmentos.
Un componente no es más que una función JavaScript que devuelve un HTML.
La unión de JS + HTML la llamamos JSX, la cual se usará mucho. En los archivos JSX podemos usar expresiones, condicionales, bucles, variables, propiedades e incluso otros componentes.
¡Hemos aprendido mucho hasta ahora! Pero ahora, vamos a hacer que este componente sea dinámico, por lo que usaremos propiedades, o props, como se le conoce más comúnmente.
Una propiedad se agrega a un componente de la misma manera que un atributo HTML en alguna etiqueta, como el src en la etiqueta <img>.
¡Vamos a intentarlo! En nuestro componente <Card /> que se importa en App.jsx agreguemos title y total.
El código se verá así:
Bien, para que el componente pueda leer esta información accedemos a las propiedades en el parámetro props de la función.
Los props son un objeto, por lo que para acceder a los valores de la propiedad debemos incluir el nombre props como parámetro de la función componente y acceder al valor de este objeto de la siguiente manera:
Vamos a alterar el componente Card con las propiedades:
Así, nuestra aplicación continúa de la siguiente manera:
Al usar propiedades, nuestro componente es aún más flexible, pudiendo tener diferentes valores en diferentes lugares.
Estilización
Hasta el momento, hemos creado nuestra primera página y nuestro primer componente dinámico. Sin embargo, no se parece a la primera imagen de la tarjeta que vimos.
Para aplicar estilos en React, podemos hacerlo de varias formas: una muy similar a como lo usamos en HTML, otra llamada CSS-in-JS y por medio de Styled-Components (si te interesa, tenemos otro artículo hablando de este tema que puedes ver aquí)
Hoy vamos a usar la forma clásica, creando un archivo App.css e importándolo al componente.
El archivo de estilos debería verse así:
Al principio del archivo App.jsx debemos importar el archivo de estilos:
Finalmente, debemos agregar las clases creadas en nuestro archivo Card.jxs:
Ten en cuenta que en lugar de usar class como en HTML, usamos className.
¡Listo! Ahora nuestra tarjeta debería tener este resultado:
El otro enfoque, CSS-in-JS, consiste en agregar estilos directamente a HTML a través de JS, pasando un atributo de styles, similar a lo que tenemos con style en HTML:
Atención al formato de las propiedades de estilo. Éstas deben escribirse en camelCase.
¡El universo de la estilización es enorme! Investiga un poco y ve cuál se adapta mejor a ti.
Hooks y estados (useState)
Según la documentación oficial de React: “Los hooks o ganchos son una nueva adición a React 16.8. Permiten usar el estado y otras características de React sin escribir una clase”.
Los hooks surgieron debido a tres problemas:
- Dificultad para reutilizar código entre componentes.
- Componentes complejos que se tornan difíciles de entender.
- ¡Las clases confunden!
Algunas características/beneficios de los hooks:
- Uso del estado en funciones que son componentes.
- Ejecutar funciones cuando el componente está montado y cuando se desmontará.
- Agregar API de contexto más fácilmente para reflejar los cambios en un componente de trabajo.
¡Ese fue un resumen sobre los hooks de React! Realmente vale la pena estudiar más y comprender cómo cada hook puede ayudarnos a diario.
Hoy nos enfocaremos en el hook useState.
El useState es el hook más común, utilizado para controlar alguna variable de estado dentro de un componente funcional enReact.
Para utilizarlo, procedemos de la siguiente manera:
El state representa el valor de estado que será manipulado por la función setState. El valor 0 y el valor inicial del estado puede ser un número, cadena, matriz u objeto.
En este punto, puedes renderizar libremente el estado o llamar a setState para actualizar el valor de estado.
Esa fue una breve explicación sobre el hook más conocido que tenemos, usado en diversos aspectos. En la documentación oficial de React (en portugués), puedes conocer mejor éste y otros hooks.
Conclusión
¡Hemos llegado al final! Espero que hayas aprendido cómo crear tu primer proyecto con React, qué es un componente, cómo diseñarlo y lo básico sobre hooks y estados.
De esta forma, podrás dar el siguiente paso con facilidad y mejorar aún más tu experiencia con React.
Revelo Content Network da la bienvenida a todas las razas, etnias, nacionalidades, credos, géneros, orientaciones, puntos de vista e ideologías, siempre y cuando promuevan la diversidad, la equidad, la inclusión y el crecimiento profesional de los profesionales en tecnología.