Curso Pr谩ctico de React.js

Curso Pr谩ctico de React.js

Oscar Barajas Tavares

Oscar Barajas Tavares

Conceptos fundamentales de React

2/29
Recursos

Aportes 33

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

JSX

Es la extensi贸n de archivos que se usa en react donde podemos hacer html dentro de js facilitando el uso sacando lo mejor de html css y js.

Virual DOM

Es una copia del DOM real y lo que hace es compararlo, asi cuando existe algun cambio no se tiene que renderizar toda la pantalla si no solo lo que se cambio mejorando el desempe帽o de nuestra app, como lo comente antes esto es por que se compara el Virtual DOM con el DOM Real encontrando los cambios

Ciclo de vida

Este concepto es ampliamente conocido en la programaci贸n, en este curso vamos a conocer cual es el ciclo de vida de los elementos que vamos a crear en react desde que nace, se combina hasta que muere

Estado

Esto es fundamental, ya que podemos ver los estados y ver como es el flujo de la informaci贸n entre componentes a travez de un imputs, botones, interacciones entre otros elementos

para no olvidar鈥

Apuntes


  • JSX se refiera a Javascript XML. Nos permite escribir html dentro de Javascript. React no requiere usar JSX, sin embargo la l贸gica detr谩s de los componentes, promueven el uso del mismo, porque usamos unidades l贸gicas centralizadas. En cambio, si tuvi茅ramos diferentes archivos para separar el html y el JS, se perder铆a la utilidad.
  • Virtual DOM es un concepto precioso de React. El virtual DOM es una copia en memoria del DOM normal del navegador. Pero 驴por qu茅 hacer una copia? Bueno, cuando el UI cambia de estado, normalmente el DOM es muy lento. Sin embargo, virtual DOM es extremadamente r谩pido. Lo que ocurre es que primero, todo se computa en el virtual DOM, se actualiza por completo el virtual DOM (a pesar de que se re-renderiza el virtual DOM, no afecta el rendimiento porque primero no se tiene que mostrar gr谩ficamente y realmente es muy r谩pido) y realiza el proceso de diff que compara ambos DOM para despu茅s igualar o 鈥渞econciliar鈥 ambos UI y cambiar el aspecto de la manera m谩s corta y r谩pida posible.
  • Ciclo de vida se refiere al proceso de cuando los componentes son creados, actualizados y eliminados. O de otra manera 鈬 nacen, crecen y mueren.
  • Estado son los datos que est谩n dentro del componente. Estos pueden ser actualizados usando diferentes m茅todos. Los estados son muy importantes en React, pues son encargados de actualizarse cada vez que se cambian, afectando a los dem谩s nodos del virtual DOM.
  • Eventos los componentes, pueden configurarse con eventos como onclick para responder antes ciertas interacciones con el usuario, tal como los har铆amos en Html
  • React Hooks es otra manera de escribir los componentes con estado, si usar clases. No se pretenden reemplazar, sin embargo, usar funciones para los componentes pueden facilitar el entendimiento de la aplicaci贸n.

Yo les recomiendo la siguiente extensi贸n para transformar html a jsx

Pueden echarle un ojo a mi p谩gina web, en la c煤al tengo una secci贸n de React con toda la informaci贸n de los Cursos de Platzi y recursos extra que he a帽adido. Espero que les sea 煤til 馃槂
Alejandria React

Cada uno de los conceptos mencionados en la clase son clave para que podamos utilizar React. Puede que en la teor铆a no sea tan f谩cil de entender, pero te voy a poner un ejemplo de cada uno de ellos:

  • JSX: Az煤car sint谩ctica que usa React, es como si escribieras html desde js, pero con loops e if statements.
  • Virtual DOM: Compara los cambios que se hayan hecho en la pagina, para no tener que cargar toda la pagina desde 0. Esa es una de las razones por las cuales React es tan fucking r谩pido. Aunque la 煤nica desventaja es que consume mas memoria RAM (ya que se guarda una copia de la Real DOM)
  • Ciclo de vida: Cada componente tienen un ciclo de vida. Cuando ya se han pintado en pantalla, puede que queramos hacer algo con ellos, as铆 como cuando cambiamos de pagina hay que eliminar a estos componentes, ya que aunque no se vean puede que sigan por ah铆 y puedan causar problemas
  • State: El estado es importante ya que este nos va a decir si un componente esta en loading, hay error o si ya podemos pintarlo en la pantalla.
  • Events: Justo como cuando manipulamos el DOM, hay que recordar que JSX es solo js
  • Hooks: Honestamente no se como funcione esa magia negra

JSX: JavaScript + HTML
Virtual DOM es una copia del DOM.
El virtual DOM lo que hace es compara entre la copia antes de la actualizaci贸n y la actualizaci贸n y una vez que sabe cu谩les fueron los cambios, 煤nicamente esos son los que se actualiza en el DOM.

驴Qu茅 es JSX?

Es un sistema de plantillas basado en la combinaci贸n de JSX y JavaScript. Es la forma en la que dentro de un HTML vamos a poder integrar c贸digo de JavaScript.

Virtual Dom

No confundir con el Real Dom pues este es el que suele ser creado cuando estamos creando una aplicaci贸n. Virtual Dom suele ser una representaci贸n del Real Dom. Esto es para visualizar los cambios del real dom en el virtual dom. Esto es para no tener que actualizar la URL nuevamente como si es el caso dentro de lenguajes como PHP.

Estado

Como vamos a mantener una pieza de c贸digo que nos va a permitir establecer la comunicaci贸n con direnetes estados que va a tener la aplicaci贸n. Pero sobre todo como va a reaccionar ese componente al estado.

Conceptos importantes para trabajar con REACT.JS

  • JSX: JAVASCRIPT Y XML
  • DOM: Document Object Model
  • CICLO DE VIDA: Todo el proceso desde que inicia el componente hasta que se destruya el mismo.
  • ESTADO: Clave para mantener o transmitir informaci贸n entre componentes
  • EVENTOS: Desencadenan las acciones que realizaran nuestras p谩ginas
  • HOOKS: Ganchos para trabajar con el estado, ciclo de vida, actualizaci贸n de algun elemento.

Muy bien resumido, deja claro con qu茅 vamos a estar trabajando, gracias!!

Here we go!!! Hurra por el primer comentario de esta clase.

JSX Es JavaScript, pero podemos usar una sintaxis similar a HTML, pero no es HTML, Babel es quien se encarga de transformar El c贸digo JSX a JavaScript, adem谩s babel tiene otras funciones como volver nuestro c贸digo js compatible para los distintos navegadores:


Aqu铆 puedes probar babel y ver como este transforma el c贸digo

Los cursos practicos con Oscar si son oro puro 鉁

驴Que es JSX?

Es una extensi贸n que hace referencia a JavaScript(JS) y HTML (XHL) y nos permite mezclar ambas sintaxis. Fue creada por Facebook para el uso en la librer铆a React.

驴Que es el Virtual DOM?

Recapitulaci贸n:

DOM Se refiere a la abreviatura de Document Object Model en espa帽ol se le conoce como modelo de objetos de documento. La misma facilita una representaci贸n estructurada del documento de forma jer谩rquica y define de que manera se va a renderizar en el explorador a fi de modificar su estructura, estilo y contenido.

Fuente: Clase de DOM

El Virual DOM como su describe es una manera de representar el DOM guardado en memoria y que act煤a como mediador o intermediario entre los estados de la aplicaci贸n y los estados del DOM (renderizados). Cuando ocurre un cambio en la aplicaci贸n web, el virtual DOM interpretara estos cambios y calculara la manera eficiente de renderizar el DOM con la menor cantidad de cambios posibles.

Ciclo de vida

Todas las apicaciones tienen un ciclo de vida desde que inicia hasta la actualizacion y posterior desactivacion para que no este presente dentro de una estructura.

Tambien son una serie de funciones que se ejecutan en distintos mmomento de la vida del componente y nos permiten realizar distintas acciones en estos momentos.

Mas contenido sobre los Ciclos de vida de un componente de React.js

Estados

Un estado en React es un almacen de datos mutable dde componentes y ademas son autonomos. El estado pertenece a una clase autonoma que cualquiera pueda importar y usar en su aplicacion.

En otras palabras el estado es el cual determina tanto al informacion que se renderiza en pantalla, hasta como se representa la informacion.

El estado puede cambiar la apariencia grafica de un componente y la forma en la se muestra dicha informacion.

Eventos

Los evento en React se definen generalmente de manera declarativa, en el codigo de la vista o template, producido con JSX en el metodo render(). para definirlo tenemos que indicar 2 cosas: primero el tipo de evento que queremos implementar y luego el metodo que hara las veces de manejador de evento.

Hooks

Los hooks son funciones totalmente encapsuladas, creando un estado local aislado dentro del componente en que se ejecuta, es decir, no son una forma de compartir estado, si no, una forma de compartir logica con estado.

Mas informacion sobre 驴Que son los Hooks

Conceptos fundamentales de React

  • JSX
    Para el tema de JSX recomiendo la siguiente extension: Descargar la extension es de mucha utilidad, por ejemplo a la hora de crear un nuevo componente:
  1. rafce
  • Virtual DOM
    Representacion grafica:
  • Life cycle(Ciclo de vida)

JSX


JSX es una extensi贸n de archivo .jsx que corresponde a JS y XML.

  • Vamos a poder hacer HTML dentro de JS.
  • Trabajar con todo lo que ya sabemos de HTML y CSS dentro de JS.

驴Qu茅 es el Virtual DOM?


Es una representaci贸n del 鈥淩eal DOM鈥 donde vamos generar una copia del mismo. Cuando sucede un cambio hace una comparaci贸n entre el Virtual DOM y el Real DOM. En ese momento cuando tenemos lo cambios vamos a tener esta comparaci贸n para no hacer un render completo de la aplicaci贸n. Esto genera dinamismo.

Ciclo de vida


Todas la aplicaciones desde componentes hasta un grupo de componentes tienen un ciclo de vida, desde que se inicializan, procesan y mueren. Cuando un componente no es necesario se destruye.

Estado


El uso del estado va ser importante para mantener o transmitir informaci贸n entre componentes.

Eventos


Los enventos son interacciones c贸mo por ejemplo un click un cambio de ventana, etc鈥

Hooks


  • Se pueden crear varios elementos con 茅l.
  • Se puede vincular con el ciclo de vida y los estados.

Resumen de la clase:

  • JSX
    Es la extensi贸n de archivos que se usa en react donde podemos hacer html dentro de js facilitando el uso y sacando lo mejor de html css y js.

  • Virual DOM
    Es una copia del DOM real y lo que hace es compararlo con lo que ha pasado en nuestra app, as铆 cuando existe alg煤n cambio no se tiene que renderizar toda la pantalla si no solo lo que se cambi贸 mejorando el desempe帽o de nuestra app.

  • Ciclo de vida
    se refiere al proceso cuando los componentes son creados, actualizados y eliminados. O de otra manera 鈬 nacen, crecen y mueren.

  • Estado
    Estado son los datos que est谩n dentro del componente y estos pueden ser actualizados por eventos. Los estados son muy importantes en React, pues el componente va a reaccionar de acuerdo al estado adem谩s de poder transmitir la informaci贸n de dicho estado a otros componentes actualiz谩ndolos.

  • Eventos
    Acciones del usuario como un presionar enter, un hacer un click, etc. Podremos desencadenar acciones y esto se combinara con los conceptos de ciclo de vida, react dom, etc.

  • React Hooks
    Es una forma con la cual trabajar nuestros componentes, sin clases, con funciones. Permite trabajar con el estado, ciclo de vida, eventos del componente.

hola en las nuevas versiones no es necesario tener extensiones jsx, con js basta

JSX es una extensi贸n de JavaScript, que busca traer la sintaxis de los lenguajes tipo HTML/XML para definir el 谩rbol de elementos de nuestros componentes de React. https://www.w3schools.com/react/react_jsx.asp

Hooks

Estado

Ciclo de vida

Virtual DOM

jsx


Conceptos Fundamentales de React

JSX

JSX es una extensi贸n de la sintaxis de JavaScript que produce elementos de React, es usado para describir c贸mo deber铆a ser la interfaz de usuario.

const element = <h1>Hello, world!</h1>;

JSX no es un requisito para usar React

<aside>
馃挕 Cualquier cosa que se pueda hacer con JSX se puede hacer con Javascript puro.

</aside>

Documentaci贸n oficial.

Qu茅 es el Virtual DOM?

Es una representaci贸n 鈥渧irtual鈥 de la UI que se mantiene en memoria y en sincron铆a con el DOM 鈥渞eal鈥 mediante la biblioteca ReactDOM. Esto hace posible comunicar a React en qu茅 estado quieres que est茅 la IU

Docs

Lyfe Circle, Ciclo de vida.

La composici贸n de componentes y los componentes en s铆 mismos tienen un ciclo de vida, inician con nuestra aplicaci贸n, se actualiza y termina o desaparece.

Estado

El estado transmite informaci贸n entre componentes, los cuales reaccionan y se actualiza el DOM.

El estado es similar a las props, pero es privado y est谩 completamente controlado por el componente.

Eventos

Manejar eventos en elementos de React es muy similar a c贸mo se manejan eventos con elementos del DOM.

  • Se nombran usando camelCase, en vez de min煤sculas.
  • Con JSX pasas una funci贸n como el manejador del evento, en vez de un string.
/* Con JavaScript */
<button onclick="activateLasers()">
  Activate Lasers
</button>

/* Con React */

<button onClick={activateLasers}>
  Activate Lasers
</button>

Hooks

Los Hooks permiten usar el estado y otras caracter铆sticas de React sin escribir una clase.

Incre铆ble la clase, me gusta mucho que comencemos con los conceptos fundamentales antes de pasar a la pr谩ctica. Entendiendo los fundamentos, podremos saber qu茅 y cu谩ndo usar determinada funci贸n para resolver un problema. Aqu铆 mi resumen:

JSX
Es la extenci贸n que vamos a estar utilizando en nuestra aplicaci贸n. Esta hace referencia a JavaScript y XML. Lo cual nos permite poder usar HTML dentro de JavaScript.

Virtual Dom
En nuestra aplicaci贸n tendremos 鈥淒os DOM鈥. El primero es el Real Dom, que es lo que el usuario est谩 viendo en tiempo real de la aplicaci贸n y por detr谩s de este Real DOM, encontramos el Virtual Dom. Este es muy importante ya que al existir un evento dentro de nuestro aplicaci贸n, React va a Comparar el Real Dom con el Virtual Dom y solo va a recargar el o los componentes que se le hayan hecho un cambio. De esta forma, evitamos renderizar por completo toda la aplicaci贸n.

Ciclo de vida
Este t茅rmino me gusta porque lo podemos usar para cualquier 谩rea de nuestras vidas jaja. Pero para no salirme del tema, dentro de React o del desarrollo de software en realidad, nos referimos al ciclo de vida de nuestra aplicaci贸n, componentes, funciones y dem谩s. Que con el tiempo tendr谩n que ser actualizadas, reemplezadas o eliminadas del programa, seg煤n el ciclo de vida que hayamos previsto.

Estado
El estado de nuestro componente lo que guarda es una informaci贸n en espec铆fico. Por ejemplo, el estado del bot贸n es rojo. Al hacer clic en el bot贸n, el estado del bot贸n cambia a verde. 驴Si me explico? Es como decir que tenemos una variable y esta va a almacenar informaci贸n mutable a trav茅s de eventos dentro de nuestro app.
Adem谩s, esta nos permite mantener la comunicaci贸n entres los diferentes estados de los componentes, leer la informaci贸n de los inputs y dem谩s.

Eventos
Los eventos de toda la vida que hemos usado en JavaScript, lo repetimos en React. Un evento se refiere a una acci贸n dentro de nuestra aplicaci贸n. Por ejemplo, un clic, doble clic, mover el mouse, etc.

Hooks
Los Hooks son funciones que nos permiten trabajar m谩s c贸modo con los componentes, estados, ciclo de vida, actualizaciones, eventos, etc. En pocas palabras, nos facilitan la vida al trabajar con caracter铆sticas importantes de React.

React!!! su sintaxis es JSX la union de Js, Html Y css 馃槃

Oscar es el mejor, vamos que vamos

**JSX **

Aqui esta la definicion de JSX de acuerdo a su especificaci贸n

JSX is an XML-like syntax extension to ECMAScript without any defined semantics. It鈥檚 NOT intended to be implemented by engines or browsers. It鈥檚 NOT a proposal to incorporate JSX into the ECMAScript spec itself. It鈥檚 intended to be used by various preprocessors (transpilers) to transform these tokens into standard ECMAScript.

Que requisitos m铆nimos exige React para poder aprenderlo?

JSX(Java Script XML)
Es un sistema de plantillas que vamos a poder trabajar directamente con React. en donde podemos mesclar Html y js sacando el mejor provecho.
Virtual DOM
es una representacion del DOM en donde React crea una virtualizacion para que nosotros trabajemos posteriormente React actualiza solo las partes modificadas sin la necesidad de recargar todo el DOM sin la necesidad de recargar la pagina completa
Ciclo de vida
Todos los componentes de React tiene un ciclo de vida. Nacen se combinan y se terminan
Estado
Se trata de mantener una pieza de codigo que nos va a permitir la comunicacion con distintos estado con la aplicacion. se trata de como almacenar estados dentro de nuestra aplicacion
Eventos
Todos los eventos de DOM van a ser importantes dentro de nuestra aplicaion tanto como los eventos que puedan surgir de algun elemento HTML(input, link, select, ect).
Hooks
Es una herramienta que tendremos disponible en esta libreria que nos ayuda a manipular todos estos elementos(eventos, estados, ciclos de vida)

Dejo un art铆culo muy interesante si les interesa profundizar en la cuesti贸n del ciclo de vida de un componente

Cuando el maestro dice JSX, se me ocurri贸 que talvez en el futuro estar铆a gracioso una librer铆a con la extensi贸n GNDX. La librer铆a se podr铆a llamar Naipe