Desarrollo de Aplicaciones con React.js: Componentes y Hooks
Contenido del curso
Jenny Aguilar
Eduardo Kiriakos Piazza
David Felipe Castaño Cadavid
David Campos
Jimmy Buriticá Londoño
Christian Beltran
Juan Pablo Jimenez
LUIS GUILLERMO NIETO PATIÑO
Pablo Nicolás Alonso
Kevin Acevedo
Jesus Velasco
Cristian Blandon
Juan Castro
Profesor
Irving Juárez
Juan Diego Quintero Calderón
Raiza Gatica
Orangel Gonzalez
Reinaldo Mendoza
Jorge De Jesus Tejeda Bello
Víctor Isaac Arias García
Reinaldo Mendoza
Nicolas Velasquez Lopez
Joel Eduardo Sánchez Herrera
Rubén Cuello
Juan Castro
Profesor
Diego Raciel Ortega Hernandez
Isidro J. Gallardo Navarro
Juan Sebastian Aparicio Ordoñez
Jesús Álvarez
Reinaldo Mendoza
María Antonia Lobato
Rafael Lizarraga
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.
Me pasa totalmente lo mismo. Amé la forma en que lo explicas!
Juan David es uno de los mejores profes de platzi, su claridad para explicar es muy buena.
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.
Objetivos de React
Existe un gran ecosistema de herramientas relacionadas con React, algunas desarrolladas por Facebook y otras por creadas por la comunidad. Por ejemplo:
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.
Muy buen aporte, gracias.
Gracias amigo !
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:
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:
gracias por la informació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 (?) :)
x2
Si cerro mas abajo!!!
¿En algún vídeo tumbas las plantas, Juan? 😅
No voy a negar ni afirmar...
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 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:
Les pasa q en cada clase abren otra pestaña con un link de algo mas que sienten que tienen q aprender si o si ? jajaja por eso el slogan de Platzi "Nunca pares de aprender" jajajaja
React usa JSX que mezcla HTML con JS.
Mezcla las sintaxis
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
Buen inicio y exitos
Hola! 💚 Estas son mis notas, puedes encontrar el documento completo en mi GitHub
Qué es React y cómo se construyó
EcmaScript es la especiicación del lenguaje JS
Jordan Walke creo React en mayo de 2013. Influenciado por el problema de implementación de anuncios de Facebook, eventualmente Reat se volvió open source, aunque sigue siendo de Facebook, luego llegaron las herramientas para debugging.
Con el tiempo más y más empresas lo implementaron en sus páginas.
Caracteristicas de React
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:
Muy facil de leer, que con su sintaxis al entrar a un archivo no se te complique entenderlo
Que todo este basado en componentes como visto anteriormente
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.
Puede ser que la etiqueta de cierre </p> que aparece en 8:40 en verdad sea el cierre de la etiqueta buttón? </button>. No entiendo nada de react, solo estoy tratando de seguir el curso con lo que se de html.
Ay dioooos
No, ese es un error de los slides. Esa etiqueta de cierre debería decir </button>. :flushed:
Este curso es de lejos el mejor que visto en mas de 30 cursos entre mis dos cuentas. Este curso contiene todo ese conocimiento que en su momento me costo obtener poco a poco El mejor que e visto Ahora me sirve de muy poco pero como lo hubiera amado si lo hubiera tomado un año atras
Esta clase vale por 5 cursos. Para mi.
Qué claridad la del profe 👏
Estas clases con datos históricos de las tecnologías me encantan
Creo que habían algunas diapositivas(por la forma en la que mueve la mano derecha)
Creo que va leyendo y moviendo el texto ; )
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