Así que ahora que sabemos
por qué necesitamos un marco de JavaScript en primer lugar,
Comencemos aprendiendo sobre el marco más popular.
por ahí, reacciona.
Entonces, en esta conferencia, obtendremos una descripción general de alto nivel.
de qué es realmente React y cómo funciona.
Así que estará lleno
Pero una conferencia súper interesante.
Así que comencemos rápidamente.
Entonces, según la documentación oficial de React,
React es una biblioteca de JavaScript para crear interfaces de usuario.
Ahora, eso es algo
pero realmente no es tan útil, ¿verdad?
Así que ampliemos un poco esta definición.
para que sea más útil
O, debería decir, un poco más loco como este.
Así que ahora, en esta definición ligeramente modificada,
React es una herramienta extremadamente popular, declarativa,
basado en componentes, impulsado por el estado,
Biblioteca JavaScript para crear interfaces de usuario.
creado por Facebook.
Y esto en realidad es mucho más útil.
porque ahora podemos deconstruir esta definición
y aprenda qué es realmente React, paso a paso.
Entonces, comenzando con el diseño basado en componentes,
React tiene que ver con componentes como botones,
campos de entrada, barras de búsqueda, etc.
Entonces, los componentes son los componentes básicos de las interfaces de usuario.
en Reaccionar.
Y de hecho, básicamente todo lo que React hace
es tomar componentes y dibujarlos en una página web.
eso es todo.
Y por eso construimos interfaces de usuario complejas en React.
mediante la construcción de múltiples componentes
y luego combinar estos componentes como piezas de LEGO.
Por ejemplo, para crear una aplicación compleja como Airbnb.
Entonces aquí tenemos exactamente los mismos componentes.
que vimos antes, pero todo combinado en una interfaz de usuario compleja.
Entonces la barra de navegación, la barra de búsqueda,
el panel de resultados y el mapa.
Ahora, otra cosa que hacemos con los componentes.
es reutilizarlos.
Por ejemplo, aquí en el panel de resultados,
Hay varios listados que parecen bastante similares.
Y entonces podemos crear un componente de listado.
y luego reutilizarlo tres veces aquí,
simplemente ajustando un poco los datos.
Ahora, desde que construimos UI complejas
combinando múltiples componentes,
cada componente debe tener toda la información
sobre cómo se ve, ¿verdad?
Entonces, para describir cómo se ve cada componente
y cómo funciona,
Usamos una sintaxis declarativa especial llamada JSX.
Y declarativo simplemente significa
que le digamos a React qué componente
y, en última instancia, toda la interfaz de usuario debería verse así
basado en el estado actual.
Entonces React es básicamente una gran abstracción del DOM.
para que nunca tengamos que trabajar con un DOM directamente
como lo haríamos con JavaScript básico.
Entonces simplemente le decimos a React lo que queremos que suceda.
cuando algunos datos cambian, pero no cómo hacerlo.
Y nuevamente, lo hacemos usando JSX.
Entonces JSX es básicamente una sintaxis que combina partes de HTML,
CSS, JavaScript, e incluso nos permite
para hacer referencia a otros componentes de React.
Y la naturaleza declarativa de React
es un concepto esencial que, por supuesto,
realmente profundizaremos más adelante.
Pero ahora te preguntarás, si nunca tocamos el DOM,
Entonces, ¿cómo actualiza React la interfaz de usuario?
Bueno, ahí es donde entra en juego el concepto de Estado.
Así que recuerda que el objetivo principal de React
es mantener siempre la interfaz de usuario sincronizada con los datos.
Y de ahora en adelante, llamemos a esos datos estado.
Por ejemplo, una gran variedad de apartamentos en Airbnb.
Entonces, según nuestro estado inicial,
React renderizará una interfaz de usuario
usando los componentes que escribimos usando JSX.
Luego, basándose en algún evento como el clic de un botón,
el estado podría cambiar.
Por ejemplo, más datos sobre apartamentos.
podría cargarse desde una API.
Y aquí viene la parte interesante.
Cada vez que el estado cambia,
Actualizamos manualmente el estado en nuestra aplicación.
y React automáticamente
volver a renderizar la interfaz de usuario para reflejar el último estado,
o en otras palabras,
Reaccione a los cambios de estado volviendo a representar la interfaz de usuario.
Y esa es de hecho toda la razón.
Por qué React se llama React en primer lugar.
Ahora, siempre ha habido algún debate.
sobre si React es realmente un marco
o simplemente una biblioteca.
Bueno, la respuesta corta es que React
en realidad es solo una biblioteca,
aunque sigo llamándolo marco.
Y la razón de esto es que React mismo
En realidad, es solo la llamada capa de vista.
Entonces, si queremos construir una aplicación completa del mundo real,
Necesitamos elegir varias bibliotecas externas.
para agregar a nuestro proyecto.
Por ejemplo, para enrutamiento o para recuperar datos.
Ahora bien, para abordar esto, en realidad existen múltiples marcos
que se han construido sobre React.
Entonces, marcos que incluyen todas estas funcionalidades.
que React falta fuera de la caja,
y los más populares se llaman Next.js y Remix.
Pero nuevamente, hablaremos más sobre todo eso más adelante en el curso.
Ahora, sigamos adelante.
Además de todas las excelentes características
de lo que hemos estado hablando,
quizás la razón más importante para elegir React
sobre todos los demás marcos que son similares
Es porque React es extremadamente popular.
Entonces, de acuerdo con las cifras de descargas semanales de npm,
React es, con diferencia, el framework más utilizado.
Y la diferencia entre React y los demás.
sólo parece estar creciendo.
Entonces React realmente no irá a ninguna parte.
Una gran razón para ello es que muchas grandes empresas
He adoptado React hace mucho tiempo.
Y ahora, cada vez más empresas pequeñas
en todo el mundo están siguiendo sus pasos.
Esto significa que todas estas empresas
ahora necesitan desarrolladores de React para sus equipos,
lo que, por supuesto, ha creado un enorme mercado laboral a nivel mundial
con una alta demanda de desarrolladores calificados de React.
Y estos no son trabajos cualquiera.
Suelen ser trabajos bien remunerados.
Ahora, otro resultado positivo
Una de las razones de la enorme popularidad de React es que ahora,
existe una comunidad de desarrolladores de React muy grande y activa,
lo que significa que siempre habrá
muchos tutoriales, preguntas y respuestas de Stack Overflow,
y también mucho apoyo brindado a otros desarrolladores de React.
Y si me preguntas,
Este es en realidad uno de los mayores beneficios.
de usar React ahora mismo.
También porque esta enorme comunidad ha crecido.
un ecosistema de bibliotecas de terceros verdaderamente gigantesco en torno a React.
Y ahora puedes integrar innumerables bibliotecas útiles.
y herramientas en sus propias aplicaciones React.
Y ahora, nuestro último tema.
es que React fue creado por Facebook.
Bueno, más específicamente,
React fue creado en 2011 por Jordan Walke,
quien es un ingeniero que trabajaba en Facebook en ese momento.
Por eso decimos que React está respaldado por Facebook.
o ahora, por Meta.
Entonces, React se usó por primera vez en el suministro de noticias.
y también la aplicación de chat.
Y de ahí se extendió a todo Facebook.
y también las aplicaciones de Instagram.
Luego, en 2013, React fue de código abierto para que todos pudieran usarlo.
Y el resto es historia
porque React ha transformado verdadera y completamente
desarrollo web front-end,
no solo por desarrolladores que usan React,
pero porque muchos otros marcos modernos
fueron creados como respuesta,
lo que realmente cambió la industria para siempre.
Bien, para resumir, React es realmente bueno en dos cosas.
Primero, renderizar componentes en una página web.
como una interfaz de usuario basada en su estado actual.
Y segundo, React es realmente bueno.
para mantener la interfaz de usuario sincronizada con el estado
volviendo a renderizar, o en otras palabras, reaccionando
cuando cambia el estado de uno de los componentes.
Y como verás más adelante, React hace todo esto.
empleando algo llamado DOM virtual,
un árbol de fibras, flujo de datos unidireccional,
y muchas otras técnicas que estudiaremos
a lo largo de este curso.
está bien.
Y ahora que tienes una visión general aproximada
de lo que realmente es React,
configuremos nuestro entorno de desarrollo
para que finalmente podamos comenzar a escribir un código serio.