Bienvenidos al proyecto Menú Pizza
que vamos a desarrollar a lo largo de esta sección.
Y en esta conferencia, realmente quiero comenzar
para construir este proyecto desde cero.
Y con cero completo,
Quiero decir que vamos a borrar todo.
de estos archivos que tenemos aquí y que realmente no necesitamos,
y empezar un proyecto desde cero, como acabo de decir.
Así que cerremos este y este.
e incluso el index.HTML
que no eliminaremos ni recrearemos, pero todos estos
siéntase libre de ignorarlos y eliminarlos.
Así que borra y empecemos de cero.
Entonces aquí tenemos nuestro primer error.
y observe que coloqué el navegador aquí en un lado
y nuestro editor de código en el lado izquierdo
para que siempre podamos ver la salida al mismo tiempo.
Entonces puedes ver que nuestra aplicación se ve como
para este archivo aquí mismo,
pero claro ya no existe
porque lo acabamos de borrar.
Entonces, comencemos desde cero.
Y vamos a crear nuestro primer archivo.
dentro de esta carpeta,
y se llamará index.js, y realmente
necesita llamarse index.js
porque el paquete web,
cuál es el paquete de módulos en este proyecto,
espera que el punto de entrada se llame index.js.
¿está bien?
Pero de todos modos, comencemos ahora importando
reaccionar
de 'reaccionar'.
Y nuevamente, esto es simplemente JavaScript.
Entonces, importar módulos es parte de JavaScript,
y específicamente desde ES6.
Entonces importemos también
ReaccionarDOM
de
"reaccionar-dom/cliente".
¿está bien?
Y mientras sigo guardando, de alguna manera sigue moviendo el archivo aquí.
pero no importa.
Así que importamos estas dos bibliotecas y nuevamente
Recuerda cómo importamos básicamente estos dos exactos.
mismas bibliotecas en la conferencia pura de React.
Y de hecho, quiero abrir ese archivo aquí.
para que podamos compararlo.
tan abierto,
y luego en el escritorio, puro React, luego index.HTML.
Y recuerda que aquí lo importamos, también React.
y Reactdom, utilizando estos textos de guión.
Pero nuevamente aquí, estos se instalaron usando NPM.
y aquí ahora los estamos importando a nuestro proyecto.
usando la sintaxis de importación, que viene directamente
desde JavaScript.
A continuación, creemos nuevamente nuestro componente de aplicación.
Entonces funciona App, y no tendría que llamarse App
esto es solo una convención,
¿bien?
Lo que es necesario es un componente de estatus.
comienza con mayúscula aquí.
Así que ahora volvamos aquí,
otra vez lo mismo que volvimos antes
que es simplemente ¡Hola Reaccionar!.
Y ahora todo lo que tenemos que hacer es enviar esto al volcado.
Y así una vez más
Esto será similar a lo que hicimos aquí.
Así que incluso podríamos copiar y pegar todo esto aquí en nuestra aplicación.
que ya tenemos, pero escribámoslo a mano.
Por supuesto, en el futuro no escribiremos todos
de esto a mano, pero al menos una vez
quiero que escribas todo esto
a mano para que sepas realmente lo que está pasando aquí.
¿está bien?
Así que ahora creemos la llamada raíz.
Y para eso usamos la biblioteca ReactDOM.
en el que hay un método createRoot.
Y ahora seleccionamos este elemento raíz.
Bueno, no aquí por supuesto, sino en nuestra carpeta pública.
Así que aquí tienes todas estas cosas.
como esta extraña URL aquí.
Y nuevamente, webpack se encargará de todo esto.
como si reemplazara esta URL allí mismo.
Pero lo que buscamos aquí es este div con esta identificación.
Entonces id="raíz".
Entonces vamos a seleccionar este elemento para que
React puede representar nuestra aplicación dentro de este div.
Entonces document.getElementById.
Bien, entonces hagamos root.render.
Y también podríamos haberlo escrito todo en una sola línea.
Entonces, sin almacenar esto aquí como una variable intermediaria
pero así, queda un poco más limpio.
¿bueno? Y luego aquí colocamos nuestra App,
dale una caja fuerte y ahí está.
Hola reacciona!
Cuál es nuestro gran componente de aplicación aquí.
Así es como escribimos React desde cero básicamente.
Ahora solo quiero llamar su atención que este es el camino.
que rendericemos la raíz para que básicamente rendericemos
nuestra aplicación en Dom en React versión 18.
Entonces reacciona v18.
Pero si estás viendo una base de código más antigua que es
Antes de React 18, esto funcionaba de manera diferente.
Entonces se veía un poco diferente.
Así que ejemplifiquemos eso aquí.
Y no es necesario escribir este código aquí.
Sólo quiero mostrárselo rápidamente.
Entonces, antes de React 18, simplemente haríamos
Reaccionar.renderizar
y luego coloque la aplicación allí.
¿está bien?
Y otro cambio que tendríamos que hacer es
para deshacerse de esto.
Entonces esta sería una aplicación React 17, pero con estos cambios
entonces con tener reaccionar-dom/cliente
y con renderizar de esta manera,
Preparamos nuestra aplicación para React 18.
Entonces ahora podemos comentar este,
y lo dejaré aquí solo como referencia.
Ahora, sólo una última cosa de la que quiero hablar.
Aquí está el modo estricto.
Entonces podemos simplemente activar el modo estricto, en su lugar
de representar directamente el componente de la aplicación como un componente raíz.
Envolviendo esto aquí en un componente de modo estricto.
Entonces escribamos React.StrictMode.
Y entonces este modo estricto es básicamente un componente
eso es parte de React y que podemos tomar de React.
Y entonces ves eso automáticamente.
El código VS luego cierra este componente.
Así que copiemos o cortemos esto.
desde aquí y colócalo aquí, dale una caja fuerte.
Y así, la aplicación ahora está incluida en este modo estricto.
Y el modo estricto realmente no es gran cosa.
Lo único que hace es que durante el desarrollo
renderizará todos los componentes dos veces
para encontrar ciertos errores.
Y también reaccionará
si utilizamos partes obsoletas de la API de React.
El modo estricto no es nada innovador.
pero sigue siendo una buena idea activarlo siempre
cuando desarrollamos aplicaciones React.