Mis primeros pasos en React JS

Introducción teórica, práctica realizada en la sesión en vivo de Google Developer Students UNAH HN

Si quieres aprender react, aquí te dejo los primeros pasos para que te emociones y quieras desarrollar tus proyectos con esta librería.

Requisitos

1. Conocer conceptos básicos de javascript
2. Conocer un poco sobre HTML
3. Un Editor de código de tu preferencia

Documentación oficial y de ayuda

React - reactjs.org
Create React App

Palabras clave

DOM (Document Object Model), componentes, estado, render, props

¿Qué es React?

Es una librería de Javascript para construir interfaces de usuario. Para una mejor comprensión, react nos ayuda en el lado del frontend.

Características de React

1. Declarativo
2. Basado en componentes
3. Es amigable de aprender

React es Declarativo

Puedes crear SPA(Single Page Application), de forma sencilla, React se encargará de actualizar y renderizar de manera eficiente los componentes correctos cuando los datos tambien.

En este punto es requerido entender sobre el estado de un componente en react, dependiendo de si usas un class component o un functional component, la renderización dependerá meramente de un cambio en el estado por lo que hará más óptima y ligera nuestra aplicación. React tiene un ciclo de vida: Montaje, Actualización y Desmontaje (No vamos a profundizar pero daremos una breve explicación para tus primeros pasos).

1. Montaje: Se ejecuta una sola vez cuando accedes a un componente, esto es mejor conocido como el constructor de una clase.
2. Actualización: Se ejecuta cuando un cambio en el estado del componente por medio de las props o eventos (una variable paso de estar "" a "Hola Mundo", se presionó un botón que desencadena una serie de eventos que afecta la interfaz como cambiar un color o desaparecer algun control).
3. Desmontaje: Sucede una vez te sales del componente, en otras palabras, destrucción del componente en el DOM de la aplicación.

Basado en componentes

Imaginemos un carro, el que más te guste. Ahora veamos el carro como un todo, pero para ser un carro necesita sus componentes (ruedas, puertas, asientos, motor, caja de cambios).

Ahora veamos uno de los componentes del carro que se repite, "ruedas". Estas tienen que ser iguales, mismo tamaño de rines, misma llanta, sino el carro no se movería de forma uniforme al conducir.

React nos permite reutilizar mucho los componentes aquellos que los requiera otra pantalla dentro de la misma aplicación (tenemos un componente rueda que lo tengo en la pantalla X, pero resulta que me funciona bien en la pantalla Y, y tambien en la pantalla Z).

React es amigable de aprender (Vamos a programar!!!)

Haremos una pequeña demo, aplicando los conceptos vistos.

1. Selecciona una ruta y abre la consola para generar los archivos correspondientes a la aplicación de react.
2. En la consola coloca el siguiente comando, presionando enter(En mi caso uso npm):

npx create-react-app primeros-pasos-react

esperaremos al que proceso termine (Odio esta parte, porque a veces tarda mucho, dependera de los recursos de tu laptop y la velocidad de tu internet).

1. Abres el proyecto con VS Code y ya podemos empezar a codear con react.

1. Aquí te dejo el repositorio pininos-react, y mira la charla en la comunidad de Google Developer Students UNAH VS para la parte del desarrollo.

Saludos!!!