Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Qué es React y cómo se construyó

7/28
Recursos

Aportes 19

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

He hecho un montón de cursos prácticos, cuando termino me quedo con el código, contenta que programé, pero con una profunda sensación de vacío porque en el fondo repliqué pero muchas veces no entendí lo que hacía. Para mi este curso me ha dado una amplia visión de contexto para entender como se conecta y funciona la tecnología. Es un curso compilatorio que me ha respondido un montón de preguntas. Un monitor joven y entusiasta, me ha encantado la forma de explicar. Hay un montón de cursos para copiar código pero pocos que te dan los fundamentos para efectivamente entender como se integran las tecnologías. Aprender una herramienta te puede dejar obsoleto rápidamente. Entender cuál es su papel en el ecosistema te ayudará a adaptarte rápidamente al cambio, lo que es clave especialmente en estos tiempos.

Al programar de forma imperativa debemos escribir código que nos indica paso a paso cómo evoluciona nuestra aplicación. En cambio, al programar de forma declarativa le damos más importancia a qué vamos hacer, luego nos encargaremos de cómo lo debemos hacer.
useState vs. useReducer: cómo evitar el código espagueti

ECMAScript es estándar en el que se basa JavaScript, es la especificación del lenguaje de programación JavaScript; y lo que conocemos como Javascript es la implementación que hace cada navegador de esta especificación.

En 2005 surgió ECMAScript for XML, un estándar para agregar soporte nativo de ECMAScript a XML. Era una alternativa a la forma en la que se trabaja con el DOM.

En 2010, inspirados en ECMAScript for XML, Facebook estaba trabajando en XHP, una “mejora” a PHP con la que pretendían crear componentes personalizados y reutilizables de HTML y lo integraron a su Stack.

En 2011, bajo la influencia de XHP y los problemas que tenía Facebook, se creó el prototipo de React JS. Una herramienta para desarrollar aplicaciones con la que pudieran mejorar la eficiencia del los desarrolladores y seguir ofreciendo una buena UX.

En 2012 React se volvió Open Source.

En 2014 llegaron las React Developer Tools, un conjunto de herramientas para depurar componentes de React.

En 2015 apareció React Native, y con él muchas empresas grandes empezaron a utilizar React.

<h3>Objetivos de React</h3>
  • Declarativo: Se refiere a que sea fácil de leer.
  • Basado en componentes: Que todo este formado por componentes.
  • Multiplataforma: Significa que podremos utilizar React en cualquier plataforma con solo pequeños cambios.

Existe un gran ecosistema de herramientas relacionadas con React, algunas desarrolladas por Facebook y otras por creadas por la comunidad. Por ejemplo:

  • React DOM: Se utiliza para renderizar los componentes de React en el navegador.
  • React Native: Usado generalmente para crear aplicaciones móviles.

Hay dos formas de crear componentes con React: con una clase y con una función

Al crear componentes con una clase esta usa un función render y dentro una función return. Dentro de esta ultima se encuentra el código JSX para crear el componente. Además, React utiliza las llamadas props para presentar ciertas partes del componente de manera dinámica.

React también cuenta con el state, que nos sirve para cambiar el contenido de las variables dependiendo de la interacción del usuario. Este estado es un objeto donde podemos definir propiedades para después hacer uso de ellas. Cuando React detecta un cambio dentro del state automáticamente se vuelve a renderizar el componente mostrando los nuevos datos.

7.-¿Qué es React y cómo se construyó?

ECMAScript es el estándar en el cuál se basa JS, es la especificación. Lo que conocemos como JS es la implementación que hace cada navegador de esta especificación.

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.

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.

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).

En 2012 cuando FB compró Instagram, React se desarrollo para ser Open Source

Llega 2014 y se crean las React Developer Tools una herramienta para debuggear los componentes en React.

En 2015 salió React Native y muchas empresas importantes deciden usar React.

React

Todos los frameworks tienen uno o varios objetivos en específico, en el caso de React 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.

Creo que como soy el unico que escribe los codigos que da de ejemplo en la clase notó que faltó cerrar un parentesis en la imagen del minuto 7:40, en la linea 8, … this.setState( … . Seguramente lo hizo a proposito para que prestaramos atencion (?) 😃

¿En algún vídeo tumbas las plantas, Juan? 😅

React js
Librería open source creada por Facebook.

Características:

  • Declarativo: Muy fácil de leer.

  • Componend-based: Un punto fuerte de React es que es basado en componentes.

  • Multipllataforma: “Learn once, Write anywhere”. Al aprender React, lo podemos utilizar en diferentes plataformas.

Herramientas:

  • Web: React DOM
  • Movil: React Native
  • Virtual Reality: React VR

Porque React es una librería y no un framework?

Muchas veces podemos llegar a confundir a React con un framework, cuando realmente no lo es.
.
La principal diferencia cuando usamos un framework a una librería, es que el framework nos va a dar todas las herramientas que necesitamos por defecto. En otras palabras, el framework nos va a estar dando todo lo que necesitamos y lo que necesitaremos para crear nuestra aplicación web desde el momento en que creamos el proyecto.
.
Por otro lado, la librería no, ya que es solo una herramienta aislada. La principal razón por la cual se suele confundir a React con un framework, es porque React tiene todas esas herramientas que se necesitan para hacer tu aplicación completa, pero no vienen incluidas al momento de crear el proyecto. Unos ejemplos de esas herramientas son: React DOM, React Proto, etc.
.
Entonces, al momento de que tu hagas tu webapp con React, puedes decidir si usar las herramientas hechas por los desarrolladores de React, o usar otras herramientas hechas por la comunidad. Esa es una gran ventaja, ya que cuando se trabaja con Angular, solo puedes usar herramientas oficiales de Angular y ya, con limitaciones para agregar librerías ajenas.

React usa JSX que mezcla HTML con JS.

Los hooks vinieron ahorrarnos mas codigo, nuestro código queda limpio.

Por fin entro de lleno a aprender que es React tanto que lo mencionan en ofertas laborales pero nunca lo he utilizado

tu cursos es muy teorico y aburrido , donde esta la practica??? next!!!

EcmaScript es el estandar en el que se basa JS, es la especificacion del lenguaje y JS es la implementacion que hace cada navegador de esta especificacion. en 2005 se agrego EcmaScript for XML y facebook se inspiro en esto para hacer xphp que era una mejora para crear componentes personalizados. Pero en 2011 inspirado por XPHP se creo el prototipo de REACT. Una herramienta con buena UX y que mejorara la experiencia del equipo de desarrollo.En 2014 se inventaron las React Developer Tools una herramienta para hacer debugging de los componentes en react. En 2015 nacio react native pero lo especial o sus objetivos son:

  • Declarativo:

Muy facil de leer, que con su sintaxis al entrar a un archivo no se te complique entenderlo

  • Basado en componentes:

Que todo este basado en componentes como visto anteriormente

  • Multiplataforma:

Aprende una vez, escribelo siempre. React tiene un gran ecosistema de herramientas para poder trabajar multiplataforma. Cuando trabajemos en REACT vamos a juntarlo con REACTTOM que es la herramienta de FB oficial para hacer el render. Para hacer una aplicacion movile seria React Native.

Hay dos formas de crear componentes con react, la primera que es con clases. Creamos clases de JS que extienden de la clase React.Component y por dentro solo escribiremos los metodos como el render para indicarle que elemento vamos a renderizar. Pero aqui necesitamos a BABEL porque usamos HTML en JS. que babel lo va a traducir. React con sus props podemos mostrar que pueden ayudar a mostrar un componente fijo o a algo mas dinamico.

Tambien podemos realizar una caracteristica que es el estado que nos permite cambiar el contenido de una variable dependiendo de la interaccion del usuario.

Esa es la forma en la que se trabajaba antes, ahora se utilizan REACT HOOKS, funciones que nos permiten leer y escribir nuestro estado de una forma mas limpias. Y En vez de escribirlo en un metodo RENDER, podemos simplemente RETORNAR.

"por allá en 2004, 2005… " me sentí viejo hahahaha

Paradigma Declarativo o Predicativo Basado en la utilización de predicados lógicos o funciones matemáticas, su objetivo es conseguir lenguajes expresivos en los que no sea necesario especificar como resolver un problema (programación convencional imperativa).

Hola Platzi! ¿Cómo va? Estoy armando una carpeta de Google Docs con la toma de notas de todos los cursos que voy realizando para que entre todos podamos aportar!

Los invito a participar!
https://drive.google.com/drive/folders/1SWGMgTMPbwgasbzcivcpcnIudc2vk_v0?usp=sharing

Creo que habían algunas diapositivas(por la forma en la que mueve la mano derecha)

zzzz

si deseo teoria googleo nomas, que aburridasoo este profe , no pasa nada