Extensiones recomendadas para VS Code al momento de trabajar esta librería
- Bracket Pair Colorizer
- ES7 React/Redux/GraphQL/React-Native snippets
- Simple React Snippets
- React/Redux/react-router Snippets
Contexto
Antes de iniciar a codear, hay algunos conceptos que debes conocer antes de empezar, no se trata de javascript esta entrada, (almenos no tanto) si no de conceptos que yo recomiendo conocer y haber practicado de alguna forma
1) Administrador de paquetes : Es una forma que nos administra el código de otros desarrolladores de forma muy sencilla. Haciendo la implementación de funcionalidades (de otros programadores) mucho más sencillo.
Ejemplo: Tu tarea es hacer una app web que pueda convertir un html a pdf. Obviamente no lo harás desde cero, porque posiblemente alguien (antes que tu) ya lo hizo, así que tomas su código para hacer la tarea encomendada. Tienes dos caminos.
| Sin administrador | Con administrador |
|---|---|
| 1. Buscar la funcionalidad en un lugar como github 2. Analizar el código y extraer lo de nuestro interes 3. Descargar el código que depende esta funcionlidad (si la hay) 4. Repetir del paso uno al tres hasta que seamos capaces de ejecutar la funcionalidad que necesitamos |
1. Buscar la libreria en el repositorio 2. Instalar con un simple comando en la carpeta del proyecto 3. LISTO! |
Recordando que sin el administrador todo es manual, ahora, ¿te imaginas si sale una actualización? Que martirio seguir el hilo para hacerlo a mano.
Algunos administradores de paquetes son:
- npm (Javascript)
- maven (Java)
- pip (Python)
- yarn (Javascript)
- composer (PHP)
2) Transpilador : Estos se encargan de convertir un lenguaje de alto nivel a otro de alto nivel. ¿Esto para que? Recordemos no todos los navegadores van a la par con respecto a las nuevas funcionalidades que añade ES, es por eso, que debemos codear en versiones antiguas para que los navegadores tengan soporte de la aplicación. Por ejemplo, no todos los navegadores soportan import, la solución sería escribir en un lenguaje mas antiguo de JS para que funcionara, pero hacer eso es complicado, entre más retrocedamos en la sintaxis de JS, menos maduro es el lenguaje.
La solución, es utilizar un transpilador que haga el trabajo sucio por detrás
3) Empaquetador de módulos (module bundler) : Lo que hace es preparar los patrones de diseño para el entorno de trabajo que utilizaremos en el desarrollo de la aplicación. Por ejemplo, cuando utilizas un framework, normalmente vez que se realiza una estructura de carpetas, archivos base, etc. Algo como esto.
Pero no solo eso, el empaquetador también permite unificar los distintos módulos que hay en el proyecto, de esta forma tenemos el código "en uno solo", organizado y con el peso mínimo (hablando en espacio de memoria). En esencia, un Empaquetador de modulos nos permite organizar el código de Javascript
4) Linters (ESLint) : Son "asistentes" que nos soportan en la escritura del código. En la siguiente imagen, se muestra un código, una línea que digamos se esta escribiendo para implementar alguna funcionalidad, lo que hacen los Linters es mostrarnos esos errores y asistirnos en lo que esta fallando, e incluso recomendaciones para tener un mejor código. Como eliminar variables que no estemos usando, variables declaradas sin un valor, etc.
| Video-guía de los cuatro puntos anteriores |
5) Librería : Se trata de una serie de código que realiza una función en especifico, por ejemplo, mandar un mail de restauracion, obtener un excel de algun server como mediafire y transformar las tablas en json, etc. Su misión es cumplir con la tarea cometida (que normalmente es una tarea pequeña, sencilla) y se puede implementar al proyecto con toda libertad. |Documento|
Las librerías son independientes de cada proyecto, eso quiere decir que se pueden implementar con el patrón de diseño y administración del programador. Crear carpetas, poner archivos en tal carpeta, etc. Es criterio de cada persona/grupo de desarrolladores organizar el código.
6) Framework : Es un conjunto de librerías y utilidades que se ofrece al desarrollador para trabajar de manera más ordenada y eficaz posible. Se diferencia de una librería porque se adopta un patrón de diseño y metodologías en el desarrollo del código. Se debe acatar las "practicas" que se documenta en el framework. Hacer esto tiene la ventaja que el código puede ser entendible para la mayoría de los desarrolladores que trabajen sobre el mismo framework ya que el código esta estructurado de una manera estándar. |Documento|
Pregunta - ¿React.js es librería o framework?
Respuesta aquí
7) JSX : Es una extensión de Javascript que permite describirle a React.js como debe ser la plantilla a renderizar.
Es una sintaxis parecida a HTML, pero no es HTML, es una extensión de JS para indicar como debe ser la plantilla que se renderiza (persona la redundancia, pero había que dejarlo muy claro) |Documento|
8) API :
Las API son funciones de programación que sirven para manipular diferentes aspectos del navegador y el sistema operativo que ejecuta el sitio, o manipular datos de otros sitios web o servicios. -Mauricio Garcia
Para ponerlo asi de sencillo, son funcionalidades que nos ofrece un tercero, por ejemplo, hacer login con facebook, utilizar datos del servidor para nuestro sistema, etc. Pero no se limitan a solo datos o funciones que obtenemos desde un servidor ajeno al sistema. Los navegadores de internet ya tienen sus propias APIs, el gps, micrófono, cámara, hablar con voz de loquendo el texto pasado como argumento, etc. Las APIs no se limitan a solo servicios de "la internet".
Las API se caracterizan por manipular la información en formato JSON, la razón de esto es que la información con este formato es entendible para la mayoría de lenguajes de programación.
Con las API solo podemos enviar y recibir información, es todo, el "backend" queda restringido, solo podemos hacer uso de esas funcionalidades pero sin ver como esta hecho.
| Documento |
9) API REST : Digamos que son una especie de reglas y estándares que indican como debe de ser un API.
Por ejemplo, para hacer login en utilizando Facebook, ellos deben seguir estándares de seguridad, una forma de estructurar los datos para poder servirnos de sus funcionalidades, etc.
Antes de...
Estos conceptos se van a utilizar, y, si no los conoces, puedes ir aprendiendo "sobre la marcha". Por ejemplo, para iniciar los proyectos de React se utiliza un administrador de paquetes o cdn. Y lo recomendable (desde mi punto de vista) es estar familiarizado para no desviarse tanto del aprendizaje de esta librería.
Ya podemos seguir con React.
A decir verdad, la documentación y tutoriales son buenos. Si sirven para apoyarse y aprende de ahí, así que iré mencionando en orden los temas para que puedas hacer lo correcto en la ruta de aprendizaje. Gatear, caminar y luego correr. De igual forma anexare lista de reproducción con cursos gratuitos acerca de estos temas para poder hacer la practica de alguna manera y no solo tener una "guía" escrita.
1) Para partir ¿Qué es React JS y como funciona?
Sugiero empezar con ese video, nos explica el chiste de utilizar esta librería. Si eres de los que se quedaron estancados o estudiando algo como la metología LAMP en desarrollo web, la forma en que react funciona cambiara por completo tu esquema, y para bien, de hecho, una mejor forma de hacer desarrollo web
2) Instalar y preparar el entorno
Manos a la obra para iniciar en React, para eso se debe instalar la librería con un administrador de paquetes (a menos que quieras hacerlo manual, no lo recomiendo) que prepare el entorno de trabajo.
3) Crear un componente y practicar los conceptos.
Lo primero sería crear un componente. Hay que dejar claro, que para crear un componente hay varias formas.
- Function components (JS con funciones)
- Class components (JS con POO)
- Function components + Hooks
La tercera opción es lo más nuevo que hay, y la mejor forma de crear componentes. Eso no quiere decir que las demás opciones sean inservibles, pero paulatinamente los proyectos que se hallan basado un desarrollo sin hooks, paulatinamente (mi opinión) dejaran de existir, o sera cada vez poco común ver proyectos hechos de esa forma. Recomiendo programar con Function Componentes + Hooks, pero ya es criterio de cada quien.
Recuerda, cuando mencionen Hooks, es la forma de crear componentes de la forma más actualizada que se conoce hasta la fecha. Pero, para iniciar en Hooks recomiendo ampliamente empezar por aquí para crear tu primer componente, ya sea utilizando clases o solo funciones.
*| Crear componentes en react - Guia de la documentacion *|
Tambien te puedes apoyar de este curso si prefieres ver que leer. SOLO SI QUIERES PROGRAMAR CON CLASES O FUNCIONES, la verdad, es que no es tan necesario, puedes pasar directamente a intentar programar con Hooks sin ningun problema. De hecho, este punto #3 solo esta de referencia para que sepas que hay varias formas de hacer componentes, no solo una. Mi opinion, pasa directamente a Hooks
.
Al final de ese curso y documentación, deberías ser capaz de realizar algo como esto. Usar localStorage para guardar la informacion, validar los campos no esten vacíos, y sobretodo, utilizar componentes con estados y paso de parametros entre cada uno.
| Ejemplo de proyecto que puedes proponerte a reliazar |
4) Hooks
Hooks son una nueva característica en React 16.8. Estos te permiten usar el estado y otras características de React sin escribir una clase. - Documentación de React.js
Hooks vino para solucionar el problema de los estados que había en la programación utilizando solo funciones o clases. Ya que carecen de alguna sintaxis que permita manipular los estados de un componente sin utilizar "trucos" raros que solo enrollan más el código. Si usaste los recursos del punto #3, ya sabras de lo que estoy hablando.
| Guía para Hook |
Puedes volver a intentar realizar | Ejemplo de proyecto que puedes proponerte a reliazar | pero con Hooks, y veras la diferencia en el código si no llegas a utlizarlo
Check list de conceptos/habilidades en React (al iniciar)
A continuacion una lista de las cosas que deberías saber y tener muy claro antes de avanzar a algo más avanzado en React.js, los tutoriales anexados en esta entrada debieron haber abarcado estos puntos.
Carpetas de React
Al iniciar un proyecto, siempre se debe preparar el espacio de trabajo. La librería por default nos da un comando que prepara las carpetas, librerias dependientes, etc. Prácticamente nos "deja" todo listo para que nosotros hagamos la magia.
npx create-react-app my-app
Estructura de un componente en React
Cuando se crea el entorno de trabajo, todo esta listo para hacer el código. Recordando la filosofía de React, se trata de agrupar el código html, css y javascript acerca del componente que se va a crear. En un contexto de formulario...
Se podría traer el css del formulario, escribir las validaciones Front-End dentro del componente, escribir el jsx que da el esqueleto del formulario. Opcionalmente, importar otros componentes, por ejemplo, alguno de botones que ya hallamos creados o bajado por Internet. El siguiente código tiene un esqueleto de lo "básico" que podemos aprender como principiantes, y, entre más practica meter mas conceptos avanzados.
import React from 'react'; //Es un hecho, es la librería en si
import './Formulario.css'; /* Ruta del archivo css
que se creo para el componente*/
const MiComponente = () => { /* Nombre del componente*/
return (
<form>
<p>Aqui va mi codigo "HTML" (JSX)
para darle esqueleto al componente
</p>
</form>
);
}
export default MiComponente;
Esa sería la estructura básica que se debe escribir al crear un nuevo componente, adicionalmente
props
1) En el componente padre se le pasan los parámetros al componente hijo
<Header
key=1
titulo='Tienda Virtual'/>
2) En dicho componente que recibe los valores
function Header(props){
return(
<h1 className="encabezado">Mi titulo : {props.titulo}</h1>
)
}
Esta bien el codigo de arriba, pero, para evitar tener que escribir props + nombreAtributo se hace destructuring para tener las variables de forma "directa".
Por ejemplo : Si quisiera pasar una fecha al header. Tendria una variable con la fecha.
const fechaActual = new Date().getDate();
Y, en vez de hacer esto
<Header titulo='Tienda Virtual'
key=1
fecha = fechaActual/>
1) Se pasan los parámetros del componente padre al padre hijo (de la siguiente manera)
<Header
key=1
titulo='Tienda Virtual'
fecha = {fechaActual}/>
2) En el componente hijo que recibe esas "propiedades", en vez de hacer esto.
function Header(props){
return(
<h1 className="encabezado">Mi titulo : {props.titulo}</h1>
)
}
Hacer esto
function Header({titulo,fecha}){
return(
<Fragment>
<h1 className="encabezado">Mi titulo : {titulo}</h1>
<p>Hoy es {fecha}</p>
</Fragment>
)
}
En consecuencia, se pasa directamente "la variable" y no hay necesidad de hacer referencia con props.atr. Esto es debido a que props es un objeto, por esa misma razón se hace el destructuring, para tener en variables las propiedades de dicho objeto y ser usadas de forma directa.
¿Es necesario hacer esto? No, pero ayuda a que el código sea más limpio.
NOTA: En cada componente, es obligatorio pasar como atributo la propiedad key con un valor único como identificador, esto le ayuda a react a poder distinguir los componentes. Si bien, solo existe un header (o es lo normal), otros componentes como botones, tarjetas se pueden repetir varias veces y es necesario distinguir uno de otro para saber cual de todos manipular.
React Hooks
A partir de la version 16.8 se agrego esta nueva forma de escribir código en React, de momento, tal vez no todos los proyectos hechos con esta libreria tengan ese "soporte" ya que es casi nueva. Pero, es la nueva forma (definitiva) de escribir código. Mucho mejor que la forma de escribir el código antiguo por varios motivos. La razon es...
- Permite actualizar el State sin necesidad de crear un class Component
- El código se reduce considerablemente a comparación de la forma antigua de escribir código (functional componentes y class components).
Existen 2 tipos de Hooks
| Básicos | Avanzados |
|---|---|
| useState | useContext |
| useEffect | useRef |
| useReducer | |
| userCallback | |
| useMemo |
Bien, estos hooks, ¿es necesario aprenderlos todos? De momento, mi respuesta es no. No conozco a alguien (todavía) que domine al 100% algún lenguaje de programación junto con sus librerías o frameworks. Aqui es lo mismo, no es necesario aprenderlos todos.
De hecho, lo que te debes llevar de esta lectura (spoiler) seran los siguientes conceptos.
- useState
- useEffect
- Conceptos/Nociones de como funciona React.js
Ojo, estos hooks avanzados no son los únicos, existen más, pero estan enfocados a resolver problemas de Facebook o similares, pero siendo honestos, no creo que muchos de los lectores necesiten utilizarlos porque su proyecto sera un sistema distribuido con millones de peticiones por segundo.
useState
Una de las cosas que hace React.js es dibujar HTML y darle cierta funcionalidad al sitio web. Esto se hace con useState
Esta maravilla vino para solucionar los problemas que había al codificar con clases o funciones. No entrare mucho en detalle, pero, al utilizar useState nos ahorramos muchas líneas de código y código mas de los necesario para reutilizar los componentes que nos permite crear el DOM de una manera modularizada y eficaz.
Antes de continuar con la lectura, recomiendo ampliamente revisar este video que contrasta las diferencias entre el antes y despues de codificar en React.js
No voy a discutir, sobre si deberias aprendar a codear con hooks o sin hooks, pero en lo personal pienso que es más sencillo aprender esta "metodología" para dejar de lado la antigua codificacion.
Este Hook no viene importado por default al llamar la librería de React, para utilizarlo, se hace la siguiente linea de código.
import React,{useState} from 'react';
Con esto, ya somo capaces de utilizar la siguiente función o línea de código.
const [clientes,guardarCliente] = useState();
Entrando en profundidad... Use state nos permite hacer un array destructuring.
1) El primer valor clientes es el nombre de la variable, el nombre de nuestro estado con el cual podemos hacer la referencia del estado.
2) El segundo valor, es una "función" que nos permite cambiar el estado de la variable.
Todo ese array es igual a useState();, esta "función" denota el valor de nuestra variable (estado). Dentro de la funcion pasamos como parametro el valor inicial (si es que lo hay). Por ejemplo...
const [clientes,guardarCliente] = useState(['Pepito','Sandra']);
Eso, nos indica que tenemos un "estado" llamado clientes que tiene como valor inicial a 2 personas (Pepito y Sandra). Y, para que los clientes cambien de estado, se hará uso de la función llamada guardarCliente, (ya te imaginas que hará guardarCliente, ¿verdad?)
Asignación de useState
Retomando
const [clientes,guardarCliente] = useState(['Pepito','Sandra']);
A lo largo de la ejecucion, en algun momento voy a querer guardar un nuevo cliente, ya sea para tenerlo en mi lista con mails automatizados, mandar promociones, etc.
Si quisiera guardar un nuevo cliente, alguien que sabe javascript haria lo siguiente
clientes.push('Maria');
Y en efecto, ahora tendría un arreglo con 3 clientes. Pero esto no es la forma correcta de hacerlo, React tiene su "filosofia" donde no debemos alterar directamente el estado de nuestra variable. Por eso existe esa funcion como segundo valor en el destructuring.
Si te preguntan:
¿Se debe modificar el useState directamente? Tu dices...
¿Entonces como lo hago?. Con la funcion del state. En este caso, se esta manipulando un arreglo, y lo que se necesita, es agregar un nuevo cliente al estado de clientes. Para eso, nos podemos apoyar el método para arreglos spreadOperator.
guardarCliente([...clientes,miNuevoCliente]);
De esa forma, se ha agregado el nuevo cliente pero sin modificar directamente el estado. Esa el a forma correcto de cambiar el estado. Ya sea para agregar, eliminar, etc. Cualquier acción que se necesite cambiar en el estado, no debe ser de forma directa. Se puede, pero no es lo correcto
useEffect()
La tarea principal de React, como había dicho en el punto de useState es pintar el DOM con Javascript y poder alterar el estado para re-pintar un nuevo DOM con las nuevas modificaciones.
¿Entonces React solo sirve para eso? Vaya perdida de tiempo
Pues no, la librería permite hacer aplicaciones web ¿ya capte tu atención, no? Vamos a intentar aterrizar en algo antes de explicar que useEffect.
Por defecto, con el código de Javascript podemos hacer varias cosas en el navegador, como consultar una API para extrar datos, utilizar las APIs del navegador para hacer uso del gps, micrófono, etc. Eso con JS
Pero React, por contraparte, no puede realizar tales acciones. Pero si podemos actualizar el estado del DOM.
A lo que voy es, que React permite hacer un "puente" con Javascript.
React le comparte a JS como se debe pintar el DOM mientras que JS le comparte la información que ha "computado" a React para que haga el código que se encarga de volver a pintar.
Entonces...
¿Qué es useEffect?
Es una función que se ejecuta cada vez que el useState se actualiza o cambia de estado. Esta función por detrás hace "código" para poder crear aplicaciones web (obtener la información de APIs, por poner un ejemplo). Esta información "computada" sirve para crear el DOM con un poco más de criterio y no solo el html escrito en "crudo" por nosotros.
Para este concepto, recomiendo ver el siguiente vídeo. Sin duda una explicación muy completa con ejemplo practico para entender de que va esto del useEffect. Antes de revisar el enlace, ya debe estar muy claro que es useState (y haberlo practicado en algún ejemplo sencillo, de preferencia).
/* SE EJECUTA CADA QUE EL USESTATE CAMBIA DE ESTADO */
useEffect(()=>{
console.log('Navegador cargó o algo pasó en useState');
/* COMO SEGUNDO PARÁMETRO (opcionalmente)
UN ARREGLO VACIÓ PARA QUE SOLO SE EJECUTE 1 VEZ */
},[]);
[] que es el segundo parámetro de la función, es para escuchar los cambios de useState
PropTypes
Son una forma de documentar los componentes.
Se importa de manera normal el modulo
import PropTypes from 'prop-types';
Y normalmente, antes del export default se hace la documentación, de esta manera.
Formulario.propTypes = {
crearCita: PropTypes.func.isRequired
}
nombreComponente seguido de un . seguido de propTypes. Todo es es igual a un objeto el cual contiene el nombre de la propiedad(es) como atributo. El valor de dicho atributos es...
PropTypes (o el nombre que le hallas puesto al modulo que importa por default) seguido de . seguido del tipo de valor que recibe ese atributo. Opcionalmente puedes agregar mas "métodos" como .isRequired (es atributo obligatorio que debe recibir el componente) para denotar mas información
Eventos de React
Partiendo de este código
document.getElementById('caja').addEventListener("click",rellenarFondo);
Con eso, se rellena el background de un elemento div. Es lo que se conoce como eventos en el DOM, ya sea ondrop onclic mousedown etc. Todo esto, tambien se puede manejar en React, pero ya tenemos eventos en esta librería. ¿Como se utilizan los eventos entonces? Si no es "correcto" utilizar directamente el código de Javascript.
1) Al momento de crear un componente, se le puede pasar en las propiedades un atributo con el nombre del evento. La pregunta es, ¿y que eventos puedo manejar? Bueno, eso viene en la documentacion de React en este link . Es cuestion de revisar cual se necesita.
2) Esa propiedad, debe ejecutar una funcion. Una accion al capturar el evento. Entonces, como valor, se le pasa UNA FUNCION FLECHA QUE EJECUTA UNA FUNCION (callback)
Esto se explica mejor con código... Un ejemplo
Dentro del componente, se crea una función expresiva de tipo flecha de JS, por ejemplo, un console.log
const saludo = () => {
console.log('Hola mundo!');
}
Lo que sigue es pasar en los atributos el tipo de evento y la accion que va a realizar en consecuencia
<button>
type="button"
onClick = {()=>saludo()}
Saludar!
</button>
Con esto, al presionar el botón se mandara un saludo por consola, el evento puede ser cualquier mientras sea una función de tipo flecha que ejecuta una función expresiva del tipo flecha.
Esto tiene una razón, al hacer el código de esa forma, los eventos no se ejecutan al cargar el código del script, si no que esperan a ser accionados para realizar tal tarea.
Fragment
Retorna los elementos del componente sin necesidad de estar en una etiqueta contenedora
import React, {Fragment} from 'react';
<Fragment></Fragment>
Conclusión
Para iniciar a crear aplicaciones dignas de mostrar a un reclutador en alguna entrevista de trabajo, es aceptable iniciar poniendo en practica useState y useEffect. (Hooks, recomiendo encarecidamente utilizar esa nueva forma de escribir código)
Más las nociones de ¿qué es React? Ventajas de React ¿Para que utilizarlo? Las buenas practicas ¿Cómo es la forma de "pensar" al crear aplicaciones web utilizando esta librería? ¿Qué son los componentes? Etc.
Esto, solo ha sido una "recapitulacion" de los "3 pilares" a dominar en React.
- ¿Qué es y como trabaja React?
- useState()
- useEffect()
Queda implicitamente que ya dominas o te defiendes muy bien en el lenguaje de Javascript. De lo contrario, puedes checar esta entrada
Para ver en practica el código de los Hooks, esta serie de videos puede ser buena opcion para poner manos a la obra lo que se abarcó en esta entrada.
Top comments (0)