Upload
others
View
5
Download
0
Embed Size (px)
Citation preview
“React - Conceptos”
Rogelio Ferreira Escutia
Definición
3
React.JS
"Advanced Guide to Python 3 Programming", John Hunt, Springer Nature Switzerland AG 2019
¿Qué es React.JS?
Historia
5
Modelo Clásico MVC
"Introducción a MVC y su aplicación en desarrollo web", https://blog.michelletorres.mx/introduccion-mvc-desarrollo-web/, mayo 2020
En el modelo clásico MVC (Modelo+Vista+Controlador) se separan los componentes de desarrollo (separando HTML, CSS y Javascript) y gran cantidad de sitios Web funcionan de esta manera.
6
Modelo de Facebook (inicial)
"¿Qué es React JS? Breve explicación animada", https://www.youtube.com/watch?v=1-2eyS0k-IA, mayo 2020
Al principio Facebook trabajaba con un modelo de tipo Binding (Vista – Datos) el cual se empezó a ver muy ineficiente al crecer la cantidad de usuarios conectados a Facebook:
7
Rediseño de Facebook
"¿Qué es React JS? Breve explicación animada", https://www.youtube.com/watch?v=1-2eyS0k-IA, mayo 2020
Facebook convocó a sus ingenieros a rediseñar su sitio Web para poder ser mas eficientes:
8
Nacimiento de React
"¿Qué es React JS? Breve explicación animada", https://www.youtube.com/watch?v=1-2eyS0k-IA, mayo 2020
El nuevo Framework para trabajar con la interfaz de usuario tuvo muy buen resultado y se le denominó React:
9
React.JS
Pete Hunt: React: Rethinking best practices -- JSConf EU", https://www.youtube.com/watch?v=x7cQ3mrcKaY, mayo 2020
Pete Hunt presenta “React” en la Conferencia JSConf en Estados Unidos en el 2013.
10
React.JS
"Frameworkless Front-End Development", Francesco Strazzullo, Apress Editorial 2019
Se convirtió en Open Source en 2013.
Actualmente es el Framework mas popular.
Características
12
React - Características
"¿Por qué React.js transformó el desarrollo web para siempre?", https://www.youtube.com/watch?v=x_JbIl9SS0E, mayo 2020
Uso de componentes (todo es un componente).
Los componentes son piezas de la interfaz.
Los componentes se pueden reusar.
Los componentes usan el Lenguaje JSX (muy parecido a Javascript.
Uso de un DOM virtual para detectar los cambios cuando haya y en ese momento pasarlos al DOM real, modificando únicamente los nodos donde hubo cambios, lo cual le da mucha velocidad al desempeño de React.
13
DOM Virtual de React
"¿Qué es React JS? Breve explicación animada", https://www.youtube.com/watch?v=1-2eyS0k-IA, mayo 2020
React crea su propio DOM virtual y cuando detecta un cambio actualiza el DOM real, pero sólo los componentes afectados:
14
Componentes
"¿Qué es React JS? Breve explicación animada", https://www.youtube.com/watch?v=1-2eyS0k-IA, mayo 2020
Las “Vistas” se descomponen en diferentes “componentes” independientes y reutilizables:
15
Construcción de Componentes
"¿Qué es React JS? Breve explicación animada", https://www.youtube.com/watch?v=1-2eyS0k-IA, mayo 2020
Cada componente encapsula su propia lógica y presentación, que a su vez es independiente de otros componentes:
Desarrollo para Móviles
17
React Native
"The Top 10 Frameworks and What Tech Recruiters Need to Know About Them", https://stackoverflow.blog/2019/12/17/the-top-10-frameworks-and-what-tech-recruiters-need-to-know-about-them/, mayo 2020
Usando React Native se puede compilar el código a IOS y a Android, por lo cual no se requiere hacer códigos por separado para esas plataformas.
Uso de React.JS
19
Soporte de React
"¿Qué es React JS? Breve explicación animada", https://www.youtube.com/watch?v=1-2eyS0k-IA, mayo 2020
Actualmente es soportada por Facebook e Instagram y una gran comunidad de desarrolladores por todo el mundo:
20
Uso de React
"¿Qué es React JS? Breve explicación animada", https://www.youtube.com/watch?v=1-2eyS0k-IA, mayo 2020
Cada día mas compañías adoptan React para el desarrollo de sus sitios.
Actualmente React.JS es el Framework para el Front-End mas usado en el Mundo.
21
Top Ten Frameworks 2020
"The Top 10 Frameworks and What Tech Recruiters Need to Know About Them", https://stackoverflow.blog/2019/12/17/the-top-10-frameworks-and-what-tech-recruiters-need-to-know-about-them/, mayo 2020
Rogelio Ferreira Escutia
Instituto Tecnológico de MoreliaDepartamento de Sistemas y Computación
Correo: [email protected] [email protected]
Página Web: http://sagitario.itmorelia.edu.mx/~rogelio/http://www.xumarhu.net/
Twitter: http://twitter.com/rogeplusFacebook: http://www.facebook.com/groups/xumarhu.net/