Transcripciones
1. Introducción: En esta clase, te
estaré enseñando los fundamentos de
reaccionar, qué es, por qué creo que es una
gran biblioteca con la que
ponerte a la vista
y cómo implementar las prácticas más nuevas y mejores
en tus proyectos web. React es uno de los frameworks o
bibliotecas
líderes en la creación de UIs interactivas
sin fisuras. Por lo que realmente es esencial que cualquier desarrollador web front-end
tenga alguna experiencia en. A lo largo de esta clase, te
enseñaré
cómo trabajar con componentes
funcionales React, JSX, props, hooks, administración
estatal, cómo depurar y probar
tu aplicación. Difícil de agregar estilos
y mucho más. Todos los cuales son partes
cruciales a saber a hora de construir grandes
UIs con reaccionar. Al seguir junto conmigo a
través de todas estas lecciones, usas estas habilidades recién
adquiridas para construir tu propio generador de cotizaciones. Cada paso de construir este generador de
cotizaciones cubrirá tantas habilidades importantes
que necesitará para ser un desarrollador
React completo y seguro. Oye, soy David y soy desarrollador web front-end
de Northridge en Inglaterra. Tengo muchos años de
experiencia creando aplicaciones
digitales para una variedad de clientes
internacionales. Disfruta ayudando a otros desarrolladores
web como tú a
mejorar sus habilidades, lo que les ayudará a
seguir adelante sus carreras y última instancia, los ayudará a convertirse en el mejor
desarrollador o al azar que puedan ser. Pero odio hablar de
ti mismo. Así que pasemos rápidamente. Esta clase soy yo bajo
estudiantes que tienen algunos conocimientos básicos de tecnologías
front-end incluyendo JavaScript, pero me gustaría aprender reaccionar. Incluso si has venido de un fondo de
lenguaje de codificación diferente, aún
podrías ser capaz seguir siempre y cuando conozcas los conceptos básicos de
funciones, matrices y objetos. Si eres un principiante
completo para
reaccionar , eso está absolutamente bien. Todo lo que necesitas para crear
tu proyecto de clase es tu IDE favorito. Vs código será mi editor de código de elección
usado en esta clase. Pero cualquier otro que
te sienta cómodo usando a ti mismo están
absolutamente bien. Cuando termine de construir
su generador de núcleo, estará implementando un producto en
la web usando Netlify. Se preocupan,
te mostraré lo fácil que es
hacer eso y todo es
completamente gratis. Con las habilidades que
ganarás de esta clase, podrás ofrecer
mucho más como desarrollador, ya sea independiente
o si trabajas para una empresa, reaccionar sigue siendo la biblioteca JavaScript más
popular utilizado en el mundo. Y tantas aplicaciones web
se construyen usando React. Una vez que requieras
estas nuevas habilidades, podrás demostrar tus conocimientos a cualquier
empresa que busque desarrollador
front-end
altamente calificado y sólido. Al final de esta clase, podrás crear
resbaladizos y de alto rendimiento, usar interfaces utilizando las
últimas funciones de reaccionar. Sin más preámbulos,
comencemos.
2. Introducción del proyecto: En esta clase juntos
estaremos construyendo un generador de cotizaciones aleatorias
todo dentro, reaccionar. Al pulsar este botón y aparecerá al instante
nueva cita aleatoria. Esta será una aplicación de una sola página, que incluirá
un área para poblar la cotización, un pie de página simple. Y
te mostraré cómo gestionar el estado de tu solicitud. Si estás siguiendo
junto a mí, cual te
animo encarecidamente que lo hagas, también
puedes construir
algo así como un generador de hechos aleatorios o una aplicación similar
que mira algún texto datos y poblar
aleatoriamente una cadena de texto
aleatoria. El texto en sí
no era demasiado importante. Serán todas las
técnicas de React que te
mostraremos en cada lección las
cuales son importantes. Ahora he elegido un generador de
cotizaciones como proyecto para construir ya que esta es una aplicación web ideal
que cubriremos muchos
conceptos importantes de React. Esto incluye trabajar con paradigma de gestión
estatal componentes
infantiles, trabajar con apoyos,
trabajar con ganchos y datos de altura que Kennedy
utiliza en el interior reaccionar. Primer proyecto exitoso. Intenta usar todos los
conceptos que te
mostraré en este curso. Si te sientes particularmente seguro por puntos de bonificación, no
has leído
los documentos oficiales de desarrollo de
React e incluir más contextos que
no están cubiertos en este curso. También puedes intentar incluir componentes
adicionales
como un encabezado o incluso páginas adicionales. También intenta iniciar tu cancha
generada de manera diferente a mente usando tu propio
diseño, fuentes y colores. Los estudiantes deben estar
usando su IDE favorito o editor de código para construir
su proyecto de clase. Estaré usando el código VS, pero cualquier IDE
funcionará igual de bien. Ahora necesitarás usar
un terminal que esté disponible en la mayoría de los sistemas
operativos. Pero estaré usando
el terminal que viene liado con VS Code. Cualquiera va a hacer, por supuesto, usted utiliza el terminal para crear
el proyecto y también para
ayudarle a implementar su
proyecto final usando Netlify. No te preocupes, te mostraré
lo fácil que es configurar esto y empujar tu trabajo a una
página web en vivo para que todos lo vean. Y podemos hacer esto todo
en menos de un minuto. Todo mi trabajo estará en
GitHub en esta URL. Para que puedan ver mi proyecto final. Yo usaría esto como referencia
si te quedas atascado. Y incluiré
esta URL en las
notas del curso para cuando hayas
desplegado tu proyecto, será genial para ti
compartir capturas y vincular a tu generador
terminado. Puedes hacerlo
subiendo tu trabajo a la
sección de tu proyecto en Skillshare. Esta es una gran manera de
obtener retroalimentación de mí, de los otros alumnos y
realmente a la prioridad
mostrar tu trabajo y tu
nuevo amigo reacciona habilidades. Por supuesto, si
tiene alguna pregunta, por favor háganme saber. Ahora, echemos un vistazo a lo que React realmente es
en la próxima lección.
3. ¿Qué es React y por qué lo uses?: Entonces, ¿qué es React y
por qué aprenderlo en absoluto? Simplemente, como se indica en
el sitio web oficial de
reaccionar, React es una biblioteca JavaScript útil construyendo interfaces de usuario. Con React,
podrás diseñar vistas
sencillas para cada
estado de tu aplicación. Reaccionar a tan eficiente que
sabrá solo actualizar los componentes correctos
cuando cambien tus datos, en su lugar, recargando toda
la página. Esto lo hace ideal para la
aplicación de una sola página
que vamos a construir en esta clase. Esto significa que tu
aplicación React tendrá un
gran rendimiento
y será súper rápida. Cada componente está encapsulado, lo que significa que cada componente
gestiona su propio estado. Componentizado, trabajo
mixto, fácil de administrar todo su código lo que le permite
reutilizar componentes a lo largo de
su aplicación. Para reaccionar ahora se utiliza en más de 10 millones de
sitios web en todo el mundo. Esto también significa que hay
una comunidad fuerte con grandes recursos por ahí para
ayudarte en tu viaje. También hubo una curva de aprendizaje mucho
más suave en comparación con su
contraparte Angular. Y espero mostrarles
justamente eso en este curso. ¿ Vamos a montar nuestro proyecto? Hagámoslo en
la próxima lección.
4. Configuración del proyecto de React: Ahora déjame
mostrarte cómo crear tu proyecto React y
cómo ponerlo en marcha. Por lo que ya he
abierto código VS aquí. Entonces este es el
editor de código que estaré usando. Así que por favor haz lo mismo, abre la tuya y solo
sigue conmigo. Lo primero que
he hecho es crear una carpeta vacía llamada generador de
cotizaciones. Curso lo que quieras y
guárdalo donde quieras. No hay archivos
ahí todavía, pero eso es lo que
vamos a estar configurando. Ahora para crear un proyecto React, deberás
asegurarte de tener instalado Node JS. Si no tienes
JS ya descargado, ve a Node js.org. Se te presentará
esta página. Ahora, como puedes ver, ya
se ha detectado que
estoy en un Mac iOS y
quieres descargar los últimos
archivos de descarga o actuales justo aquí. Ahora, ya tengo instalado
Node, así que no necesito hacer eso. Pero al hacer clic
en esto, se le presentará un asistente de
instalación. Y solo necesitas
pasar por los pasos hasta que tengas nodo
en tu sistema. Y entonces, ¿cómo verifica
si tienes nodo? Sólo voy a
abrir una terminal. Y así si VS Code
en nueva terminal, si no estás usando código
VS y no
tienes un terminal dentro de
tu editor de código. No puedes usar simplemente cualquier
terminal que esté liado con macOS o Windows. Así que acabo de abrir
una terminal aquí, pero acabo de cerrar esto
porque estaré usando el total dentro de las curvas S. Entonces espero que eso tenga sentido. De todos modos, para comprobar que
sí tengo instalado Node, sólo
voy a estar
escribiendo nodo dash V, que está con versión. Y puede ver que 17.9, por lo que está instalado. Si ves estos números aquí, después de escribir el nodo b, entonces tienes nodo
correctamente instalar. ¿ Qué es exactamente nodo
y por qué lo necesitamos? Básicamente, es un entorno de
servidor y es completamente de
código abierto, multiplataforma. Ahora lo que hace esto,
te permite usar JavaScript para escribir herramientas de línea de
comandos o terminal
para el scripting del lado del servidor. Y esto es exactamente lo que
necesitamos para crear esta app React. ¿ Cómo creamos la app React? Escribimos n px, creamos guión, reaccionamos, guión, espacio. Y luego puedes
escribir el nombre de tu carpeta o aplicación. Pero solo quería
usar generador de cotizaciones, que es el nombre de
mi carpeta aquí arriba. Entonces para hacer eso, solo uso un punto en lugar de un nombre y pulsa Enter. Necesito instalar,
Create, React app. Vale, para proceder, sí, le pego Y. Y aquí está abarrotada la app React y todos los archivos y carpetas
necesarios. Sólo dale un segundo a esto. Puede tomar algún tiempo
dependiendo de phos altos a una máquina lo siento, no
tengo que pasar
todo nuestro proceso de instalación porque estaba tomando
un poco de tiempo. Aquí queremos
almacenar completa, correcta. Todo se ve bien. Como se puede ver a la izquierda aquí, tenemos esta
estructura de carpetas que creó. Por lo que tenemos salsa
con varios archivos. App.js como la aplicación
raíz base. Muchos otros archivos aquí. Llegaremos a esos en un minuto. Ahora para poner en marcha esta
aplicación en tu navegador, nuevo en la terminal, déjame simplemente borrar todo. Si escribo npm detenido, no MPS, NPM, que significa
Node Package Manager, que te da varios
scripts que puedes ejecutarlo. Por lo que sólo quería
detener este espacio MPM. Detenido Entrar. Presumo que es un poco
pasa bien. Debe abrir
una pestaña o una ventana. Y si no lo hace, o
tienes que hacer es ir al anfitrión
local tres veces
y ahí vamos. Ahora, si puedes ver esta página, entonces tu replicación
reaccionó cuando se configuró. Empezando. Todo bien. Ahora si no
ves esto, no
ves esto en el anfitrión
local 3 mil. Entonces debí haber sido
un error en alguna parte. Y entonces vale la pena revisar
lo que está
diciendo tu terminal porque probablemente te
dará algunos mensajes de error, que te explicaremos
exactamente dónde está el tema. Vale, ahora sabemos que
esto está en marcha. Vamos a ordenar algunos
archivos dentro de app.js, que es el archivo padre
para la aplicación. No necesitaremos la mitad de esto, así que en realidad nos deshagamos de todo lo que hay dentro
del div, el encabezado. Sólo voy a
incluir un H1 para decir. Jen. Sólo para asegurarnos de que
sepamos qué es esto. Esto se actualiza en
tiempo real, como se puede ver, hemos perdido la animación
y tiene el nuevo texto. Por lo que no hay necesidad de
seguir actualizando esto o seguir
iniciando el servidor. Todo está buscando buenas
actualizaciones en tiempo real. Ya no necesitamos importar
el logotipo tampoco. Ahorra eso. Dentro de fuente como estamos aquí, vamos a configurar una estructura de carpetas. Ahora, esta es la forma en que me gusta
hacer para mantener las cosas ordenadas y ordenadas. ¿ Puedes causar copiarme o
piensas de manera diferente? Pero necesitaremos una carpeta
para nuestros componentes. Esto es dentro
de la fuente, por cierto. También dentro de fuente, vamos a tener una carpeta para nuestros
datos, nuestros datos de texto. Y luego vamos a hacer lo mismo para
la carpeta de estilos. Para estilos. Todo eso se ve bien. ¿ De qué más podemos
deshacernos aquí? Deshazte de las geniales herramientas web phi cada vez que estemos haciendo alguna prueba esto y deshazte de las pruebas de configuración. Eso está todo bien. Lo que significa que es index js. Podemos deshacernos de lo que
hemos borrado ahí. Y también esta parte
del fondo. Ahí vamos. Compilado
con éxito. Index js sostiene nuestro app.js, que simplemente debería
tener la cancha Enero para también
deshacerse de esta prueba. Sí. Y medio para hacer esto, pero no ha estado
usando estos archivos. Vamos a mantenerlo limpio y
ordenado, agradable y sencillo. Con la escuela cargando
bien en esta etapa, déjame simplemente mostrarte algunas extensiones
útiles que estoy usando en código VS
solo para ahorrar algo de tiempo. Entonces a lo largo de este curso me
verás usando algunos
atajos de teclado y cosas solo para ahorrar
tiempo y esfuerzo. Podrías encontrarte esto útil
para mostrarte esto en. Entonces componentes,
solo voy a crear un componente para el pie solo para probar estas cosas que
pasé para mostrarte. Entonces llamaremos a este
pie de página dot js. Por lo general es la convención
normal para iniciar el componente js
con una letra mayúscula. El primer atajo útil es crear un componente
funcional React. Simplemente voy a teclear II y tab y se crea estructura de
componentes aquí. Lo que está haciendo esto es
una extensión que estoy usando fragmentos de código, fragmentos
DX7 y actualizada. Entonces esto me está dando un montón de atajos de teclado solo
para ahorrar algo de tiempo. Así que mantengan un ojo hacia fuera para
esta extensión exactamente. Otra extensión útil que estoy usando se llama más bonita. Si tuviera que mover esto por ahí para
que no se vea muy bien. Si entonces resalto la escuela y uso el atajo de
teclado, Bennett la formatea en su lugar. Ahora esto está usando bonito Act. Entonces si vamos a Extensiones tiempo, nuevo, voy a tener esto
ya instalado. Ya que eres más guapa. Debería ser este resultado superior
aquí. Código toda la materia. Se puede ver que este archivo está usando proteínas muriendo en la
parte inferior aquí mismo. No he visto
que eso es más bonito aquí. Permítanme simplemente mover eso hacia arriba. Solo para que lo sepas, esto se está ejecutando en este archivo. Eso es un gran ahorro de tiempo. Otro, íbamos a
cambiar esta etiqueta de apertura. Si cambio esto
a uno, digamos, se
puede ver que la etiqueta de
cierre también se actualiza y obtiene sus extensiones. Este se llama etiqueta
auto completa. Sin embargo ahí vamos. Entonces
esta de arriba aquí. Nuevamente, muy útil, sobre todo si tus archivos
están creciendo en tamaño, entonces no necesitas encontrar esta etiqueta de cierre inferior justo en la parte inferior
de la documentación. Ya sabes, si actualizas esto, entonces bien la segunda etiqueta, la etiqueta de cierre también se actualiza. Con eso, tu aplicación está toda configurada y lista para funcionar. Echemos un vistazo a un código más. Y eso es en realidad
crear la propia aplicación.
5. Componentes y JSX: Hablemos de
componentes y JSX. En primer lugar, en
la pantalla
tenemos el componente de costo y
un componente funcional. A lo largo de este curso, estaremos trabajando con
componentes funcionales por solo quería mostrarte la
diferencia entre los dos. Cuando se hizo reaccionar por primera vez, era bastante común
usar componentes de costo. Esto implicaría el balanceo, la clase de palabras, el
nombre que puedes componer. Tendrías que extender el componente de puntos
React. Tendrías que incluir
un render para devolver el código HTML real. Y si estás cambiando de estado, tendrías que incluir
un constructor. Tendrías que incluir super, tener que usar esto, la, esta palabra clave para cambiar un estado. Componentes funcionales.
Sólo estamos realmente acostumbrados si estás renderizando un
componente o algún código. Si estuvieras trabajando
con el cambio de estado, tendrías que usar
un componente de clase. Pero todo esto ha cambiado ahora. Puede utilizar ganchos para administrar el estado dentro de los componentes
funcionales. Encuentro función Comparando. Es un poco más fácil
de entender. Pero esto puede ser diferente
para alguien de un
fondo de programación orientado a objetos como Java. Pero encuentro que
los componentes de la función usan menos código. Y como digo, con la introducción de ganchos, ahora se
puede administrar el estado. Hay menos código. Creo que es más ordenado,
así que estaremos trabajando con
componentes funcionales en todas partes. No,
componente funcional es básicamente solo una función JavaScript que declara el nombre
constante Hayek o en forma. Y es sólo una sencilla función de
flecha. Y luego estamos devolviendo
el código HTML. Ahora ya no
hay necesidad importar React desde reaccionar ya porque esta aplicación ya sabe que
este es un archivo React. La única vez que lo vamos a
importar de esta manera es cuando empezamos a usar ganchos
más tarde por la línea. Pero por ahora, podemos quitar eso. Hace que el código sea aún más ordenado. Esto podría parecer raro. Poner maqueta
dentro de Javascripts no muestra que se
acostumbrará a ella, pero esto es esencialmente
lo que es JSX. Ahora, toda la lógica y el
trabajo para el pie dispuesto se quedarán dentro
del archivo footer dot js. Y es más fácil
administrar el marcado y lógica en el mismo archivo. React se centra en separar las preocupaciones
más que nada. Aquí abajo, aquí es donde
exportamos el pie de página. Y estamos diciendo
que este pie es lo predeterminado para exportar. Podrías devolver otros
componentes o funciones aquí. Sólo estamos diciendo que
está el pie de página que es el predeterminado para explorar
desde este archivo. Ahora dentro del retorno
aquí está el marcado, que es esencialmente HTML. Entonces si ya estás
familiarizado con HTML, puedes escribirlo
de la misma manera. No obstante, hay un
par de casos en los que algunos atributos se nombran
ligeramente diferente. Por ejemplo, si
quisieras agregar una clase, decir distalless para la
clase es una palabra reservada, como acabo de mostrarte antes. Puedes usar
componentes basados en clases en React. Clase se convierte en
ClassName así. Y ya mi candidato, ¿me está diciendo o
sugiriendo el nombre de clase, Aquí está lo correcto a usar. Así que recuerda usar
ClassName y no clase. Además, si estuvieras
trabajando con Formularios, digamos crear, digamos una etiqueta para un formulario
el tiempo más sencillo a otra línea. Si está vinculando
esto a una entrada, normalmente tendría cuatro y luego el ID de la entrada. Cuatro es también una palabra reservada. Necesitas
recordar incluir HTML Full con CamelCase así. Simplemente útil recordar
que esto se elimina. Aún no vamos a añadir
ningún estilo. Pero mientras están en el pie de página. Vamos a cambiar
esto a una etiqueta de pie de página. Entonces voy a poner el texto dentro de un
párrafo como tal. Y luego vamos a actualizar esto
más para decir algo así como cogeneración a David
JC Lee, ese soy yo. Y luego agregaremos un símbolo de copyright como
este, ampersand copy. Quita esos personajes. Estoy diciendo copia punto y coma 2022. Otra cosa a tener en cuenta
es en este retorno, si tu HTML está empezando
a hacerse bastante grande, que está aquí, puedes, por
supuesto, mu es M en
dos líneas separadas. Es así, pero solo recuerda incluir paréntesis
alrededor de todo paréntesis como este. Usando más bonita, solo
voy a formatear esto en la prensa Comando
a para seleccionar todo. Entonces voy a mantener la opción
Turno F a Formato. Y entonces vamos a ahorrar
mucho más ordenado. Ese es esencialmente
nuestro pie de página completo. Pasemos a
otro componente. Puede seleccionar el directorio
de componentes. Vamos a crear un componente
para la cotización. Entonces la cotización ab.js, porque esto es simplemente
realmente un archivo JavaScript. Y luego usando mis
atajos de extensión S7 o la pestaña ICF, en realidad eliminó la entrada porque ya
sabe que es reaccionar. Cotización. Bien, genial. Ya tenemos
paréntesis para múltiples líneas en la vuelta cuando está devolviendo la
maqueta. Así que eso es práctico. Solo espaciemos
esto un poco. Dentro del div. En realidad vamos
a usar una etiqueta blockquote, y luego simplemente vamos a codificar alguna consulta
difícil. Esta es una gran cotización
que voy a hacer por ahora. Y luego por el nombre de la
persona que dijo la cotización, pongámosla en etiquetas de párrafo. Sólo pongamos tu nombre. Por supuesto, cuando estoy trabajando
con datos reales por la línea, vamos a hacer de esta dinámica
tanto la cotización como el nombre. Pero por ahora solo estamos juntando el componente base. De nuevo, voy a golpear Comando una opción de turno F,
preciosa en formateada. Y ese es nuestro segundo componente
hijo. Ahora, cuando digo componente
Charles, eso significa que tanto la
foto como la cita, necesita vivir dentro de
un componente padre. Ahora componente aparente
es el app.js, que debería haber sido
creado cuando creaste tu aplicación React. Anteriormente. Sólo tenemos código duro en
este generador de cotizaciones. Si bien aquí, vamos a
cambiar por lo que la maqueta. Entonces en realidad vamos a
dejar ese Davidson, pero lo pondremos en una sección, envolveremos todo en esta
sección así. Eventualmente tendremos aquí
el área de cotización. Comenta que están
entre el div, La sección eventualmente
tendremos el pie de página aquí. Apenas comentemos
esa matemática por ahora. Debajo de la consulta, necesitaremos un botón para aleatorizar
cada grupo. Así que vamos a crear
un botón ahí. Y voy a escribir el
texto generado para el botón. Ahora se puede ver nada
está cambiando a la derecha. Eso es porque necesitamos
arrancar el servidor. Apenas hacer npm iniciar inter. Espere a que eso se cargue. Iniciando el servidor de desarrollo, se compilan con éxito. Y luego podemos ver
nuestro botón Generar. Antes traemos la
cotización y el pie de página, al
igual que señalar un consejo práctico mientras ya es punta es algo
que debes saber. Dentro de nuestro regreso,
tenemos esencialmente un envoltorio. Entonces es la sección. Si tuviera que poner aquí una
segunda. Segunda sección. Segunda sección, se puede ver que
hay líneas rojas por todas partes. Se está
quejando, no le gusta. Si pasamos el cursor sobre el texto, se
puede ver las expresiones JSX
deben tener un elemento padre. ¿ Qué pasa si
realmente necesitabas dos hermanos como
esta dos secciones? Bueno, necesitas algún
tipo de envoltorio. Funcionaría si
tuvieras un div externo. Es ambos de esos. Pero si no querías incluir un día de solo
por el bien de ello, puedes usar un fragmento de React y todo lo que es es un div
vacío como este. Aquí se puede ver una mesa vacía y un div de cierre vacío aquí. Estos son Fragmentos React. Por suerte, no necesitamos
una segunda sección. Solo te estaba mostrando
eso como ejemplo para que puedas deshacerte de eso. Deshágase de este
fragmento de apertura, y guarde eso. Entonces. Vamos a importar nuestro componente de cotización
que hicimos alguna vez cabeza. Debajo de esta entrada del CSS. Nuevamente, esta app dot CSS se
lió con su aplicación
Create React. Puede que en realidad no necesitemos eso, así que eliminemos eso por ahora. Para importar un
componente hijo en el padre, podemos hacer cotización de entrada de. Entonces como una cadena, tenemos que entrar en
componentes de barra de puntos, slash quote. Bien, genial. Dice que se declara la cotización
pero su valor nunca se lee. Todo lo que hacemos aquí es tener
componente de cotización autocierre como este. Solo nombre de corchete del soporte de cierre de barra inclinada del
componente. Eso Vamos a ahorrar. Y luego en el oído derecho podemos ver que tenemos nuestro
cuidado del corazón hizo bastante bien. Hagamos lo mismo
por el pie de página. Pie de página de lo siento, componentes de barra de puntos
slash slash. Mejor. Haciendo el mismo pie de página. Cierra esa salva. Y ese es nuestro pie de página. Hemos importado componentes hijos a nuestro componente padre. Ahora, lo bueno separarse de estos
componentes es que puedes usarlos en todas partes porque
están componentizados. Entonces esto es esencialmente componente
quo. Podríamos doblete, triplete, ahorrar. Ahí vamos. Tenemos tres de esos. Por lo que esto es bastante componente se
puede caer en cualquier parte dentro de nuestra app y
funciona de forma independiente. Cada uno comparándolos,
gestiona su propio estado, sus propios estilos y
todo así. Por lo que sólo se puede caer en todas partes mientras estamos aquí. Antes de que me olvide, si sí
quería detener su servidor, se
puede ver que esto
sigue funcionando dentro su terminal o lo hace
es hacer Control y C. Y entonces se puede ver
que se ha detenido. Y luego si iba a
refrescar esta página, no
hay nada ahí porque
hemos detenido al vendedor. Espero que todo tenga sentido. Ahora pasemos a
trabajar con indicaciones.
6. Accesorios: Echemos un vistazo a trabajar
con propiedades o apoyos. Ahora, primero déjame volver a poner en
marcha el servidor. Haremos npm parado, golpeó Enter. Los apoyos son la calificación útil
para pasar datos dinámicos del proponente padre a sus diversos componentes secundarios. ¿ Qué puedes pasar abajo? Bueno, casi cualquier cosa realmente. En este ejemplo, no
es necesario seguir conmigo. Estos son solo algunos ejemplos antes de empezar a trabajar
con nuestros datos reales. Entonces lo que voy a
hacer primero es
digamos que queríamos cambiar
el nombre en el pie de página. Entonces aquí está nuestro pie de página
en el padre. Podemos agregar un atributo,
digamos nombre. Puedes llamar a esto
cualquier cosa que quieras. Pero cambiamos el nombre. Y luego cambiemos
este nombre para decir, Jim, Salvemos eso. Están dentro de nuestro pie de página. ¿ Cómo recibimos la cadena de texto de
vuelta? Bueno, los paréntesis aquí, el parámetro tiene que ser apoyos. Props, juego tirado en el mismo. Se declara que nunca se lee su
valor. ¿ Cómo actualizamos este texto aquí? Vamos a eliminar eso. Y entonces lo que tenemos que hacer
es abrir unos tirantes rizados. Y así es como usamos
JavaScript dentro de este JSX. Podemos escribir cualquier tipo
de droga dentro de aquí, pero vamos a estar trabajando
con las variables de utilería. Usamos apoyos y luego se detuvo y lo que
llamamos aquí el atributo, que se llama nombre de punto
aproximado. Lo guardaremos y se
actualiza a Jim por aquí. También podemos usar
esto varias veces sobre la segunda foto y
vamos a cambiar el Dave, es que lo honesto
llamado Julie va a golpear save. Y ahí vamos. Tenemos lo
mismo para dos componentes, usados tres veces más, pero está aceptando tres tipos
diferentes de apoyos. Ahora también puedes
pasar variables, golpear el interior de nuestra app. Vamos a crear un const. Llamaremos a este nombre uno. Guardará como una
cadena llamada Jamie. El nombre uno se puede usar
aquí dentro en lugar de Jim, pero no es una cuerda. Así que asegúrate de
usar llaves rizadas. Y pondremos el nombre uno ahí. Yo digo Save. Y ahí está Jamie. Retire los pies de página. ¿ Qué más podemos pasar aquí? Deshaznos de nuestro nombre uno, dejemos pasar
algún tipo de booleano. Entonces vamos a tener un verdadero o falso. Y lo que podemos hacer es, digamos al pie de página se
mostrará u ocultará esta fecha. Llamemos a nuestro puntaje de año
constante. Y vamos a establecer esto a
false porque vamos a esconderlo en el pie de página y
vamos a eliminar este atributo. Digamos que llamaremos a esto.
A esto se le llama un año. Entonces en algunos
tirantes rizados estamos pasando
por nuestra variable arriba. Esto se llama año, por lo
que eso significa en pie de página, necesitamos simplemente cambiar
esto de nuevo a mi nombre. Tan duro llevar de vuelta. ¿ Cómo nos mostramos y nos escondemos? Este año? Nuevamente, necesitamos
abrir llaves rizadas. Y sólo vamos a usar
un condicionado de taquigrafía. Entonces vamos a pasar apuntalamientos abajo, puntales dot, que acaba de llamarse año. Creo que sólo estamos pasando. Si los apoyos dot año es igual a verdadero, entonces vamos a mostrar la
cadena de 2022. De lo contrario, sólo
tendremos un árbol vacío, cuerdas
vacías, así que simplemente
nos esconderemos hacia atrás. Esto es sólo una taquigrafía. El signo de interrogación
es básicamente un if, si es cierto, y este codon
es básicamente un otro. Veamos, Lo guardaremos y de hecho lo
tiene en nuestro año. Entonces si volvemos con nuestro padre, cambiemos eso a falso. Lo siento, cambia eso a verdad porque sí queremos
mostrarte por aquí. guardaremos y
mostraremos el año. Esto es realmente útil para mostrar
y ocultar cosas como contenido de
texto o incluso cambiar nombres de
clase porque
diferente estilo. Vamos a revertir esto de nuevo
a cuando teníamos nombre aquí. Sí, aproximadamente
nombre por aquí. Vamos a cambiar esto de nuevo a nombre, cambiaría esto a nombre, y luego cambiemos
nuestro nombre de variable. Cambié el nombre a Keith. Keith ha creado este generador de consultas,
bueno, dientes de burro. Mi siguiente ejemplo es que
puedes establecer props predeterminados. Por ejemplo, tenemos
puntales nombre de punto aquí. Pero si Keith
ya no está disponible, podemos hacer doble tubería, que significa que todos los props
dot name, o pooling. Eso no ha cambiado,
eso sigue diciendo dientes porque Keith
está declarado aquí arriba. Si se trataba de una cadena vacía, digamos que los apoyos ya
no están disponibles. Así que quita eso. Entonces tenemos agrupación aquí
porque el nombre está en blanco. Estamos pasando por un prop de mezcla. Dentro de los apoyos, el
nombre del punto de los props no está disponible. Así que nos hemos dedicado a tirar. Eso también es útil para
copias de seguridad si no tienes ningún dato o puede que no haya
ningún dato que se transmita. Ok, espero que eso tenga sentido. No, podemos hacer
esto aún más ordenado. Imagina que tienes múltiples textos. Entonces tienes que escribir
apoyos una y otra vez. Hemos usado la palabra
props cuatro veces allí. Pero lo que necesitaremos es nombre. Ahora, podemos lo que se llama estructura
D estos apoyos. Por lo que sólo podemos conseguir
el nombre y hacer eso. Eliminar las indicaciones de nuevo
en llaves rizadas, sólo
podemos escribir la palabra nombre. Simplemente deshazte de estos
múltiples nombres. Y eso significa que solo
necesitamos tu nombre como gordo. Eso es muy necesario. Sólo eres ahorro
y mensajes de texto eso. Así que recuerde usar los
tirantes rizados para hacerse con cualquiera de estas indicaciones que se están
pasando por el padre. A pesar de que hemos
estado usando el pie aquí y
en realidad no necesitamos pasar nada
al pie de página. Así que vamos a deshacernos de eso. Volvamos a
revertir esto a mi nombre. Será tu nombre. Por supuesto, si has creado una foto de
ti mismo, dilo otra vez. Eso ha vuelto a la normalidad. Creo que hemos hecho
con una foto por ahora hasta que empezamos a estilizarla. Por lo que estamos más preocupados por la cotización que genera
al componente de cotización. Entonces este código está codificado
y este nombre está codificado. El curso que queremos transmitir datos
reales dentro de la app. Voy a crear tu
objeto y vamos a
llamar a este dato igual, y esto va
a ser un objeto. Y la razón por la que esto
es un objeto es porque estamos pasando. Bueno, necesito dos cosas aquí, la cita y el nombre. Digamos que el nombre es
igual a Joe Bloggs. Y digamos que la cita
está en la cuerda. Esta es una cancha impresionante. Este dato es lo que nos
gustaría pasar
a nuestro componente de cotización. Llamemos a estos datos. Estamos haciendo referencia al objeto
de datos anterior. Dentro de cotización,
Empecemos con un nombre aquí. Eliminemos esto,
algunas llaves rizadas. Y antes de que me olvide, hay
que traer aquí los apoyos. Es aceptar apoyos y M, necesitamos hacer referencia a los datos de puntos de
puntales. Y luego en nuestro objeto, tenemos nombre, nombre. Vamos a ahorrar. Y ahí tenemos. Joe Bloggs usaría lo mismo para que la cita
necesite el texto codificado duro, llaves rizadas
abiertas, apoyos, datos de
puntos, cita de puntos. Esta es una cotización impresionante. Genial. De acuerdo, voy a ser muy
molesto y solo añadir algunas cotizaciones allí para que
parezca que una
cotización real tiene mejor. Recuerda, podemos
desestructurar esto. Deshaznos de los apoyos para hacer
estos tirantes rizados más ordenados. Llamaremos a esto los datos no lo han hecho. Lo que significa que podemos
deshacernos de los datos de puntos puntales, nombre del
punto de datos de punto debe
seguir siendo exactamente el mismo. Estaremos trabajando con múltiples cotizaciones
porque la idea es presionar Generar y
luego muestra una cotización aleatoria. Por ahora, vamos sólo código duro, digamos cinco cotizaciones diferentes. Entonces eso significa que esto no
va a contener un objeto. Tendrá cinco objetos, lo que significa que debemos
incluir esto en una matriz. Así que el
cuadrante, el cuadrante hace que sea más fácil y más claro el
espacio del costado y todo
lo que voy a hacer es golpear una coma allí y
voy a copiar esto cinco veces más. Y entonces voy
a cambiar el nombre y la consulta para cada uno. Así que usa el texto que quieras usar,
sea cual sea el nombre que
quieras, donde quieras, no
solo tienes que tener cinco, puedes tener tres
donde puedes tener 100. Solo asegúrate de que
siga este formato. Así que asegúrate de usar tus propias cotizaciones
dondequiera que recojas información. No puedes simplemente escribir este acto, pero sólo voy
a acelerar esto. Haré esto muy rápido
y luego volveremos pronto. Genial. Si codifican
cinco cotizaciones allí, cinco objetos dentro
del formato de matriz de datos. Eso es, eso está todo ordenado. Ahora se puede ver que esto
no está poblando aquí. Y eso es porque ahora
estamos trabajando con objetos dentro de una matriz. Entonces no sabe lo que
acabo de pasar. Esencialmente no estoy
pasando por una matriz. Por lo tanto final de la cotización. Esto ya no tiene sentido
porque los datos son una matriz, por lo
que no sabe qué consulta
extraer de este ser una matriz. Vamos a tirar la
primera cita hacia abajo. Así que vamos a hacer el
cuadrante de datos 0. Por ahora diremos que esto está poniendo a través de
nuestra primera cita. Nuevamente. Pronto te mostraré
cómo cambiar esto. Entonces esto es dinámico y compartir citas y nombres
aleatorios. No, para hacer todo esto, vamos a empezar a
mirar ganchos
y ganchos nuestro set antes son bastante buena manera de manejar estado y cambiar los
efectos de las cosas. Vamos a pasar por eso siguiente.
7. Introducción a los hooks y usar: Hablemos ahora de anzuelos
y luego
profundizaremos en nuestro primer estado tomado de Estados Unidos. Ahora solo explica algunas cosas y luego echaremos
un vistazo a algún código. ¿ Qué son los ganchos? Como puede ver aquí, ganchos sí permiten
usar características que se encontraron en los componentes
basados en clases. Ahora podemos utilizarlos dentro
de componentes funcionales, y son
componentes funcionales que vamos a utilizar en este curso. Estas características incluyen la lógica
con estado. Por lo que sí significa
que se pueden agregar estados a cada componente de forma
completamente independiente y reutilizado de
componente a componente. Para mí, usando ganchos en componentes
funcionales, el código parece ser
mucho más corto, más simple
y más ordenado, mientras que
están teniendo todas esas características que se encontraron en los componentes
basados en clases. ¿ Porque el código es más corto? O crees que los ganchos tienen una curva de aprendizaje más baja comparación con el equivalente
en las clases, lo cual es genial cuando estás
aprendiendo por primera vez este tipo
de cosas en React. Los ganchos sólo se
agregaron en React 16.8. Así que sí, Tipo de tipo de new-ish en el
lapso de vida de React. Un consejo rápido. No use ganchos
conbucles interiores dentro de condiciones
o funciones anidadas. Simplemente llamarías hooks
al nivel superior de tu componente. Como especie de tocado. Y los ganchos evitan mucha de la sobrecarga que requieren
las clases, como crear instancias de clase, como vincular eventos y
crear un constructor también. Ahora si eso no tiene sentido y eso está absolutamente bien, ahora
vamos a mostrar algún código. Entonces primero, crearé un componente
basado en clases, y crearé este contador. Entonces cuando presiones un botón, aumente el número
en la pantalla en uno. Entonces lo que haremos es crear un
componente funcional usando el gancho de Estado de Estados Unidos para lograr
lo equivalente. Y luego se puede
ver una comparación con la cantidad de código
y la diferencia en el código para lograr lo mismo usando
el gancho de Estado de Estados Unidos. Así es como se ve un componente
basado en clase básica. Simplemente estaremos creando una función de estado
simple. Por lo que al hacer clic en
este botón, agrega 12. Bueno entonces Amazon
ahí en este momento, pero te mostraré cómo se ve
eso en un segundo. Con clases. En primer lugar
la necesidad de importar el componente, tendrá que utilizar
la palabra clave class, el nombre de nuestro componente, y tenemos que extender componente. Por lo que esto ya es más largo que la primera línea de un componente
funcional. Si estamos actualizando estado, necesitamos incluir un
constructor y super. Entonces para establecer el estado, digamos que nunca el número predeterminado, necesitaríamos usar la, esta palabra clave, este estado es igual. Y luego un objeto al que
podemos llamar a nuestra variable, digamos contar, y vamos a
establecer ese default de 0. Necesitaríamos una función para
incrementar el número. Vamos a llamarlo incremento. Y luego para volver a establecer el estado, necesitamos usar la palabra clave
this y usaríamos este estado conjunto. Por lo que esto cambiará el
valor dentro de un objeto. Nuestra variable de
conteo necesitaría
actualizarse a este estado de puntos, conteo de
puntos más uno. Entonces estamos tomando el valor
original y actualizándolo por uno cada vez. Para utilizar la función de incremento en el botón usamos onclick. Entonces tenemos que llamar a
este punto incrementos. Entonces para que realmente funcione esta función de
incrementos, hay
que vincularla también
dentro del constructor, que se olvida fácilmente. Así que sí, esto está incluido o necesario en los componentes
basados en clases, harías esta corriente es
igual a este incremento de puntos, punto bind dot dot this. Cuando primero estás aprendiendo
cosas como esta, especialmente en componentes
basados en clases, esto es bastante confuso. Aquí hay mucho que llevar. Y no tiene
sentido de inmediato por qué se necesita esto. Pero lo es. Nuevamente, te
mostraré cómo esto difiere dentro de un
componente funcional basado usando ganchos. Y luego para mostrar un número, el número es ahora este
punto estado conteo de puntos. Sólo guardemos ese
número es ahora uno a uno. Ahí vamos. Está cambiando
el estado cada vez. De acuerdo, así que
bastante incluido ahí, alrededor de 20 líneas de código. Ahora echemos un
vistazo a nuestro gancho. Lo que voy a hacer es que
acabo de comentar la clase y
comentaré en el gancho. Vale, el número está
nueve minutos en blanco. De acuerdo, entonces, ¿cómo logramos el resultado equivalente dentro del componente base funcional
usando el gancho Estado de Estados Unidos. En primer lugar, necesitamos
importar estado estadounidense. Tercero de React. Necesitas importarte
estado así. Y entonces, ¿cómo se ve el
uso state? principio, necesitaríamos
declarar una constante, que le igualaría usted
declara traído arriba. Y luego dentro de
los paréntesis está nuestro valor predeterminado, que es 0. Por lo que sabemos esto. Y entonces lo que pasa
antes de los iguales. Entonces como dije, es un const. Y entonces tenemos que desestructurar
lo que nos da usted declara. Hay dos parámetros
que debemos incluir. De hecho, dice que golpeó. Se espera un valor o retorno al valor
con estado y una
función para actualizarlo. Entonces esas son las dos cosas. El valor se llama conteo, podemos llamar a esto
como queramos. Y luego una función
para actualizar esto. Por lo general, la sintaxis convencional de esta función
sería la palabra establecida y luego el nombre de la variable, o en CamelCase
en esta corriente, en este caso se
establece contar así. No se puede contar el conjunto
actual, utilice el estado. Dentro de nuestro botón,
necesitamos esa
función de incrementos o onclick, al
menos onclick es igual. Entonces lo que tenemos que hacer es
usar una función de flecha. Cada vez que hace clic en
esto, desencadena la
función y
solo podemos usar set current aquí. Así que establece el recuento. Podemos hacer contar más uno. Entonces el número es ahora actual. No necesitamos usar la, esta palabra clave dondequiera que podamos
saltos de referencia actual. No hay vinculación
de la función. Simplemente podemos hacerlo todo en línea. Entonces la teoría, presionando uno actualiza el número sin
actualizar la página. Y mira cuánto más ordenado se compara
esto nuestra clase de componentes basada en clase. Tenemos que incluir comparativo. No hay necesidad de eso. El nombre de la función
es mucho más simple. No estamos extendiendo reaccionar, no
estamos extendiendo
el componente. No hay uso de
constructor aquí o super. No tuvimos que
vincular la función. Sólo usamos una línea
de tu estado aquí. No hay necesidad de esta función
adicional. No necesitamos usar
la, esta palabra clave aquí. Sólo podemos
contar referencias como lo hemos hecho aquí. Se puede ver cómo hemos
ahorrado tanta codificación aquí, solo usando el gancho de Estado de Estados Unidos. De acuerdo, entonces estaremos usando la estadidad de Estados Unidos en nuestra aplicación
real, pero llegaremos a eso en breve. Veamos un,
otro gancho útil, pero estaremos usando el
efecto de usuario enfriado en la siguiente lección.
8. Gancho de uso: El efecto estadounidense Hooke. Damas y caballeros, usaremos el efecto estadounidense
Hooke en nuestra aplicación. Utilizamos para obtener nuestros datos locales, por lo que nuestra matriz de cotizaciones y facilidad. De hecho, Herc es genial para eso porque te permite realizar efectos secundarios dentro de los componentes
y eso es un efecto secundario. Entonces eso es la obtención de datos, como configurar una
suscripción y
cambiar manualmente el DOM dentro de los componentes de
React. Echemos un vistazo a algún código
ahora para que pueda mostrarte algunos ejemplos prácticos
del uso del gancho de efecto. De acuerdo, Así que esta es una aplicación muy cruda. Lo que esto hará es que vamos a actualizar el título
aquí de la pestaña. Al hacer clic en el botón, se establecerá el número en el título y
el título del documento. Y esto sólo puede suceder
después de que todo se haya cargado, después de que el comparativo
se haya importado. No se puede hacer de
inmediato porque estamos accediendo al documento. ¿ Utilizamos efecto tan
similar al estado estadounidense, podemos traerlo en apariencia de efecto
importante en
estos tirantes rizados. ¿ Cómo se ve el
efecto de las abejas? Puedes escribir estos efectos. Después abrimos algunos paréntesis y luego vaciamos
paréntesis por ahora. Y luego solo usaremos
una función array y abriremos eso con
algunas llaves rizadas. De acuerdo, así que he dicho que
queremos actualizar el título del documento
después de que todo tenga mi título de punto de documento igual, y luego cambiaremos el mensaje a
algo como clicado. Entonces solo vamos a
interpelar la corriente. Entonces usando el estado estadounidense, que te mostré en
una lección anterior, para actualizar el contador por uno. Has hecho clic en contar sin embargo
muchas veces el valor predeterminado es 0. Puedes ver que está actualizado en
el tema clicado 0 veces. Entonces en teoría, si
presionamos incremento, se ve ese número
cambiando ahí arriba. Ahora esto no funcionaría fuera
del efecto estadounidense Hooke. Y eso es porque como dije, esto es un efecto secundario. Lo que estamos haciendo aquí, estamos
actualizando el documento. Tenemos que esperar a que
todo cargue antes de que esto suceda. Ahora podemos pasar aquí un
segundo parámetro, que serán algunos
corchetes. Lo que esto le dice al componente
es básicamente así. De forma predeterminada, este efecto
secundario de efecto de uso se ejecuta tanto después del primer render como después cualquier otra actualización después de
cualquier renderzado en la página. Entonces no me
corchetes significa que esto solo
sucederá la única vez. En este ejemplo, eso
no es realmente útil porque podemos ver que estoy
colgando incrementos. Ya no se está actualizando en cualquier momento porque todo lo que digo es solo obtener esta información una vez
y nunca más. Escenario donde esto
es útil es cuando estás buscando datos
externos o cualquier
dato realmente que te
mostrará un
ejemplo muy pronto. En ese escenario, solo
querías recabar información la única vez en
que todo baja. Pero aquí queremos
actualizar esto muchas veces. En realidad podemos especificar cuándo queremos que esto se
renderice o cambie. Voy a poner cada
vez que ese recuento cambia. Esto ignorará cualquier otra
vez que la página renderiza, pero solo si contar actualizaciones
entonces haga esta teoría. Si presiono incremento ahora, se está actualizando de nuevo
porque está reconociendo que el
recuento está cambiando. ¿ Qué pasa con los datos externos? Entonces si queríamos obtener algunos
datos de una API o si
los efectos de uso entran en juego entonces es un componente de
datos externo get. Aquí solo estamos
enumerando arte de cosas pendientes. Entonces esto es simplemente básicamente cuadro de texto de
placeholder. Esta información viene
de esta API externa. Se puede ver aquí
con nuestro estado estadounidense, esto es una carga de tareas pendientes. Entonces el valor predeterminado inicial
es solo una matriz vacía. Lo sentimos, Inicialmente
no tenemos los datos, pero sabemos que va
a ser una matriz de tareas pendientes o una matriz de texto. Entonces en nuestro efecto de usuario, aquí, solo
buscamos
los datos y esta es una función que estoy
llamando aquí abajo. Como se puede ver, estoy
usando la matriz vacía. Esto apenas se enfría una vez en
el primer render porque
sólo queremos obtener esta información
cuando todo se baja, cuando todo está montado, solo la única vez que estoy
usando async esperan. Eventualmente puedes estos
datos, que es Jason. Y luego cuando
tengamos la respuesta, que es una variable pivot
aquí, estableciendo las tareas pendientes. Entonces nuestro estado estadunidense
ser la respuesta. La respuesta es una carga de
información dentro de una matriz. Y eso significa hacer. Ahora causamos el
mapeo de respuesta a través de todas las
tareas pendientes porque es una matriz. Y luego en una etiqueta de párrafo, solo
estoy
enumerando el título del artículo. Esta variable aquí se puede
llamar todo lo que queramos. Podemos llamarlo para hacer si
queremos importar artículo, entonces solo estoy accediendo al título
del ítem y está mostrando esta
información aquí. Debido a que esta información, estos datos podrían ser un
archivo masivo y masivo, encontrarán cientos y miles y miles de entradas, lo
que significa que no puede obtener
acceso a esto de inmediato. Tenemos que esperar
todo a Mt. En el efecto secundario. Podría tardar un segundo
cargar estos datos. Y por eso estamos
usando estos efectos. Y luego cuando esté
listo y es acceso a todos los
datos que podemos mostrar. Hace uso Efecto aplica a
nuestra aplicación y a nuestros datos. Donde te mostraré eso en la próxima lección cuando
empezamos a
enganchar todos nuestros ganchos
y usar nuestros datos. Por lo que vamos a estar usando
el estado de Estados Unidos y usted usa efecto en nuestra aplicación
en la siguiente lección.
9. Los datos y la engancha: Ahora hemos aprendido sobre
los fundamentos de los ganchos. En realidad usemos el
estado estadounidense y usemos el efecto y trabajemos con nuestros datos
reales de cotización aquí. Entonces lo primero que voy
a hacer es realmente mover estos datos a un archivo de datos. Creamos este
directorio de datos dentro los datos de
origen que es sólo
crear un archivo de datos dot js. Por favor
sígueme si puede. Voy a copiar
estos datos llegados. A ver si eso realmente se rompe
porque los datos no están definidos, vamos a pegarlos aquí. Y no olvidemos exportar
los datos en sí mismo formato. Está bien, eso es exportado. Sólo tenemos que importar
fecha e importe, no
te olvides de los tirantes rizados. Datos de datos de barra inclinada. Slash data está funcionando
muy bien en su propio archivo, por lo que más fácil de mantener. Nuevamente, si esto fuera un, un 100 líneas o más de lo que simplemente tendría más
sentido tenerlo
en sus propios datos, un archivo. Entonces por el momento
solo estamos codificando duro en la primera cita de nuestra matriz. Y
lo estamos haciendo pasando etiqueta citas
fechadas para abierto
el componente de cotización, se pueden
ver datos y
luego el primero es 0, y esa es la primera cita. Pero nos gustaría
cambiar esto cuando
haga clic en el botón. Estará actualizando el estado, lo que significa que necesitamos traer
en uso estado, nuevo estado. Y entonces se puede ver
que dice que usted declara fragmento, sólo
voy a golpear Tab y está poblando casi lo que necesitamos. Así que voy a llamar a esta cotización, luego establecer cotización, que
necesita ser CamelCase. Lo que podemos hacer el equivalente a codificar duro el primero en
la matriz es simplemente hacer datos. Entonces 0 estado no está definido
porque no lo he importante aquí
arriba en Fort
directamente desde React. Genial. Y entonces lo que tenemos que hacer entonces es en lugar de solo pasar el
tiempo, todos los datos, sólo
tenemos que pasar cotización abajo, cotización se declara aquí
y pasarla aquí abajo. Vamos a romper porque por dentro
son bastante competitivos. Precios abajo de todos los datos
en contra de esto necesita cambiar. citar, no
vale trimestre. Nota, estamos llamando a
los datos mis errores. Cambié esos bytes de datos, pero ya no necesitamos esta matriz eliminada de
la cita y el nombre. Ahí vamos. ¿De acuerdo?
Si tuviera que cambiar este valor predeterminado a
uno, entonces es ideal. Otras cotizaciones, Judy Smith, si llegamos a nuestros datos, entonces sí, es la correcta. El siguiente en la matriz
que está codificado duro, esa es nuestra cotización predeterminada. Pero luego en el botón, por
supuesto que queremos en click. Simplemente use esa cotización de conjunto
para cambiar el valor. Por ahora, solo vamos a código
duro un valor como
digamos a los datos, al siguiente en la matriz. Entonces en teoría debería
cambiármelo a mí. Golpe Generar. Ahí vamos. Esto siempre estará respaldado. Tercero en la matriz porque esto es lo
que lo hemos establecido aquí. Lo que realmente tenemos que hacer es
aleatorizar este número aquí, porque la idea es que
golpeas Generate y ya recoge una cita aleatoria de
nuestros datos. Así que vamos a trabajar
un número aleatorio. Pongamos esto en un const y
lo llamaremos número aleatorio. Simplemente usando JavaScripts estándar, necesitamos utilizar el punto
matemático aleatorio, que recoge un número aleatorio
entre 01, por lo que 0.10.2, etcétera Pero entonces necesitamos veces esto
por la longitud de los datos. Por lo que tenemos cinco cotizaciones aquí. Podemos hacer longitud de punto de datos. Esto significa que incluso si
terminamos con un 100 más y
seguimos agregando a esto, entonces la longitud del punto de datos siempre
será la longitud de nuestros datos. Porque no
solo queremos un decimal, queremos que sea número entero. Tenemos que agregar piso de punto Matemáticas. ¿ De acuerdo? Esta es nuestra teoría de
números aleatorios. Simplemente registramos el número aleatorio. Y solo inspeccionemos lo que está
sucediendo en la consola. Nosotros obtenemos 23340144. Estamos recibiendo
números aleatorios aquí. Ahora nuestra explicamos y
pronto por qué esto está sucediendo dos veces porque
sólo queremos que suceda los. Y entonces lo que tenemos que pasar es en lugar de codificar duro esto, necesitamos aleatorizar
el número onClick. Así que vamos a crear la función
aleatorizada. Llamaremos al azar. Sólo voy a ser
una función de flecha. La función simplemente
iba a utilizar la cotización establecida. Indicas los valores aquí donde se
apoderan de los datos. Pero entonces en lugar de
un número codificado duro, estamos usando el número aleatorio aquí. Entonces en lugar de en patrón
llamando set quote, solo
podemos usar
aleatorizar así. Veamos qué pasa.
¿ Por qué eso no está cambiando? Por supuesto, necesitamos
usar el efecto estadounidense. Traer en ti usa efecto aquí. Simplemente elimine algunos
de estos valores. Eliminar el valor en
los corchetes. Entonces vamos a dejar esto vacío porque solo queremos
conseguir los datos. La primera carga. Lo que vamos a hacer es llamar
al azar efecto de uso interior. Ahora tienes un número? Cuando hago clic en Generar no es continuamente
poblar las cotizaciones. El motivo es que cuando fijamos nuestro número aleatorio aquí
sólo tiene sucediendo los. Por supuesto, queremos
conseguir una cotización aleatoria. Cada vez que algo cambia en la página están en primera
carga cuando la
magnitud de todo y el onclick aleatoriza conseguir causa se está
enfriando y usar un vector
que es correcto, pero nosotros sólo hay que conseguir que ese número redondo sea poblado
en cada clic y después cada sola teoría de la agenda en este momento están recibiendo
las diferentes cotizaciones. Excelente. Y una cosa que es
útil hacer es si
se trataba de un enorme archivo
de datos de miles de entradas, esto puede tardar un poco en
cargarse la primera vez que
cargues la página. Por lo que es útil
tener algún tipo de
carga de texto y cargar el archivo usas para decirle al usuario
que los datos están llegando. Principalmente efecto lo
que estamos haciendo aquí porque hay
datos normalizados con los que trabajar. Cuando se trabaja con aplicaciones
más grandes. Esto es útil saber. Podemos hacer esto con
usted estado también. Entonces aquí arriba, solo vamos a crear el fragmento de datos de Estados Unidos
y vamos a recordar que esto se está cargando y luego set
está cargando el capital I. Y luego vamos a establecer esto en verdadero. Porque
será cierto inicialmente cuando esté tratando de
obtener los datos. Estará cargando los datos
cuando cargues esto por primera vez, pero luego cuando
tenga los datos y podemos decir que se está cargando de nuevo a false porque se han
recibido los datos. Pero lo que hacemos con
esto es cargar valor. Bueno, podemos usarlo
como condicional para mostrar u ocultar cierto
texto o contenido. Esto es un booleano a verdadero. Entonces nos ponemos a false
cuando se obtiene los datos. Por lo que no queremos
mostrar esta cotización hasta que se
haya completado la carga. Debajo de la H1. Para usar algo de JavaScript, acabamos de abrir
algunas llaves rizadas. Entonces podemos hacer es cargando. Entonces, si esto es cierto,
entonces, ¿qué tenemos que hacer? Vamos a mostrar un párrafo
que dice cotización, cargando. Esto está bien por ahora.
De lo contrario, si no es cierto, si es falso y se
ha completado el aprendizaje. Ahí es donde queremos esta
cotización que pueda sentarse aquí. Incluso si refresco esta página, simplemente no vas a ver
eso porque es tan rápido. Vamos a establecer está cargando a false
aquí, signo de exclamación. Refresca la página y puedes verla dice cotización ahora aprendiendo, por lo que esto es lo que se
vería revertir esto de vuelta. Ahí, básicamente
tenemos nuestra configuración de gancho. Estamos usando nuevo estado
para establecer una cotización, para establecer si se está cargando. Esencialmente estamos usando el
efecto de usuario para el efecto secundario, donde estamos obteniendo
un número aleatorio y luego configurándolo a los datos. Entonces todo esto sucede después de que todo
se haya cargado en la página. Podemos entonces usar
el condicional está cargando para mostrar y
ocultar contenido diferente. Pasando nuestra cotización a nuestro componente de
cotización, onClick, estamos aleatorizando el número
aleatorio y estamos aleatorizando la
cotización para obtener de estos datos que se encuentra en
su archivo separado. Eso tendrá sentido en absoluto, agradable y ordenado, solo
usando los ganchos de símbolo. Y en realidad porque
estamos utilizando este hecho de usuario, podemos eliminar este valor
predeterminado porque enorme efecto en el nodo ya está
aleatorizando este cuarto de galón. Todo tipo de nota que
trae una nueva cotización, Genial.
10. Pruebas: Pruebas, pruebas 123. Vale, esto es lo
que vamos a hacer. Ahora básicamente terminamos
la parte React de la obra. Podemos probar los datos, podemos probar nuestros componentes. Y la mejor manera de
hacerlo es si estás usando Google
Chrome es ir a la tienda web de
barras de
Chrome.google.com y buscar herramientas para
desarrolladores de React. Esta es la herramienta oficial dev porque es ofrecida por Meta, que es el nuevo Facebook, que hacen reaccionar si
no lo sabías. puedes ver que
ya he descargado esto a mi chrome porque
dice eliminado del crecimiento, pero sí,
asegúrate de obtener esto. Lo que esto te da. Déjame cerrar esto. Te mostraré cómo consigues dos. Y llegas a eso. Estamos en una app antes de tu
tiempo para inspeccionar. Abre tus herramientas de desarrollo normales donde probablemente estés
familiarizado. Y luego se pueden
ver estas nueva pestaña, sake oponentes y perfil. Haga clic en Componentes. Y él es nuestra aplicación. Entonces tenemos nuestra app, que es nuestro componente padre. Y básicamente se puede
ver la jerarquía, señor. Se puede ver que la aplicación tiene que componentes
hijo,
cotización y pie de página. Haga clic en esos, también
lo resalta en el front-end también. Y también es genial
si vamos a cotizar, sabemos sobre nuestro componente
actual, estamos pasando
los datos de cotización. Ves hélice,
tal vez está al otro lado. Tenemos apoyos. Podemos ver el aproximado que se
pasa a este componente central. Y en efecto son datos que tenemos un nombre
y tenemos una cotización. Si actualizamos esto, generamos, luego
actualizaciones en tiempo real, se
puede ver cómo se cambia eso. Incluso podemos probar nuestro proxy para poder escribir lo que quiera. Y ahí vamos. Se está
actualizando en el front-end. Tengo que hacerlo. También podemos ver que está
el estado que estamos declarando en nuestro componente de aplicación
padre, que de hecho es que esto se realizó deletreado
excepcionales plantas equivocadas, no muy excepcionales de mi parte. Ignora eso, por favor. Tenemos a nuestro estado aquí. También tenemos un segundo estado. Entonces este es nuestro estado de carga. Actualmente se establece en false. Si tuviera que marcar esto, hay una casilla de verificación todo el
camino a la derecha aquí. Puedes ver en nuestra
cotización ahora cargando. Por lo que es una buena manera de probar
cosas que puedes interactuar con tus datos reales e
indicaciones dentro de aquí, encendiendo y apagando esto. Y entonces se puede ver también en la jerarquía hit
esconde el componente core, que debe hacer cuando está
cargando se establece en true. Resulta lo falso
y vuelve otra vez. Otra cosa a mostrar rápidamente, esto no es parte de
las herramientas reactivas. Si vamos a elementos, podemos ver que pie de página
tiene una clase de Pie de página. Recuerda que la clase es una palabra clave
reservada en reacciona. Si solo voy a mi código, verás que en pie de página estamos usando el nombre de clase correctamente. Y luego solo
muestra que está compilando aquí la
palabra correcta de clase, lo cual es bueno saber. Así que cuando estés teniendo una
jugada con la aplicación URN, sí, definitivamente descarga
esto y haz un clic alrededor y ve qué
datos estás pasando. Además, es una buena manera de depurar tu mano si
no estás obteniendo los datos, si no te están pasando los apoyos
correctos, si el estado no se ve bien, este es el mejor lugar para ver qué va mal y dónde podría
necesitar arreglar algo.
11. Cómo añadir estilos: ¿ Verdad? Bueno, pero más
o menos terminó con la parte React de este curso, que es lo más
importante. En esta lección,
solo voy a añadir algunos estilos depende
completamente de ti si quieres seguir a lo largo o
ver esta lección en absoluto, literalmente solo
estaré
agregando algunos estilos CSS. Pero si estás contento de agregar la tuya propia y no
necesitas seguir adelante. Siéntete libre de saltarte
esta lección, ¿verdad? Así que de todos modos, para aquellos que se pegan dentro de nuestro directorio de
estilos, dentro de la fuente, solo voy a crear un archivo styles.css. Vamos. En el cuerpo. Sólo voy
a establecer una bonita familia de fuentes. Vayamos por algo como Gilroy le gustaba esa font-familia. Simplemente haremos Helvetica
sans-serif para acabar con eso. Lo que podemos hacer es dentro de App, vamos a importar estilos slash slash styles.css,
él después de estilos. Ok. Vamos a crear algunos
estilos para la página. Aún no hemos creado
esta clase. Tenemos que añadir eso
a nuestro marcado. Pero por ahora solo agreguemos poco de estilo para elegir un
bonito fondo verde, 70 BC a AD, sí, y nada. Entonces volvamos a nuestra app. Añadamos nuestro
nombre de clase a nuestra sección. No olvides su
nombre de clase y no clase. Página K Ahí está nuestro verde. Voy a cambiar este
nombre de clase de app a container. Y entonces, ¿qué más
debemos cambiar? Nuestro está cargando texto, podemos parar eso como
agregar un nombre de clase. Todo solo aprender está bien. Nuestra cotización, y vamos
a poner esto en una nueva línea para que podamos ver
eso un poco mejor. En realidad voy a
envolver esta cotización en un nombre de clase div de contenedor de
cuarto de galón. Sólo corre hecho. Era nuestro pie de página mirando a través de nombre de
fértil, Eso está bien. Entonces, ¿qué tal nuestro
comparador queer? ¿ Bloqueó
el párrafo de la palabra para el nombre. En realidad vamos a agregar un nombre de clase. Nombre aquí. Este punto, te
animaría a que solo tengas un lío
con el Oregon College y nosotros ya en fondos y hagamos esta aplicación que eres dueño de
tu estilo, la propia manera de David. Entonces es un poco diferente. Mía. Dentro de la página, quiero que todo
se apila uno encima del otro solo para
asegurarme de que esté sucediendo. Voy a configurar display
para que se flexione lado a lado, pero luego podemos cambiar de
dirección a columna mejor. Y entonces pondré
la altura para que sea un 100% de la altura de vista, bien, verde por todas partes,
exactamente lo que quiero. A continuación, ¿qué debemos mirar? Tenemos un contenedor. Un contenedor. También vamos a
hacer este flex de pantalla. Y de nuevo, pongamos esto en una columna, columna de dirección flex. Quiero poner
todo centrado, centro de contenido
justificado. Entonces la altura
del contenedor. Apenas hagamos 95 vista altura. Ahora en el centro. Asegúrate de enviar a
correctamente con el margen 0, la parte superior e inferior o
dos en el medio. Eso se ve bien. Haremos un ancho máximo de 1200 píxeles solo
para pantallas más grandes. Entonces vamos a establecer un ancho del 80 por ciento porque no
quería ir
todo el camino a través. Ahí vamos. Esto es cheque. Ahí vamos. Se puede ver el max-width
funcionando muy bien allí. Veamos nuestro encabezado H1. H1. Va a hacer de esto
un verde ligeramente oscuro, por lo que un hash 2676. Hagamos un tamaño de fuente de
5050 píxeles y bastante grande. Margen ceros 0100 recoge un
pequeño hueco en la parte inferior. Así es como nuestra
cotización contiene una x. que
quiero hacer es agregar
un poco de margen. Gestión inferior 50 pixeles. El propio presupuesto
blockquote, centrado. Nos aseguraremos de que sea blanco. Entonces hash FFF, estilo de fuente
para que sea cursiva. Espero que puedan ver lo útil es
esto para que esto se esté
actualizando en tiempo real. Entonces podemos, en tiempo real afectar los estilos y verlo realmente
funcionando y cómo se ve, lo cual es realmente práctico. Margen y vamos a mover eso. Imagina ceros a la izquierda. Haremos un
tamaño de fuente de 90 pixeles. Agradable y grande. Masivo, pero bastante parecido. Muy bien, entonces el nombre
abajo abajo, Joe Bloggs, nombre de clase. Voy a poner el
color a hash CA 755 C. Sí, buen tipo
de color anaranjado. Casi como he
preparado previamente estos colores. Increíble. Tamaño de fuente a 20 pixeles. Manera de hacerlo audaz o 800. Sé bueno. En realidad, voy a hacer que el texto se
transforme en mayúsculas. Sí, Niza. Está bien,
nos estamos acercándonos. A continuación, echa un vistazo al botón. Color de fondo. Voy a ponerlo en un
color verde oscuro 267, un borde. Vamos a deshacernos de 0. Color del texto y hazlo blanco. Vamos a asegurarnos de que el cursor sea puntero cuando pasa el cursor sobre él. Agradable. Familia de fuentes para el botón. En realidad vamos a robar
o tienes aquí font-weight, audaz, 800. El ancho es demasiado grande, por lo que es un ancho máximo. 150 pixeles. Necesita algún relleno de 5015
pixeles alrededor de huecos y buenos, y vamos a hacer transformación de texto. mayúscula. Agradable. Al igual que agregar un
estado de desplazamiento a este botón,
el botón dos puntos se desplace. Cambiaré el
color de fondo para que sea blanco. Y cambiaremos el
color del texto para que sea el verde oscuro. Básicamente solo revirtiendo
todo a 66 F. Luce bien. Creo que acabamos de meter el
pie de página por el fondo aquí. En realidad no añadí una
clase de pie de página a eso. Vamos a usar esa clase de pie de página. Color del texto. Hagamos esto gris. Sí, eso está bien. Y nos aseguraremos de que el texto
alinee establecido al centro. Sí, eso está bien. Eso hará esto buscando
nuestro texto de carga. Déjame ir a la app. Lo que haremos es que nos
fijemos como aprender a falso. Aquí hay un signo de exclamación, carga
coordinada y ver, mi párrafo tiene nombre de
tos de carga. Entonces vamos a los estilos. Ciertamente no hace falta estar
a Francine. Aprendiendo constantemente
el color puede ser blanco. Y sólo vamos a hacer un tamaño de fuente
más grande de seis píxeles profundos aquí. Absolutamente bien. Sólo revertir eso atrás. Guardar. Eso se ve bastante decente. Sí, simpática. Ese es nuestro generador de código.
Agradable y sencillo. Pero trabajando, luce
bastante bien.
12. Despliegue de tu trabajo: Ahora es el momento de desplegar
tu fantástica app, pero acabas de construir para que todo
el mundo pueda verla. Y ahora
te voy a mostrar lo fácil que es hacer usando Netlify. Netlify son un gran equipo
y cuentan con un gran servicio en diversas herramientas para construir
e implementar aplicaciones. Sí, tengo bastantes
características incluyen análisis
y pruebas divididas. El despliegue es realmente genial. Y por eso usaremos servicio de implementación de
Netlify
para implementar tu app. Vamos a hacer esto todo
dentro de la terminal aquí. Abre tu terminal. Dentro de tu app. Asegúrate de construir una aplicación lista para la
producción. Para ello, solo
vamos a ejecutar npm run build. Como dice en la terminal, la creación de una
producción optimizada se construye. Entonces esto va a
compilar todos nuestros archivos en estos
archivos de tamaño muy pequeño, lo cual es genial. Y si miramos a nuestra estructura de
carpetas, ahora
tenemos una carpeta Build. Y esto es exactamente lo que se
va a subir. Por lo que esencialmente se ha creado un archivo HTML de índice
con todo nuestro trabajo. También hay una carpeta estática con nuestros estilos y JavaScript. Esto es producción lista, construye nuestra app. Simplemente haga clic una vez en la pantalla. Entonces solo necesitamos
instalar npm, instalar el cliente Netlify, que es Netlify space CLI, y vamos a hacer space dash g. por lo que está instalado globalmente. Si te encuentras con alguna zona de
permisos como yo tengo, simplemente escribe
todo de nuevo, pero pon sudo al frente. Esto nos da permisos de administrador para instalar el cliente Netlify. Sudo npm instalar Netlify. Cli, space dash g. Tenemos instalado el
cliente Netlify. Vamos a aclarar que estaba en la terminal y luego es solo un caso de escribir espacio
Netlify, desplegar. Golpea Enter. Asegúrate de deletrearlo
bien. Falta una T ahí. Siguiente lo-fi,
lo escribí mal de nuevo. Levantamiento neto phi. Despliegue. Nuevamente por tener áreas de
permiso hacen lo mismo con
sudo en el frente. Netlify. No notifique el despliegue. Y luego esto
abrirá una página que se ve
así y necesitas iniciar
sesión en Netlify. Puedes usarlo
dependiendo de lo que tengas es que tengas GitHub o Bitbucket, o simplemente puedes usar tu e-mail. Voy a iniciar sesión con mi GitHub. Ya poblado para
mí. Acabamos de iniciar sesión. Tenemos
autenticación de dos factores. Déjame resolver eso. Entonces autorizaremos a Netlify. Entonces de nuevo,
sólo estamos consiguiendo a través los pasos de seguridad, autorizar. Acabamos de volver
a nuestra terminal. Voy a seleccionar
estos dos oxígenos. Voy a seleccionar Creighton, olvidar un nuevo
nombre de sitio como opcional. Vayamos
freelance, indefinido. Y luego me está preguntando
qué directorio publicar. Bueno, es nuestra carpeta Build. Sólo voy a
escribir construir aquí. Ahí está desplegando nuestro trabajo, solo esperar el Go Live es bastante rápido y el
despliegue está en vivo. En teoría. Esta URL que se ha proporcionado
en nuestra terminal. Vamos a esa noche. Esa es nuestra app. Trabajando como se esperaba. Todo esto es gratis
también y
pudimos desplegar esto con
bastante rapidez. Espero que todo ese
material terminal tuviera sentido. Así es como se
puede desplegar trabajo Netlify y es
gratis, lo cual es genial. Gráfico para seguir estos pasos, siga las
instrucciones del terminal. Asegúrate de crear
una carpeta de compilación que sea el objetivo que debes decirle
a Netlify que mire. Entonces como generador final de
cotizaciones en la URL proporcionada
en la terminal. Ahora te recomendaría que si has llegado a esta etapa y todo
es exitoso y
tienes un enlace para compartir. Por favor, asegúrate de compartir
tu trabajo en Skillshare. O también podría incluir una bonita captura de pantalla
si lo desea. Sería genial
compartir tu URL. Así que yo y otros
estudiantes podemos ver tu increíble trabajo y
no recibí retroalimentación. Y mientras hacemos eso, ¿por qué
no echamos un
vistazo al trabajo del otro alumno? Bonito. Acabas terminar de construir un generador de
cotizaciones o no reaccionar y también ha sido
desplegado en la web. Bien hecho.
13. ¿Dónde ir desde aquí?: Podría decir que has hecho tu app, has aprendido los
fundamentos de React. Eres impresionante, pero ¿cómo te
vuelves más impresionante al reaccionar? Bueno, estas son solo algunas
sugerencias de mi parte sobre dónde posiblemente puedes ir continuación si quisieras hacer
alguna lectura más, pero con respecto a reaccionar y luego es más intermedio, tipo avanzado de
cosas que creo que debes hacer es echar un
vistazo a algunos otros ganchos. Hay más ganchos
aparte de lo que indica en efecto de uso. Aquí hay una pareja. Use href y use context. Vamos a llegar a los en un
segundo y muchos otros. Así que echa un vistazo a la documentación de
React. Entonces a continuación he
enumerado reaccionan router porque sería
genial para ti saber, entender cómo puedes
trabajar con otras páginas. Por lo que solo construimos una aplicación
de una sola página. ¿ Qué sucede si
tienes otras páginas que necesitas para llegar a agarrar
el sistema rutinario, entonces podrías utilizar
algunos frameworks. Y a continuación, JS es un framework
React muy popular y tiene algunas
características realmente prácticas para simplificar su proceso y
para la optimización
para hacer más de una aplicación React más completa
y optimizar. Otros ganchos usan ref que mencioné, y esta es una gran manera de acceder
a elementos DOM. En este ejemplo, hemos
conseguido uso href aquí. Inicialmente es nulo. Hemos agregado esto a una constante
llamada elemento de entrada. Y en la entrada
misma estamos usando REF para el elemento de entrada. Por lo que este elemento de entrada
es ahora un referenciado. Entonces cuando hacemos clic en
el botón, en el botón, haga clic aquí arriba, esta
es la función. Tenemos entradas elemento punto, la referencia
corriente oscura, enfoque oscuro. Por lo que estamos agregando foco
a este elemento. Hemos accedido a este elemento
DOM con use ref, use context. Entonces como he escrito aquí, se utiliza para crear datos
comunes a los que se puede acceder a lo largo de la jerarquía de
componentes debe destacarse porque eso es lo más importante sin pasar la paroxetina
manualmente a cada nivel. Así que imagina que tienes
niños cinco niveles abajo. Entonces cuando nuestra app, nuestra app, lo siento, tuvimos un padre y dos
hijos en un nivel abajo, pero imagina si hay
más hijos, sus
nietos, bisnietos,
los niveles siguen bajando. No quieres seguir pasando escuela
Prop hasta el final. Me pondré bastante molesto. Puedes usar,
usar contexto o crear contexto, el contexto en el nivel padre. Entonces en este ejemplo
están usando temas,
sistema hey, o
sistema de color para la luz y la oscuridad. Y luego envolverías
la aplicación con este tema, proveedor de contextos
constantes
pasando por tus valores y
luego con el niño. Por lo que esto puede ser cualquier nivel abajo en lugar de
pasar los cultivos todo el camino hacia abajo
dentro del niño, cualquier niño, puedes
usar estos contextos. Recogimos en una
constante llamada tema, y luego solo tienes acceso a ese contexto o fondo. Piensa en primer plano. Este tema se está
accediendo desde el padre. Mencioné el enrutamiento. Echa un vistazo a la
documentación oficial está aquí. El URL es solo una colección de
componentes de navegación que
se pueden utilizar dentro de su aplicación. Así que echa un vistazo a esto
si quieres trabajar con múltiples páginas en
tus frameworks de aplicaciones, he mencionado Next JS. Nuevamente, eche un vistazo a la
eficiente orientación del Dr.. Tiene muchas, muchas
grandes características, representación
estática y del lado del servidor para un buen rendimiento, liado
inteligente, soporte completo de
TypeScript, prefetching
grosero
y el enrutamiento. A particularmente como en el siguiente
y lo hace tan simple. Es casi como un sistema de
arrastrar y soltar en el sentido que tendrías
un directorio para páginas y arrastrarías, las
compararás o páginas en ese directorio y fuente ya sea enraizamiento para
ti más o menos. Sí, agradable y fácil. También viene con la optimización
de imagen y muchas otras características. Así que una vez que tengas la cabeza alrededor reacciona
anual cómodo, x de
próxima gen
valdría la pena echarle un vistazo.
14. Resumen y razones por qué te impresionantes: Bien hecho. Has hecho un trabajo impresionante de conseguir todo el camino a través de
este curso y crear tu propio generador de cotizaciones utilizando las últimas técnicas
que has aprendido. Ciertamente características importantes
de React incluyendo JSX, props, hooks,
administración estatal y pruebas, solo por nombrar algunos. Ser un
desarrollador front-end y tener conocimiento de los fundamentos modernos de
React es un
conjunto tan útil de habilidades para tener sin importar el
nivel en el que estés, ya sea junior, de
nivel medio o senior. React sigue siendo la
biblioteca JavaScript más popular del mundo. Entonces el hecho de que hayas hecho una
aplicación React de una sola página
te pone justo en la parte superior
del espacio de
desarrollador web front-end. Enhorabuena a ti. Ahora puedes tomar
estas habilidades y
usarlas en tu futuro trabajo? Por último, sólo quería decir un agradecimiento masivo por no sólo inscribirse a este curso, sino también por completarlo. Sin tu apoyo,
profesores como yo no serían capaces de
crear contenidos como este. Entonces de verdad, muchas gracias. Si disfrutabas este curso, y realmente espero que
lo hicieras, significaría tanto
para mí si pudieras
tomarte el tiempo para dejar una reseña. Leí cada pedacito de
comentarios que obtengo y tomo a bordo cualquier comentario
que puedas dejar. Para que puedas seguir mejorando
mis clases y seguir haciendo los cursos que
te resulten útiles. Entonces con eso dicho, muchas gracias de nuevo, eres impresionante. Noche ir adelante y código.