REACT

Grupo #4
Integrantes:
Ana María Cordero Aguilar 1590-19-10947
Gervin Romario Gómez y Gómez 1590-16-15776
Juan Máximo Uz Tiu 1590-17-4456
Ricardo Alberto Morales Abrego 1590-19-9272
José Manuel Bolaños Alonzo 1590-19-6865
¿Qué es React?

Es una biblioteca Javascript de código

abierto diseñada para crear interfaces de
usuario con el objetivo de facilitar el
desarrollo de aplicaciones en una sola
página. Es mantenido por Facebook y la
comunidad de software libre.
Un poco de Historia
Fue diseñada por Jordan Walke, un programador de
Facebook, que trató de solucionar con ella los
problemas que presentaba esta red social al
incorporar los anuncios. Aunque la labor de Walke
comenzó allá por 2010, no fue hasta el mes de
mayo de 2013 cuando la compañía de Mark
Zuckerberg lanzó al mercado React como una
solución de código abierto. Desde ese momento,
han sido y son muchos los entusiastas de esta
librería que han contribuido a su mejora.
 • DOM virtual: La principal ventaja de React es
poder generar el DOM (“Modelo de Objetos del
Por qué es Documento”, estructura de los elementos que se
generan en el navegador web al cargar una
necesario página) de forma dinámica
• Amplia comunidad: Al estar basado en
conocer y JavaScript, cuenta con una amplia comunidad
aplicar esta que dispone de un gran número de librerías
externas.
Librería • Compuesto por componentes: Las aplicaciones
webs desarrolladas con React están basadas en
componentes reutilizables
• ECMAScript 6: Aporta mayor legibilidad y
versatilidad al código, lo cual facilita el
desarrollo del software
• Isomórfico: Con React es posible construir el
HTML con el contenido ya renderizado y
obtener un posicionamiento web óptimo
como un WordPress.
• Integración con Redux: Al tratarse de una
librería, podemos agruparla junto a otras
librerías como Redux para conseguir mayor
funcionalidad y facilitar el desarrollo.
• React Native: Facilidad para generar
aplicaciones móviles usando el mismo código
JavaScript de la aplicación web.
Importancia en Desarrollo
Web – Frontend
React es un lenguaje de frontend que funciona dentro
de JS para mejorar las funciones de usabilidad
React se hizo popular debido a la amplia variedad de
herramientas disponibles para mejorar la experiencia
del usuario. Según SimilarTech, más de 1.383.672 sitios
web en todo el mundo utilizan actualmente
React.JS. Los países líderes que utilizan React como
lenguaje de frontend son Estados Unidos, China y el
Reino Unido.
 ✓ Composición de componentes.
✓ Desarrollo Declarativo Vs Imperativo.
✓ Flujo de datos unidireccional.
✓ Performance gracias al DOM Virtual.
Características ✓ Isomorfismo.

de React ✓ Elementos y JSX.

✓ Componentes con y sin estado.
✓ Ciclo de vida de los componentes.
✓ Ideal para aplicaciones de alta demanda
✓ Permite el desarrollo de aplicaciones móviles
Ventajas

• Fácil de aprender. React es mucho más sencillo de aprender por su

simplicidad en términos de sintaxis.
• Gran nivel de flexibilidad y máxima ‘responsividad’.
• DOM Virtual (Modelo de Objetos del Documento) que permite convertir
documentos en formato HTML, XHTML o XML en un árbol más manejable para
los navegadores mientras sean diferentes elementos de la aplicación.
• Combinado con ES6/7, ReactJS puede trabajar con alta carga fácilmente
• Vínculo de datos ‘hacia abajo’ lo que significa que con este tipo de flujo de
datos los elementos ‘hijo’ no puede afectar a los datos ‘padre’.
• Librería JavaScript 100% código abierto con frecuentes actualizaciones y
mejoras de desarrolladores de todo el mundo.
Desventajas

AUSENCIA DE DOCUMENTACIÓN OFICIAL. LA ALTA NO EXISTE UN ESTÁNDAR DE DESARROLLO, DE MODO REQUIERE MUCHO TIEMPO PARA DOMINARLO, ASÍ
VELOCIDAD DE DESARROLLO DE REACT APENAS DEJA QUE TENEMOS DEMASIADAS ELECCIONES A TOMAR. COMO UN PROFUNDO CONOCIMIENTO DE COMO
LUGAR A UNA DOCUMENTACIÓN APROPIADA INTEGRAR INTERFACES DE USUARIO EN
FRAMEWORKS MVC.
Aplicaciones o
Usos
 • Facebook
• Instagram
Apps que • WhatsApp
utilizan React • Netflix
• Dropbox
Sintaxis

• JavaScript
• JSX
Componente
funcional

• Debe retornar un elemento de React (JSX)

• Debe comenzar con una letra mayúscula
• Puede recibir valores si es necesario
 • Debe extender de React.Component
Componente clase • Debe tener un método render() para retornar un
elemento de JSX.
• Puede recibir valores si es necesario
 • Los elementos utilizan letra minúscula al inicio
Crear componentes • Los componentes utilizan letra mayúscula al inicio
Asignando estilo en JSX

• Se debe crear un objeto con los estilos y debe

utilizar camelCase, descartando el guion que
pueda tener algunos estilos. Se recomienda si
quieres aplicar css de forma dinámica.
Ejemplo