Glosario

Este es un glosario de terminos relacionados con el desarrollo de aplicaciones de React y Redux con los que se van a encontrar durante su carrera:

Librerías y herramientas

• React: Librería para crear interfaces de usuarios combinando componentes.
• Webpack: Herramienta para generar bundles con nuestro código separado en módulos.
• React Router: Librería para manejar rutas en nuestra aplicación de forma universal usando componentes de React.
• Redux: Librería para mantener, actualizar y acceder al estado de nuestra aplicación.
• Immutable.js: Librería que nos provee de estructuras de datos como mapas y listas inmutables y fáciles de usar.
• React Intl: Librería para crear aplicaciones multiidioma en React fácilmente.
• Next.js: Framework para crear aplicaciones con React usando server render y sin configurar nada.
• Node: Herramienta para ejecutar código JavaScript fuera del navegador utilizando el motor V8 de Chrome.
• npm: Administrador de paquetes y dependencias de JavaScript.
• ESLint: Herramienta para verificar nuestro código con base a ciertas reglas para evitar errores comunes y obligarnos a seguir buenas prácticas.
• Babel: Herramienta para soportar JSX y funcionalidades de JavaScript todavía no implementadas por los todos navegadores a los cuales queremos dar soporte.
• Create React App: Herramienta usada para iniciar proyectos (sin server render) fácilmente y sin necesidad de configuración.

React

• Elemento: Instancia de un componente de React o de un elemento del DOM.
• Componente: Pequeña parte de una aplicación que puede funcionar por si sola y reusable.
• Componente puro: Componente creado con una función que no posee estado ni ciclo de vida.
• Componente de estado: Componente que posee un estado interno o métodos del ciclo de vida.
• Componente de UI: Un componente de puro creado exclusivamente para generar una UI específica con base a los props recibidos.
• Contenedor: Componente de estado creado exclusivamente para mantener el estado de uno o más componentes de UI y manejar métodos del ciclo de vida.
• Ciclo de vida: Etapas de la vida de un componente desde que se instancia, monta, actualiza y desmonta del DOM.
• Estado: Estado interno de un componente que se ve representado en el DOM generado.
• Render: Proceso de pintar en la pantalla un DOM generado por la combinación de elementos de React.
• Componente de Alto Orden: Función que recibe un componente y nos devuelve un nuevo componente con funcionalidades extendidas.
• Contexto: Datos globales accesibles desde cualquier componente fácilmente.

Webpack

• Entry point: El archivo inicial de nuestra aplicación al partir del cual Webpack lee todos nuestros módulos.
• Bundle: Archivo generado que contiene todo el código de nuestra aplicación.
• Loader: Función usada para recibir el contenido de ciertos archivos y devolver otro tipo de archivo.
• Plugin: Función para implementar nuevas funcionalidades en Webpack como minificar código o evitar código duplicado.

Redux

• Store: Objeto que almacen el estado actual, nos provee de la función para actualizar el estado y para suscribirnos a los cambios.
• Estado: Es un objeto que contiene como está la aplicación, la lista de datos, la vista actual, el usuario logueado, etc.
• Reducer: Función usada por Redux para actualizar el estado con base a una acción.
• Acción: Objecto de JavaScript que describe un cambio que queremos realizar al estado.
• Acción asíncrona: Acción usada para realizar tareas asíncronas como peticiones HTTP y luego generar acciones normales.
• Creador de acciones/Action creator: Función que con base a los parámetros recibidos genera un objeto de acción.
• Middleware: Función que nos permite realizar tareas asíncronas en una aplicación de Redux con base a acciones despachadas.

Generales

• Código fuente/Source code: Archivos originales de la aplicación (no listos para producción).
• Archivos estáticos/Static files: Archivos listos para producción (normalmente generados por Webpack) que luego son enviados al usuario mediante un servidor especializado.
• Backend for frontend (BFF): El servidor que recibe las peticiones del usuario al entrar a nuestra aplicación, genera y envía el HTML inicial mediante server render.
• Servidor de estáticos: Un servidor especializado en enviar archivos estáticos al navegador, normalmente reemplazado en producción por un CDN.
• Content Delivery Network (CDN): Red de servidores de estáticos distribuidos para reducir el tiempo de descarga de archivos estáticos.
• Renderizar en sevidor/Server Render: Técnica que consiste en generar el HTML de una aplicación en el servidor para poder enviarlo al usuario, mejorando le rendimiento de la carga inicial.
• Renderizado en el cliente/Client Render: Técnica que consiste en generar el HTML de una aplicación en el navegador, usada luego de que cargue JavaScript para poder actualizar nuestra aplicación sin necesidad de recargar la página.
• Infinite scrolling: Técnica usada para cargar más datos cuando el usuario está por hacer scroll hasta el final de la página.
• Lazy Load: Técnica usada para evitar cargar imágenes y otro tipo de estáticos hasta que no sean necesarios.
• Universal/Isomórfico: Código que es capaz de ejercutarse tanto en el cliente como en el servidor.
• API: Forma que tienen los servidores para permitirnos comunicarnos y obtener, crear, actualizar o borrar datos.
• API Rest: Un API que utiliza los métodos HTTP (GET, POST, PUT y DELETE) y los códigos de estado (200, 400, etc.) para facilitar la comunicación con el servidor.
• Minificación: Técnica usada para eliminar espacios, saltos de líneas y reducir los nombres de variables y funciones y así generar código más ligero.
• Code splitting: Técnica usada para separar código en varios archivos y cargarlos asíncronamente cuando sean necesarios.
• Deploy a producción: Proceso de llevar nuestros archivos desde nuestra computadora (entorno local) a un servidor online y accesible para todos.