“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: rogelio@itmorelia.edu.mx rogeplus@gmail.com

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/