REACT

¿Cómo se construyo?

1. En 2004/2005 se inventó ECMAScript for XML un estándar para agregarle soporte nativo de ECMAScript a XML, era como una alternativa al DOM.
2. En el 2010 Facebook trabajaba en XHP una “mejora” a PHP con la que querían crear componentes personalizados y reutilizables de HTML y lo integraron a su stack oficial de programación.
3. En 2011 bajo la influencia de XHP y los problemas de mantenimiento de código, concretamente los anuncios se crea el prototipo de React.js una herramienta para hacer aplicaciones con muy buena UX mejorando la eficiencia de los equipos de programación de FB (buena developer experience).
4. En 2012 cuando FB compró Instagram, React se desarrollo para ser Open Source
5. Llega 2014 y se crean las React Developer Tools una herramienta para debuggear los componentes en React.
6. En 2015 salió React Native y muchas empresas importantes deciden usar React.

¿Qué es React?

Todos los frameworks tienen uno o varios objetivos en específico, para React estos son:

• Declarativo: Se refiere a que sea fácil de leer, o sea que con su sintaxis se nos facilite entender lo que hace.
• Basado en Componentes: Que usemos componentes (los que hemos visto a lo largo de este curso).
• Multiplataforma o “Learn Once, Write Anywhere”: Al aprender React lo vamos a poder usar en todas partes con un poco de cambios minúsculos, esto pasa porque aunque es una librería no está solo, hay muchas herramientas alrededor de React, algunas son oficiales de FB y otras son de la comunidad.

Cuando usemos React para Web es juntarlo con React DOM, que es la herramienta oficial de FB para hacer el render en el DOM, si queremos hacer una app móvil debemos usar React Native y si queremos hacer aplicaciones en VR usamos React VR. La diferencia entre web, móvil y VR es que en lugar de usar div, p o etiquetas de HTML tenemos que usar componentes que nos da React, que en esencia son lo mismo.

Hay dos formas de crear componentes con React:

• Con clases: Solía ser la más popular, creamos clases de JS que extienden de React.Component y por dentro solo debemos escribir algunos métodos (como render) para indicarle a React que contenido debe renderizar. Para poder escribirlo como si fuera HTML normal usamos jsx. Los componentes de React o cualquier otro Framework tienen la característica de que pueden mostrar un contenido fijo o dinámico.
  • Con estados: Nos permite es cambiar el contenido de una variable dependiendo de las interacciones de un usuario. En el ejemplo de la clase, cada vez que un usuario le de click al botón vuelve a hacer render de nuestro componente con el nuevo estado que surgió.
• React Hooks: Hoy en día esta es la formula más popular, que en lugar de usar clases, métodos, ahora usamos los React Hooks , son funciones que nos permiten leer y escribir nuestro estado de manera muy limpia, además de que lo que normalmente escribiríamos en el método render lo podemos escribir en el return de la función.

CodeSandbox

react-movies

MATERIAL EXTRA

The History of React.js on a Timeline - RisingStack Engineering

DOM vs. Virtual DOM | ¿Cuál es la mejor estrategia de render en el navegador?

Estado y ciclo de vida - React

Componentes y propiedades - React

ANGULAR

¿Cómo se construyo?

1. En 2009 un equipo de programadores querían crear una herramienta para personas que no sabían programar pero que si sabían HTML pudieran hacer web apps, pero no tuvieron éxito 😦.
2. Tiempo después uno de ellos (Misko Hevery) se fue a trabajar en Google Feedback que a simple vista se veía sencillo pero para construirlo se necesitaron 17k líneas de código solo en el Frontend usando incluso Google Web Toolkit un framework de Google que se suponía debía reducir la complejidad del código, es por esto que le apostó a su jefe que lo podía hacer desde 0 y más sencillo en dos semanas (se tardó 3 y solo usó 1500 líneas), así nació Angular JS.
3. En el 2010 Angular se hizo Open Source y patrocinado por Google.