¿Qué es React.js y cómo funciona? - La mejor explicación en español

hola amigos y amigas yo soy álvaro felipe y hoy n de tim cómo funcionaría aquí es antes de comenzar quiero contarte que con solo ver este vídeo vas a poder participar en el sorteo de un mes premium completamente gratis nd team sms premium te va a dar acceso a toda la especialidad de abriaquí es que son cuatro cursos además de más de 150 cursos de programación diseño y emprendimiento con la mejor metodología en español quiere saber cómo ganar de este mes gratis quédate hasta el final de este vídeo para saberlo ahora pasemos al tema de

hoy y aquí es qué cosa estoy aquí es para decirlo sencillo es una librería para construir interfaces web o mejor dicho una librería de front ya está pero cómo funciona ese es el tema del vídeo de hoy para eso tengo que darte un poco de contexto en primer lugar cuando tú aprendes desarrollo web aprendes tres conceptos básicos cierto la web está construida de tres conceptos básicos el primero de ellos es html html es la estructura la semántica la información de la página web nada más es completamente estático el siguiente concepto sssss es el maquillaje para

html html solo es información pero si tú quieres que esa información se vea bonita y se adapte a los tamaños de pantalla que sea responsive necesita css pero hasta este momento html css te da algo bonito pero algo que no está vivo algo que está ahí que lo puedes ver como si fuera un folleto y listo el último componente es el que le da vida a un sitio web y es javascript porque ya ves que ya es programación con llave script podemos hacer que la página reaccione a las acciones del usuario responda a sus acciones

de esa manera la página ya está viva ya podemos crear aplicaciones web completas sin embargo siempre hemos aprendido que estos tres conceptos deben estar separados estructura presentación y comportamiento deben estar separados tanto así que nos hemos acostumbrado siempre ponerlos en carpetas separadas cierto normalmente para html la carpeta public para css la carpeta styles para llave escribir la carpeta scripts pueden tener otros nombres pero esos son los más comunes entonces así aprendemos a trabajar desarrollo web así lo hacemos no lo discutimos y para nosotros así es como debe hacerse así son las buenas prácticas pero el

equipo del viaje les dijo no no no no no no no separa el html css javascript no es la mejor idea la mejor idea es meterlos en un solo paquete llamado componente vamos a crear este paquete y ahí metemos todo pero esto va contra las buenas prácticas porque qué pasa si tú quieres escalar el proyecto hacerlo más grande desacoplar el código reutilizar funcionalidades si todo está metido pegado ahí como separas cosas luego no tiene mucho sentido más bien parece una muy mala práctica más bien parece regresar a los años 90 cuando en el mismo html

metíamos un atributo está el metíamos los eventos dentro del html común y cosas así muy feo no suena muy bien entonces por qué proponen esto que es tan raro es que ellos dicen lo siguiente separar html css javascript es separar por código no estás separando realmente por funcionalidad una interfaz web es algo como esto miren esta es la página web de the team y ahí pueden ver ustedes el logo de the team arriba a la izquierda hay un único no de búsqueda el carrito el icono de menú abajo un texto un futuro de oportunidades laborales

y de emprendimiento te está esperando así que vea de punto team debajo hay otro copy que dice aprende programación diseño y emprendimiento nd team con la mejor metodología en español y debajo hay dos botoncitos comienza gratis y porque de ti está interfaz es más larga la página web obviamente ha sacado una pequeña captura pero esta pequeña interfaz ya tiene muchos elementos por ejemplo el logo el botón para abrir el buscador el carrito el botón para abrir el menú el título el subtítulo incluso los dos botoncitos esos elementos son piezas de interfaz piezas bloques de interfaz

la filosofía del viaje y ese separemos el proyecto por estas piezas no lo vamos a separar por html css javascript sino por estas piezas de tal manera que el código pueda ser reutilizable por ejemplo si yo necesito otro botón por ejemplo abajo hay dos botones si yo necesito un tercer botón no tengo que volver a escribir el botón simplemente reutilizó el componente que me genere el botón si yo necesito el logo re utilizó el componente que me genere el logo y así entonces si vamos a separar si se puede desacoplar el código y la funcionalidad

pero ya no está / html css y javascript sino por funcionalidad en la interfaz por piezas por bloques de interfaz para abrir aquí es la estructura es inseparable de la lógica html y javascript están fundidos y tiene todo el sentido del mundo porque qué pasaba en el modelo anterior cuando tú tenías por ejemplo un menú tenías un menú en un proyecto y querías ese menú reutilizarlo en otro cualquiera que haya trabajado en desarrollo web le ha pasado esto no pero yo ya luís en el proyecto anterior porque tengo que hacer el código desde cero voy

a traer melo pero no es tan fácil de traer el html perfecto pero cuando te traes el javascript y ya es creíble por traerme dónde está la función que lee que interactúa con este menú tengo que buscarla en el proyecto y tal vez esa función está comprometida con otra función porque pasan datos pasan parámetros o por último no tiene buenas prácticas no lo sé es muy complejo peor aún los estilos donde están los estilos vamos a suponer que lo encuentran lo encuentra lo llevas al nuevo proyecto todo se rompe porque aquí hay un documento get

element vaya divide un aire que no existe en el proyecto nuevo tienes que empezar a cambiar los aires cambiar las clases para que los estilos coincidan o los estilos no se rompan con los estilos del otro proyecto es un caos entonces verías dice la estructura y la lógica están inseparables los estilos no necesariamente porque cada proyecto puede tener su propio look and feel su propia apariencia es normal entonces tú puedes meter css en el componente si tú quieres o tú podrías dejarlo por fuera y trabajar ss de manera tradicional sin que se fusionen con html

javascript de hecho este es uno de los más grandes debates del desarrollo web modernos y ese es inglés es decir no escribir se hace es y todo generado por javascript o escribir css con buenas prácticas y buena arquitectura no me voy a meter ese proyecto pero lo que sí es que esté ss no está obligatoriamente metido en el componente tú puedes meterlo o no pero html y javascript definitivamente si en el componente redondeamos la idea a qué cosa es un componente en primer lugar es una pieza de user interface es decir la interfaz con la

que el usuario interactúa en otras palabras todo lo que ves en la pantalla entonces cada bloque de lo que ves en la pantalla cada pieza es un componente los componentes deben poder reutilizarse y combinarse entre ellos para crear componentes mayores que a su vez se combinen entre ellos y creen todo un sistema completo como la web de the team los componentes son objetos javascript esto no es muy sorprendente porque casi todo en javascript es un objeto sin embargo si te pones a pensar que la lógica y la estructura html están en el mismo paquete y

que debe ser con objetos y todo con javascript nos puede llevar a pensar que necesitamos ser muy pros en javascript demasiado experimentados en javascript para empezar con react es más que se nos puede hacer un lío mejor trabajamos preparadito html css javascript para eso me atrajo su ingrediente secreto cuál es ese ingrediente secreto ahorita te lo cuento porque seguramente si es tu primera vez con ria que estarás pensando hoy esto se parece a los espagueti de los años 90 inicio los 2000 cuando todo era un lío cuando todo lo mezcla vamos ya hemos superado esta

etapa ya hacemos buenas prácticas para que volver a esos tiempos bueno justamente para no volver a esos tiempos es que riad trajo su ingrediente secreto que bueno repasando los componentes son piezas de johann se pueden reutilizar y combinar son objetos ya ves clip pero el ingrediente secreto se llama sex javascript extended o javascript x ml que en pocas palabras es escribir html dentro de javascript pero html igual igualito con la misma sintaxis abres menor que mayor que pone los atributos class hr fer igualito igualito igualito no un 95% igual hay algunas restricciones pero son muy

chiquitas pero en el fondo estás escribiendo javascript por debajo es web para quien convierte este código javascript estándar que el navegador puede interpretar pero para el desarrollador es html tal cual te lo voy a demostrar mira este código que ves acá es un componente increíblemente fácil mira la línea 1 importa fronteras es la librería con un importe sencillo mira la línea 10 es por default button es decir estás exportando este componente para poder importar lo en otro lugar increíblemente fácil y de la línea 3 a la línea 8 es realmente el componente que no es

más que una simple función javascript que retorna per de perote que retorna y retorna a html fíjate está retornando html com pero que como va a retornar html no tiene sentido por último que es ese paréntesis que está al final de la 38 o sea eso deberían ser comillas o bach tics para que te devuelva pues un string eso debería ser un string es que en realidad estos gis xxi jesse devuelves contenido html interesante y si estás extrañado por la línea 5 ría ya acepta el atributo clase directamente obviamente y componentes más complejos que aprenderás

en el curso n de tim pero mira que para empezar es muy fácil puedes pasar de html área 10 sin ser un pro en javascript conociendo solamente lo básico de javascript un detalle aquí es que este componente tienen sus datos quemados en el código la url las clases del elemento el texto suscribirse está ahí en el código eso no es muy eficiente porque si yo quiero dos botones los dos botones van a decir suscribirse no tiene mucho sentido necesito una forma de que este contenido sea dinámico y eso se hace de la siguiente manera fíjate

este nuevo componente es el mismo con un pequeño cambio el primero es que dice props el componente está recibiendo un argumento llamado prox que es un objeto que trae las propiedades que se van a imprimir en el momento de llamar al componente y mostrarlo en la pantalla fíjate las partes que están resaltadas ahí en amarillo process punto y url process punto class próx contenta es un objeto estamos llamando elementos del objeto llaves del objeto pero fíjate que cada uno de ellos abre y cierra llaves las llaves son expresiones de essex que indican que dentro vas

a escribir javascript estándar es decir dentro de esas llaves puedes hacer operaciones condicionales funciones ternarios llamar valores de un objeto etcétera entonces tienes html con todo el poder de javascript ahí mismo de esa manera es que tú puedes un componente y llevártelo completamente otro proyecto sin esos conflictos que había en el modelo anterior como usamos luego este componente porque nosotros queremos lo siguiente miren queremos dos botones el botón comienza gratis y el botón porque es de ti pero a partir de un solo componente como creamos esos dos botones de la siguiente manera increíblemente fácil mira

llamamos al primer componente como lo imprimimos simplemente escribiendo el nombre del componente siempre se ponen en mayúsculas pero como si fuera una etiqueta html y las propiedades donde estaban los propios dónde estaban los propios url props las propias content los pasamos como si fueran simples atributos html mira el primero url de puntín diagonal premium ahí es donde te va a llevar el botón cuando hagas clic la clase button y default porque claro es el botón por defecto mira el botón azul y el texto comienza gratis justamente el texto que tenemos ahí ya está y el

siguiente botón mira la url es el punto team diagonal por qué porque nos va a llevar a los beneficios de por qué estudiar en el equipo las clases button y ghost ghost porque es otro tipo de botón no es el default es un botón que no tiene fondo entonces el diseño le llamamos button ghost a este tipo de botones y por último el texto mira porque l team ya tengo dos elementos en la interfaz a partir de un único componente qué tal es bastante sencillo de empezar y otra cosa nueva que trajo rían y ese

es el virtual dom el virtual dom es una representación del don en memoria el don es toda la estructura html del sitio cuando tú cargas una página web el navegador lee el código html lee el código css leer el código javascript interpreta todo ese código lo par sea incluso interpreta la geometría de en qué modo en qué lugar debe estar cada elemento y lo muestra en pantalla lo pinta en la jerga del desarrollo web eso es pintar elementos en pantalla cuando hay un cambio en el don por ejemplo javascript hace un cambio el navegador tiene

que hacer todo ese proceso nuevamente es muy costoso en términos de recursos procesador memoria ram etcétera lo que hace real díez es guardar una especie de copia en memoria del don y ahí va trabajando y solamente cuando hay cambios compara el don virtual con el don real y aplica solamente esos cambios en vez de pintar todo en pantalla así que en realidad cuando tú estás haciendo cambios estás haciendo cambios en memoria solamente tú no tienes que preocuparte desarrollar lo hace por debajo pero es importante que tú lo sepas el otro concepto que debes entender en

riad y es es el concepto del estado cada componente tiene su propio estado que es como la fotografía del momento es decir me hizo clic el usuario o no me hizo clic estoy activo o estoy inactivo qué datos tengo en este preciso momento ese es el estado y cada componente tiene su propio estado que no lo comparte con nadie más solamente con sus hijos si es que tuviera hijos pero no lo puede compartir hacia afuera entonces como los componentes se comunican a través de algo llamado estado global el estado global es de toda la aplicación

entonces los componentes están escuchando el estado global y de esa manera pueden comunicarse por ejemplo si hago clic en el botón de comprar en una web el componente recibe ese clic lo comunica el estado global a través del estado global el componente carrito se entera que hubo un cambio y que él debe agregar un nuevo producto al carrito que viene indicado por las propiedades del botón que recibió el clic y de esa manera todo se está comunicando tradicionalmente esto se ha hecho con una herramienta llamada read ox pero en las últimas versiones del reader ya

que también trae su propia llamada context para que tú puedas trabajar el estado global sin herramientas de terceros quizás lo más interesante del beat aquí es es que no solamente es para front-end tiene muchos más usos se puede usar para crear aplicaciones nativas en ios y en android con brian knight y lo puedes usar también en el back end también puedes crear realidad virtual corría a 10 e incluso aplicaciones de escritorio y existen proyectos que usan el mismo corder y aquí es para crear aplicaciones de escritorio así que dominando react puedes en muchos ámbitos no

solamente del desarrollo web sino del desarrollo móvil e incluso del desarrollo de escritorio y me faltó decir que la última encuesta está cobra flor y allí está es la tecnología más amada por los programadores y más buscada por las empresas datos de stack overflow no míos así que qué más razones necesitas para aprender y aquí es que es fácil de comenzar puedes crear aplicaciones web móviles de escritorio realidad virtual hay mucha demanda por las empresas y lo mejor de ti tiene una especialidad de cuatro cursos que te lleva desde cero hasta dominar todos los conceptos

de vries y terminar con un proyecto sabes el proyecto que vamos a hacer agárrate de tu silla vamos a crear una plataforma de educación online con ree aquí es escuchaste bien te vamos a enseñar cómo competir contra nosotros como hemos creado nuestra aplicación de cursos nd team quieres aprender viajes desarrollando un proyecto del mundo real que es la aplicación de the trip y no con experimentos jueguitos o turu list esta es la especialidad que estabas buscando cuatro cursos que te llevan desde cero hasta desarrollar tu plata propia de educación online para que inicie su primer

emprendimiento o vendas este proyecto tus clientes modificándolo personalizándolo a tu gusto entre ella mismo a el team diagonal react para comenzar y nos vemos en el siguiente vídeo chau chau chau chau y olvide que había un sorteo perdón pero dónde me quieres ganarte un mes gratis en el team habiendo visto este vídeo te voy a dejar no sé si arriba en una tarjeta abajo en la descripción en el primer comentario por ahí ya tú lo buscas ok tú lo busques pero va a haber un link que te va a llevar a las instrucciones para participar

en este sorteo de un mes gratis en el de tim que te va a dar acceso a este curso oa estos cuatro cursos y a los más de 150 cursos de programación diseño y emprendimiento que hay en de ti con la mejor metodología en español si este vídeo te gustó si aprendiste con este vídeo aunque nunca has visto react imagínate lo que vas a ver en todos los cursos primero así que buscas el link le das clic sigue las instrucciones y la próxima semana anunciamos al ganador tienes una semana para participar así que te esperamos

en haití porque tu futuro te está esperando