Ahora solo por diversión quiero mostrarte
cómo podemos escribir código React sin ninguna herramienta moderna
y cualquier paso de construcción.
Entonces, dentro de un archivo HTML normal.
Entonces, esto es lo que yo llamo React puro.
Y te mostrará por qué las herramientas
de los que hablaremos a continuación son muy útiles.
Entonces, para comenzar, creemos nuestra primera carpeta de proyecto.
que estoy haciendo aquí mismo en el escritorio
donde también tengo los archivos de GitHub que descargamos
en la primera sección del curso.
Pero, por supuesto, puedes hacerlo donde quieras.
Y simplemente voy a llamar
este primero, "01-pure-React".
está bien.
Y ahora todo lo que tenemos que hacer es abrir esta carpeta.
como una carpeta de proyecto en VS Code.
Y una forma de hacerlo es arrastrar y soltar esta carpeta.
en el icono de VS Code aquí abajo.
O, por supuesto, puedes abrir la carpeta del proyecto.
aquí desde este menú o simplemente aquí.
Así que aquí, abre la carpeta.
Entonces, ahora mismo tenemos una carpeta vacía.
Entonces, creemos index.HTML.
Y para crear una estructura HTML vacía en VS Code,
simplemente podemos escribir el signo de exclamación, presionar enter,
y luego tenemos una estructura HTML vacía.
Entonces, démosle un título: "¡Hola, reacciona!".
Y luego aquí en el cuerpo, todo lo que haré por ahora
es crear un div con el ID de "root".
Y podría ser cualquier identificación aquí, por supuesto,
pero root es el estándar para React.
Y no colocaremos nada aquí.
Entonces, guárdalo.
Y tal vez te diste cuenta
Qué bonito formateé automáticamente el código cuando lo guardé.
Bien, ahora agreguemos React a este archivo.
Y la forma en que lo hacemos cuando escribimos React puro
es simplemente incluyendo la biblioteca React como script.
Ahora, para obtener la URL de esos scripts,
De hecho, podemos consultar la documentación oficial de React.
Entonces, para hacer eso, vayamos a nuestro navegador.
y luego echa un vistazo a React.dev.
Entonces, ese es el sitio web oficial de React,
y lo exploraremos un poco en un vídeo futuro.
Pero por ahora, pasemos a esta parte de aprendizaje.
Y luego aquí mismo, seleccionemos instalación.
Entonces, justo en esta página, encontrará
esta pequeña parte aquí que dice "Intenta reaccionar localmente".
Y luego aquí, hagamos clic en este enlace aquí.
que dice "Descargar esta página HTML".
Ahora si por alguna razón ese enlace ahí
ya no existe en el futuro,
Entonces puedes intentar escribir estas dos cosas aquí a mano.
porque son estos dos guiones
que ahora vamos a agregar a nuestro archivo HTML.
Ahora, está bien, volvamos a VS Code.
y pégalos aquí mismo.
Y con esto, hemos incluido React.
en esto, digamos proyecto.
Ahora, de nuevo, normalmente cuando escribimos React, no hacemos esto
pero en su lugar utilizamos una herramienta de construcción moderna
como los que vamos a hablar a continuación.
Pero por ahora, lo estamos haciendo de forma pura.
Para que veas por qué realmente necesitamos esas herramientas.
Ahora, en caso de que se pregunte por qué tenemos dos bibliotecas aquí,
es porque este primero aquí
es básicamente la biblioteca central de React.
Entonces, este es el que trabaja con componentes, estado,
y realmente todo el material de React.
Entonces, esta es básicamente la interfaz.
de cómo interactuar con React.
Y luego este otro de aquí.
Entonces, React-dom es básicamente la capa de renderizado.
que puede representar componentes de React en el dom.
Y como queremos renderizar en el navegador,
Necesitamos usar React-dom.
Pero React en realidad se puede renderizar en otros entornos.
por ejemplo, como aplicaciones nativas que utilizan React Native.
Pero de todos modos, creemos ahora nuestro primer componente.
Y, por supuesto, eso también debe suceder dentro de un guión.
porque eso también es un JavaScript.
Y así, después de estos dos guiones aquí
donde incluimos la biblioteca React,
abramos otro guión.
Y luego allí podemos crear una función.
y la llamaré "App", así como así.
Entonces, recuerda desde la primera aplicación que creamos,
que React se basa en componentes.
Y un componente es básicamente solo una función.
que comienza con una mayúscula como esta.
Y ahora desde esta función aquí,
podemos devolver lo que queramos ver en la interfaz de usuario.
Ahora, en esa primera aplicación que creamos,
devolvimos algo de código JSX.
¿recuerda eso?
Sin embargo, eso no va a funcionar aquí.
porque bueno no tenemos las herramientas
que puede convertir JSX nuevamente a JavaScript.
Y aquí necesitamos usar la función de crear elemento.
Entonces, hagamos "devolver React.createElement".
Y luego simplemente el nombre del elemento HTML.
Entonces, digamos que queremos el encabezado.
Entonces, este objeto React aquí es el que viene.
de este guión aquí mismo.
Entonces, este script nos dará este objeto React.
Y desde allí podemos usar
este método de creación de elementos.
Y si todo esto te resulta realmente confuso en este momento,
Entonces no te preocupes.
De nuevo, el objetivo aquí es realmente no
para que entiendas React en este punto.
Sólo estamos haciendo algunos experimentos.
Y estoy echando un primer vistazo a React aquí.
Pero todavía no lo estamos aprendiendo realmente.
¿está bien?
Entonces, realmente solo estoy tratando de demostrar aquí
cómo escribimos React puro sin una herramienta de compilación.
Pero de todos modos, ahora volvamos a esa carpeta aquí.
y abra index.HTML en Google Chrome
Sólo para ver qué pasa.
Y vamos a inspeccionar.
Y cierra esto.
Lo haremos un poco más grande aquí para ti.
Y esto es sólo para mostrarte
que ahora mismo en realidad no pasó nada.
Entonces, todavía solo tenemos este div raíz.
y luego, por supuesto, nuestros guiones.
Y entonces la razón por la cual ese encabezado que creamos
no está aquí todavía es porque no le dijimos a React
para representarlo en la página.
Básicamente, para colocar ese encabezado en el dom.
Y ahora regresemos y hagamos eso.
Y hacemos esto aquí justo al final.
Entonces después del componente.
Entonces, creemos la llamada raíz.
Y entonces aquí y ahora necesitamos
esa biblioteca React-dom que mencioné antes.
Entonces este de aquí.
Entonces, desde React-dom, ahora hacemos "createRoot".
Y ahora simplemente necesitamos seleccionar
este elemento div aquí mismo.
Entonces, este div aquí, este elemento
se convertirá en la raíz de nuestra aplicación
lo que significa que la solicitud será presentada
dentro de este elemento.
Entonces, básicamente aquí mismo.
Entonces, simplemente seleccionemos eso
con "document.getElementById"
que es simplemente manipulación dom normal,
o en este caso simplemente seleccionando elementos normales
usando métodos dom.
Entonces, creamos nuestra raíz y ahora podemos hacer "root.render".
Y luego nuevamente "Aplicación React.createElement".
Y aquí es donde entra en juego nuestro componente de aplicación.
Entonces renderizamos básicamente creando un nuevo elemento.
fuera de este componente de la aplicación.
Y una vez más, por favor no memorices nada de esto.
¿está bien?
Esto es sólo para mostrártelo.
Entonces, si quisieras, ni siquiera tendrías que escribir este código.
Estaría perfectamente bien simplemente mirándome.
Pero aun así creo que probablemente sea una buena idea.
para empezar a escribir un poco de código.
Pero de todos modos, cuando recargue esto ahora,
deberíamos ver un elemento de encabezado aquí.
Así que recuerda, está dentro de esta raíz.
Y sí, ahí está.
Ahora está vacío porque en realidad no lo hicimos.
colocar cualquier contenido en él.
Pero React representó este encabezado aquí.
Entonces, este elemento de encabezado dentro de nuestro dom.
Y ahora agreguemos algo allí.
Ahora bien, la forma en que esto funciona es un poco confusa.
Entonces, esta función de crear elemento
no solo acepta el nombre del elemento HTML
pero también los llamados props, que en este caso son nulos.
Y luego como tercer argumento, los hijos de este elemento.
Y en este caso, escribámoslo como una cadena.
Hagamos "¡Hola Reaccionar!", guárdelo,
y volvamos.
Y sí, ahí vamos.
hermoso.
Así que ahora este "¡Hola, reacciona!" es básicamente una nota infantil
de esta nota de encabezado aquí mismo.
Pero volvamos atrás y sí, como mencioné,
antes usábamos JSX para escribir esto.
Y entonces no tendríamos que escribir
esta cosa rara aquí.
Básicamente lo escribiríamos como HTML.
Pero eso no funciona aquí.
Y esa es una razón más por la que no escribimos React puro.
así en un entorno de desarrollo real.
Pero de todos modos, aquí mismo en esta función,
Por supuesto, podemos escribir cualquier lógica JavaScript normal.
Entonces, por ejemplo, creemos una cadena de la hora actual.
Entonces, esa es "nueva fecha",
y por supuesto esto no tiene nada que ver con React,
"toLocalTimeString".
Y luego agreguemos eso aquí en la cadena.
y podemos usar una plantilla literal para eso.
Y en caso de que no estés familiarizado con eso por alguna razón
ahí está la siguiente sección en la que explicaré
todo el JavaScript esencial que necesitamos para React.
Está bien, pero aquí, coloquemos ahora esta vez
y digamos "es"
y luego, sea cual sea el momento actual.
Volvamos atrás y verás que siempre
Tienes que recargar manualmente la página.
Y claro, eso también desaparecerá.
tan pronto como comencemos a utilizar algunas herramientas modernas.
Pero de todos modos, aquí tenemos nuestro tiempo.
Y como último detalle en esta aplicación.
lo que quiero hacer es actualizar esto ahora
cada segundo con la nueva hora
lo que básicamente hará que esto funcione como un reloj.
Entonces, regresemos y hagámoslo.
Y para eso necesitamos un concepto de Estado.
Quizás recuerdes la primera aplicación que creamos.
ese estado es necesario siempre que queramos
para actualizar algo en la pantalla.
Pero, por supuesto, profundizaremos mucho en qué es el estado.
y cómo funciona un poco más adelante en el curso.
Por ahora, simplemente creemos un nuevo estado.
Y entonces ya no necesitamos esto.
Entonces, digamos "constante" y llamémoslo nuevamente "tiempo".
y luego "setTime" que es una función
con el cual podremos actualizar ese estado de tiempo.
Entonces tenemos que decir "React.useState"
y nuevamente el objeto React es ese objeto grande
que obtuvimos aquí a partir de este guión.
Y luego aquí necesitamos establecer el valor predeterminado.
Y entonces eso será esto.
Coloquémoslo aquí, guárdelo.
y si actualizamos ahora, se verá exactamente igual,
así que aún no hay ninguna actualización.
Entonces, por supuesto, simplemente refleja la hora actual.
Y está bien, entonces volvamos
y básicamente hacer que se actualice cada segundo.
Entonces, para eso, necesitamos algo llamado efecto.
Entonces, "React.useEffect" y también lo hicimos en la primera aplicación.
Y ahora aquí dentro de este efecto simplemente
utilice la función JavaScript "setInterval".
Entonces, esta no es una función de React.
pero es simplemente una función de JavaScript
que vamos a usar para configurar un temporizador
que cada segundo actualizará este estado de tiempo aquí.
Entonces, establecer el intervalo también necesita una función.
y podríamos usar funciones de flecha aquí
para hacerlo un poco más corto, pero no importa.
Entonces, esta función debería ejecutarse cada mil milisegundos.
Entonces, una vez por segundo.
¿Y qué debería pasar cada vez?
Entonces, cada vez que se ejecute esta función aquí
es que se debe fijar el tiempo.
Entonces, "setTime" y luego nuevamente esto
porque esta siempre será la nueva hora actual.
Entonces, pégalo aquí.
Y ahora, finalmente aquí, necesitamos definir esta matriz vacía.
Y todo esto tendrá sentido
una vez que empecemos a aprender sobre los efectos.
Pero por ahora, simplemente copie el código así.
Y esto ya debería funcionar.
Entonces, veámoslo.
Por supuesto, debemos actualizar nuevamente manualmente.
Y sí, hermosa.
Entonces, tenemos un reloj en funcionamiento que codificamos solo con React.
Puedes ver aquí abajo que el dom está realmente actualizado.
en este lugar una vez cada segundo.
Y ese es el trabajo de React.
lindo.
Ahora bien, esto, por supuesto, es muy básico.
Y sí, como dije, esto realmente, realmente no
cómo usamos React en el mundo real.
Entonces, no tenemos módulos aquí.
No tenemos forma de convertir JSX.
No tenemos servidor HTTP
que recarga automáticamente la aplicación y así sucesivamente.
Pero repito, sigo creyendo que fue bastante útil.
Para explorar brevemente este React puro en esta conferencia.
Pero claro, ahora toca seguir adelante.
a una configuración más robusta y del mundo real.