Aprende React en 45 Minutos
Summary
TLDREn este vídeo tutorial, aprenderás a desarrollar una aplicación web con React desde cero. Comenzarás instalando las herramientas necesarias y creando tu primer proyecto. A continuación, explorarás conceptos fundamentales como componentes, propiedades, estado y eventos. Construirás una pequeña página web de demostración, implementando una lista de tarjetas que se renderizan automáticamente a partir de datos. Además, aprenderás sobre el enrutado del lado del cliente para simular la navegación entre páginas sin solicitar nuevas páginas al servidor. Al final, tendrás los conocimientos básicos de React para crear interfaces de usuario interactivas y escalables.
Takeaways
- 😄 El video enseña los conceptos básicos de React, como componentes, propiedades, estado y eventos a través de la creación de una pequeña página de demostración.
- 📂 Se explica cómo configurar el entorno de desarrollo con Vite, un reemplazo más rápido de create-react-app.
- ⚛️ Se introduce la creación de componentes reutilizables, sus props (propiedades) y cómo renderizarlos en la aplicación.
- 🔄 Se muestra cómo trabajar con estado y eventos, como un componente que muestra/oculta texto al hacer clic en un botón.
- 📜 Se enseña a renderizar listas de elementos de forma dinámica a partir de un array de datos.
- 🌐 Se explica el enrutado del lado del cliente con React Router para simular cambios de página sin recargar el servidor.
- 🖼️ Se demuestra cómo crear vistas individuales para cada elemento de la lista, pasando datos por props.
- 🔗 Se muestra cómo agregar enlaces de navegación a las vistas individuales utilizando el componente Link de React Router.
- ➕ Se destaca la facilidad de agregar nuevos elementos a la aplicación simplemente modificando el array de datos fuente.
- 🚀 Se enfatiza la importancia de seguir practicando, consultando la documentación y construyendo proyectos para dominar React.
Q & A
¿Qué es React y por qué es importante aprenderlo?
-React es una biblioteca de JavaScript para construir interfaces de usuario (UI). Es importante aprenderla porque facilita la creación de aplicaciones web modernas y escalables, gracias a su enfoque en componentes reutilizables y su rendimiento optimizado.
¿Qué son los componentes en React y por qué son tan relevantes?
-Los componentes son bloques de construcción independientes y reutilizables que encapsulan la lógica y la representación visual de una parte de la interfaz de usuario. Son relevantes porque permiten dividir la aplicación en piezas más pequeñas y manejables, lo que facilita el desarrollo, el mantenimiento y la reutilización del código.
¿Qué son las propiedades (props) en React y cómo se utilizan?
-Las propiedades (props) son datos que se pasan de un componente padre a un componente hijo. Se utilizan para configurar el componente hijo y personalizar su comportamiento y apariencia. Las props permiten que los componentes sean reutilizables y mantenibles.
¿Qué es el estado (state) en React y cómo se gestiona?
-El estado (state) es un objeto que contiene datos que pueden cambiar a lo largo del ciclo de vida de un componente. Se gestiona utilizando hooks (como useState) o clases (en versiones anteriores de React). El estado permite a los componentes ser dinámicos y responder a las interacciones del usuario.
¿Qué es el renderizado condicional y cómo se implementa en React?
-El renderizado condicional es la capacidad de renderizar diferentes elementos o componentes en función de una condición específica. En React, se puede implementar utilizando operadores ternarios, sentencias if/else o lógica booleana dentro del código JSX.
¿Qué es el enrutamiento en React y por qué es importante?
-El enrutamiento en React es el proceso de asignar componentes específicos a diferentes rutas (URLs) de la aplicación web. Es importante porque permite la creación de aplicaciones de una sola página (SPA) y una navegación fluida entre diferentes vistas sin necesidad de recargar por completo la página.
¿Qué es React Router y cómo se utiliza?
-React Router es una biblioteca de enrutamiento popular para React que facilita la gestión de rutas y la navegación en aplicaciones de una sola página. Se utiliza importando componentes específicos, definiendo rutas y asignando componentes a esas rutas.
¿Cómo se manejan los eventos en React?
-Los eventos en React se manejan de manera similar a los eventos en JavaScript, pero con algunas diferencias sintácticas. Se definen como funciones manejadoras de eventos y se pasan como propiedades a los elementos JSX. Los nombres de eventos en React utilizan la convención camelCase, como onClick en lugar de onclick.
¿Qué son los hooks en React y cuáles son algunos de los hooks más utilizados?
-Los hooks son funciones que permiten agregar lógica de estado y ciclo de vida a componentes funcionales en React. Algunos de los hooks más utilizados son useState (para manejar estado), useEffect (para manejar efectos secundarios), useContext (para acceder al contexto) y useRef (para hacer referencia a elementos del DOM).
¿Cómo se pueden aplicar estilos a los componentes en React?
-Existen varias formas de aplicar estilos a los componentes en React, incluyendo hojas de estilo CSS externas, estilos en línea utilizando objetos JavaScript, o bibliotecas de estilos como styled-components o CSS Modules. La elección depende de las preferencias del equipo y los requisitos del proyecto.
Outlines
👨💻 Presentación del curso de React y configuración del entorno
En este párrafo, el instructor presenta el curso de React, mencionando que se cubrirán componentes, propiedades, estado, eventos y más. Indica los requisitos previos de HTML, CSS y JavaScript, y recomienda la plataforma CoderHouse para un aprendizaje más profundo. Luego, procede a configurar el entorno de desarrollo utilizando Vite, creando un nuevo proyecto de React y ejecutándolo.
🗂️ Revisión de la estructura del proyecto de React
El instructor revisa la estructura del proyecto de React creado con Vite. Explica los archivos y carpetas principales, como src, public, package.json, el archivo de configuración de Vite y los componentes principales App.jsx y main.jsx. Además, elimina el código innecesario para comenzar con una página en blanco.
📦 Creación del primer componente reutilizable
En este párrafo, el instructor crea un componente reutilizable llamado 'Card'. Explica cómo definir un componente en React, aplicarle estilos CSS y renderizarlo en la aplicación principal App.jsx. Luego, muestra cómo crear múltiples instancias del componente 'Card' y cómo aplicar un diseño de flexbox para organizar las tarjetas.
📄 Uso de datos externos para renderizar componentes
El instructor simula el uso de datos externos, como una API o una base de datos, importando un array de objetos que representan vehículos. Luego, muestra cómo recorrer este array y renderizar automáticamente un componente 'Card' para cada objeto, pasando las propiedades correspondientes al componente.
🔄 Manejo de estado y eventos en componentes
Se introduce el concepto de estado en React y se crea un componente llamado 'ShowHide' que muestra u oculta un texto en función del estado. Se explica el uso del hook useState y cómo manejar eventos, como clics de botón, para actualizar el estado y provocar cambios en la interfaz de usuario.
⚛️ Renderizado condicional y cambio dinámico de texto
Continuando con el componente 'ShowHide', se demuestra el renderizado condicional y el cambio dinámico de texto en función del estado. Se utiliza un operador ternario para mostrar u ocultar un elemento y se cambia el texto de un botón según el estado actual.
🌐 Enrutamiento en el lado del cliente con React Router
En esta parte, el instructor introduce el enrutamiento en el lado del cliente utilizando la librería React Router. Se configura el enrutador, se definen rutas para cada vehículo y se crean vistas individuales para cada ruta. También se muestra cómo generar rutas dinámicamente a partir de los datos de los vehículos.
🔗 Creación de enlaces de navegación
Se muestra cómo crear enlaces de navegación en el componente 'Card' utilizando el componente Link de React Router. Estos enlaces permiten navegar a las vistas individuales de cada vehículo al hacer clic en el título de la tarjeta correspondiente.
💅 Aplicación de estilos y finalización del proyecto
En el último párrafo, el instructor aplica estilos CSS adicionales a las vistas individuales de los vehículos para mejorar la presentación. Menciona la facilidad de agregar nuevos datos y funcionalidades a la aplicación de React. Finalmente, invita a los estudiantes a seguir practicando, consultar la documentación y construir más proyectos con React.
Mindmap
Highlights
En este vídeo les voy a enseñar las básicas de React, vamos a ver componentes, propiedades, estado, eventos y mucho más.
Para este curso van a necesitar tener conocimientos de HTML, CSS y JavaScript. Si no están familiarizados con estas tecnologías, pueden aprenderlas en estos vídeos.
Lo bueno de este curso es que vamos a ir aprendiendo todos estos temas armando una pequeña página de demostración súper básica, pero es mucho mejor que ver los temas por separado.
Lo primero que vamos a tener que hacer es preparar nuestro entorno de desarrollo usando el comando 'npm create vite'.
Vamos a empezar sin nada, creando una página en blanco, para no abrumarnos al principio.
Un componente básicamente es una función que retorna XML o HTML.
Vamos a crear nuestro propio componente Card y aprovechar la reutilización de componentes en React.
En React, para agregar una clase a un elemento HTML, se utiliza la propiedad 'className'.
Para mostrar una lista de elementos de manera automática, podemos utilizar el método map() del array que contiene los datos.
Los componentes también pueden tener estado interno que puede definir su comportamiento o lo que pueden mostrar.
Vimos cómo manejar el estado y los eventos de clic en un componente, además del renderizado condicional.
Vamos a utilizar el enrutado del lado del cliente con React Router para simular cambios de página sin recargar.
Podemos generar las rutas de manera programática a partir de los datos de los vehículos.
Creamos una vista personalizada para cada vehículo, pasando los datos por propiedad.
Utilizamos el componente Link de React Router para crear enlaces interactivos a las diferentes páginas.
Transcripts
en este vídeo les voy a enseñar las
básicas de react vamos a ver componentes
propiedades estado eventos y mucho más
para este curso van a necesitar tener
conocimientos de html css y javascript
si no están familiarizados con estas
tecnologías pueden aprenderlas en estos
vídeos les dejo los enlaces en la
descripción lo bueno de este curso es
que vamos a ir aprendiendo todos estos
temas Armando una pequeña página de
demostración súper básica pero es mucho
mejor que ver los temas por separado ya
que podemos ir viendo los conceptos paso
a paso a medida que los vamos aplicando
el proyecto Bueno lo primero que vamos a
tener que hacer es preparar nuestro
entorno de desarrollo Así que van a ir a
una carpeta donde tengan todos sus
proyectos Yo acá tengo una que se llama
YouTube que tiene los los proyectitos
quedarme para YouTube y acá van a abrir
la terminal hay varias formas de abrir
una terminal una de ellas es escribiendo
cmd acá en la línea de direcciones una
vez hecho esto vamos a usar este Comando
que aparece en la documentación de bite
que es en ppm create vite y esto de acá
que dice @latest es opcional porque creo
que por defecto te va a instalar la
última versión de vite
y nos va a empezar a hacer algunas
preguntas que vamos a tener que
responder Como por ejemplo el nombre del
proyecto yo lo voy a llamar curso react
sí Uy curso react después acá te
pregunta bueno framework Vanilla es
javascript sin nada View react nosotros
vamos a seleccionar react nos deja
elegir entre
javascriptsw que no sé qué es nosotros
vamos a escribir javascript para
mantenerlo sencillo y ahí está terminó
mucho más rápido que el comando que se
usaba antes que era mpx
que es súper lento incluso ahora la
documentación oficial de react te
recomienda usar otros comandos que
combina react con con otros frameworks
pero no le vamos a dar bola a eso
nosotros vamos a usar simplemente MB y
se acabó bien ahora acá te dice que
corras algunos comandos van a ver que en
la carpeta donde
corrimos la terminal se creó el proyecto
Nosotros llamamos curso reality Así que
lo vamos a encontrar por ese nombre acá
y lo que la terminó te está diciendo que
hagas ahora es que te cambies a ese
directorio con este Comando y después
bueno instales las dependencias y corras
este Comando Así que yo lo que voy a
hacer es cambiarme con c de curso react
y lo vamos a hacer un poco diferente
vamos a correr el visual Studio code con
este Comando code punto y si no le
funciona este Comando lo que pueden
hacer es abrir el visual Studio coaching
yo voy a cerrar esto para mostrarles
Bueno lo que pueden hacer es abrir
visual Studio code y simplemente
arrastrar esta carpeta de esta forma
para abrirla en el visual Studio code
esta terminal No la vamos a necesitar
más así que la cierro acá ya estamos en
nuestro nuestro proyecto no que creamos
con vite y vamos a abrir la terminal con
control tilde o si no encuentran la
tilde o no saben cómo hacerlo pueden ir
a vista y acá les va a permitir abrir la
terminal acá ya estamos en la terminal
de nuestro proyecto Así que vamos a
hacer lo que lo que nos indicó antes
vite que hagamos que desinstalar las
dependencias con mb install y después
vamos a poder correr el proyecto lo que
hacemos a continuación es correr el
comando mpm
y va a borrar nuestro proyecto nos dice
que está en el puerto 51 73 Así que
vamos a abrir el navegador y vamos a ir
a local Host 51 73 otra opción es
simplemente hacer control clic acá y te
lo va a abrir en el navegador Recuerden
que en este vídeo les voy a dar las
básicas de react para que tengan unas
herramientas iniciales pero si quieren
profundizar aún más en los conceptos Les
recomiendo fuertemente que vayan a
inscribirse al curso de react en cover
House en Google House van a disfrutar de
clases en vivo dictadas por profesores
expertos en la industria donde van a
poder sacarse todas las dudas en el
momento y van a tener desafíos semanales
para que puedan ir practicando todo lo
que van aprendiendo semana a semana y no
sólo tienen cursos de programación sino
que también pueden aprovechar los cursos
de diseño USB marketing digital análisis
de datos y muchos más y lo mejor de todo
es que cuando terminas exitosamente un
curso recibes un certificado validado
por coderhouse que puedes poner en tu
perfil de linkedin o compartir en tus
redes sociales Si van a hacer un curso
Les recomiendo que aprovechen la cover
beca que ofrece un 70% de descuento
sobre el valor del curso y se usan Mi
código van a obtener un 15% de descuento
adicional le dejo el link a Google House
en la descripción del video si están un
poco confundidos y se están preguntando
qué es bite que es react básicamente
pueden pensar que react es la librería
que vamos a usar para armar la interfaz
en el y vite es como un alguien que nos
ayuda a crear proyectos react más rápido
y podemos configurar y hacer todas esas
cosas de cómo un ayudante extra no pero
nosotros queremos empezar sin nada Así
que lo que vamos a hacer es Borrar todo
esto y crear una página en blanco así
que vamos acá a nuestro proyecto y vamos
a ver un poco que tienen estas carpetas
source va a contener los archivos el
código Fuente no a este punto de los
puntos ya saben lo que son son archivos
de estilos que ya conocen si es que
saben css Pero estos puntos jsx lo vamos
a ver en un ratito después estos
archivos que tenemos acá si no los
vieron nunca el punto git noir es una
lista de nombres o direcciones que git
revisa para saber cuáles son los
archivos que tiene que ignorar acá de
punto Jason por ahora ignórenlo y el
Packers va a tener nuestros coma algunos
comandos y las dependencias que necesita
el proyecto escritas acá y evite.com.js
para configurar el proyecto viste porque
lo generamos convite no hay dos carpetas
que no vimos que son esta a sets y
public que lo único que tienen es un
react punto svg que es esto de acá punto
svg significa que está hecho un código
no es una imagen jpg ni ni png sino que
está hecha así con código y
que permite eso es que esta imagen no la
puedas agrandar todo lo que quieras y
nunca se va a pixelar lo mismo con este
de acá
vite.sbg que es esto de acá el 20 punto
svg lo vamos a dejar nosotros lo que
vamos a hacer es borrar esta carpeta que
tiene el real punto svg bueno lo vamos a
usar y los dos archivos que nos quedan
ver es el main.js x y el app.jsx la
extensión punto jsx hace referencia a
javascript xml que básicamente te
permite poner etiquetas html adentro de
un archivo javascript pero a mí conocer
estos archivos los podemos generar como
punto jsx y también los podemos usar
como punto javascript y la realidad es
que no cambia mucho en el archivo
main.js x van a ver algunos imports al
principio el importe reaction que
básicamente importa Este objeto de la
librería react
que es otro objeto no importa de acá y
después tenemos
Chrome app que básicamente este archivo
acá es este que viene acá el app.js X lo
estamos importando para mostrarlo no
después tenemos el importe de la hoja de
estilos que se está acá reactdom punto
create Root es un método donde le vas a
pasar como el elemento Sí el elemento
donde querés renderizar tu proyecto no
este Root lo van a encontrar acá en
index.html van a ver que hay un div que
tiene Lady Root Entonces el main.jsx va
a ir a buscar eso ven que dice document
Element después de creator tenemos punto
render una vez que tenemos el elemento
tenemos que decirle que renderizar y va
a renderizar esto de acá no tenemos un
tag que es react punto Street Mode
básicamente lo que va a hacer es
mostrarnos errores en el navegador
cuando nuestro código tenga errores y en
realidad
no que es una etiqueta que se abre y se
cierra sola y representa nuestro
componente
app.js x y acá en a punto jsx tenemos
nuestro primer componente react no se
sienta muy abrumados por esto porque no
lo no le vamos a dar bola por ahora lo
vamos a borrar todo de esta forma vamos
a dejar algunas cosas el bitelo tampoco
lo vamos a usar el u State lo vamos a
ver más adelante Así que también lo saco
este también lo saco y piensan
simplemente que esta es la estructura de
nuestro componente acá tenemos la hoja
de estilos que también estamos
importando pero para que no se sientamos
abrumados lo vamos a Borrar toda y
tenemos estos dos archivos que
representan nuestro componente esto de
acá es como se crea un componente react
para ver que es una función y estuvo muy
confuso Pero dentro de poco lo van a
entender bien estamos importando el css
que no tiene nada así que no hace nada y
después acá tenemos una función que
tiene el nombre en nuestro componente y
retorna esto que parece html lo cual
puede ser medio confuso al principio
pero en realidad Esta sintaxis es
sx que es básicamente lo que dijimos
antes no xml en javascript taxes html
que pueden vivir dentro de tu archivo
javascript y este export es para poder
exportar nuestro nuestra función y que
otras otros archivos javascript como
este main.js x lo puedan importar si
vamos a ir a punto jsx y vamos a agregar
nuestro propio html vamos a empezar con
un h1 hola reacts esto lo van a ver así
porque está aplicando estilos que están
en index.css Así que si quieren podemos
sacar todos a mí me gustan así que los
voy a dejar lo que sí no sé si me gusta
mucho es tener esto acá porque esto me
va a poner los elementos en el centro y
yo quiero poder definir mi propio layout
para las cosas Si lograron seguirme
hasta acá genial ahora van a ver que
trabajar con react es mucho más sencillo
de lo que piensan al principio pudo
haberse sentido medio abrumador por las
cantidades de archivos que tiene el
proyecto cuando están ustedes
acostumbrados a trabajar simplemente con
un html un css y un javascript y acá
tienen un montón de archivos puede ser
un poco abrumadora al principio pero van
a ver que una vez que llegan a este
punto es muy sencillo y lo que vamos a
hacer primero es crear nuestro propio
componente y react es muy bueno para
crear componentes reutilizables vas a ir
acá a source clic derecho nuevo archivo
vamos a crear una carpeta de componentes
Sí para mantener nuestros archivos
organizados si bien por ahora no tenemos
muchos archivos porque es un proyecto
chiquito a la larga siempre es mejor
estar organizados los componentes
empiezan en mayúscula y nosotros vamos a
llamar Card de tarjeta así que
simplemente ponemos
card.js x que es la extensión que
venimos usando para los componentes si
tienen esta extensión de react s7+
lo que pueden hacer es escribir RFC y
les va a crear el componente
automáticamente pero yo lo voy a hacer a
mano en caso de que ustedes no tengan
esa extensión un componente básicamente
es una función dejamos algunos espacios
para los importes y ponemos funsión
nombre del componente Card y simplemente
todo lo demás es una función normal y
acá lo que vamos a hacer es retornar xml
Así que Richard
xml o html y nosotros vamos a retornar
un div
que tiene texto por ahora no solamente
para visualizar el componente y después
lo exportamos
exports porque es lo único que vamos a
exportar
carga de esta forma y Ese es nuestro
componente si lo queremos usar en App o
en otro componente o en donde sea lo
vamos a llamar De esta forma como si
fuese un tag de html que se cierra sola
signo de menor Card Barrita signo de
mayor pero lo que falta acá es
importarlo así que importe Card y acá me
da la opción de hacerlo automáticamente
Así que acepto esa y importar from
componentes cara y ahora si guardamos
van a ver mi componente acá vamos a
hacerlo un poquito más bonito al
componente vamos a crear un dip si vamos
a tener un div
acá vamos a poner los paréntesis porque
una vez que creas una nueva línea tiene
que tener paréntesis de esa forma Vamos
a ponerle un h2 que va a ser el título
de la tarjeta sí título tarjeta y un p
que va a ser la descripción de la
tarjeta tenemos que hacerlo un poco más
lindo porque no tiene ni borde ni nada
así que vamos a crear un archivo css
para este componente Pero antes de eso
vamos a poner algunas clases a este
diplo vamos a poner el Class name acá en
react si quieren agregar una clase a un
elemento html tienen que hacerlo de esta
forma con Class name vamos a llamar
bueno
igual que el componente donde vamos a
referenciar este Class name ahora lo
vamos en un ratito cuando creemos el
archivo punto css card.css
punto Card no me aplicó los estilos
porque tengo que importar el css acá
simplemente con un import punto barra
card.css en este curso no voy a entrar
mucho en detalle en los estilos porque
es un curso de react Así que si quieren
usar los mismos estilos que estoy usando
yo simplemente con bien los de acá y
listo nosotros nos vamos a enfocar en la
parte de react Así que ahí Le agregué
algunos estilos a la tarjeta para que se
vea más o menos presentable y este es
nuestro componente y ahora Para
aprovechar sí que creamos un componente
supongamos que necesitamos varias
tarjetas vamos a poner de esta forma y
se acabó y esto lo que nos permite
también es que cuando tengamos que
cambiar el contenido o cómo se comporta
el componente simplemente lo cambiamos
en un solo lugar de esta forma y se va a
cambiar en todas las referencias para
que nuestra página se vea un poco más
presentable vamos a ir a cada app y
vamos a crear un div y le vamos a poner
flexbox para que nos ordena un poco las
tarjetas estas que están todas pegadas
Vamos a darle un nombre de la clase al
DIF que va a ser container
y vamos a meter todas las tarjetas acá
con alt y flechita para abajo voy
cambiando las líneas de lugar y después
lo voy a tabular para que quede bien
ordenado en estas tarjetas van a estar
adentro de la clase del dip con la clase
container después vamos a ir a app.css
y vamos a apuntar a container
seleccionar container Vamos a darle un
display Flex y la dirección ya está en
horizontal Así que vamos a agregar
espacio entre cada componente con Gap
ten pictures
Ahí estamos tenemos un problema acá y es
que nos está poniendo todos en la misma
línea y Recuerden que nuestra tarjeta
tienen un ancho de 300 píxeles Entonces
esto no debería pasar vamos a hacer un
par de cosas más acá que es por ejemplo
Flex rap para que cuando el tamaño de la
tarjeta supere el tamaño horizontal que
tengo disponible me las coloque abajo
Flex rap
para activar el Flex rap y una cosita
más que es a Line items Center no era
Line admins items la propiedad que está
buscando para poner para que cuando pase
esto las cosas se pongan en el centro
vamos a justify content Center de esta
forma este olardiac también si lo
queremos centrar lo que podemos hacer es
simplemente ir acá a app punto css
apuntar a la clase de esta forma y texto
Line Center Y si queremos ser un poco
más específicos tendríamos que hacer
punto app h1 para apuntar a este
elemento de acá
ahora que tenemos un layout más o menos
definido lo que tendremos que empezar a
usar son propiedades de react Pues la
verdad es que esto así no tiene mucho
sentido porque cada tarjeta en realidad
debería tener su propio título y cada
tarjeta debería tener su propia
descripción entonces las propiedades van
a viajar acá por parámetro cuando vayan
a la definición del componente van a
poner acá props si bien puede llamarse
como ustedes quieran props es la
convención de las propiedades eso es un
objeto que contiene las propiedades
entonces para acceder a las propiedades
lo que vamos a hacer es por ejemplo
vamos a poner llaves Sí Dentro
del xml html Recuerden que acá estamos
en en sintaxis de jsx estamos en html
vamos a abrir y cerrar Ya ves para poner
javascript de vuelta digamos no Entonces
supongamos que yo tengo la propiedad
título y la propiedad descripción para
de ellas tenemos que hacer props punto
título por ejemplo no eso vamos a usar
title porque venimos haciendo las cosas
en inglés y solamente el contenido en
español y acá props punto description de
dónde salen estos title description
estos Titan description se los pasa el
elemento que usa el componente o sea
vamos a app.jsx de vuelta y acá cuando
usamos el componente tenemos que pasarle
title
título o lo que sea contenido sin coma
no son como atributos y descripción
si guardamos van a poder visualizar que
le llegó a este componente Card las
propiedades title y descripción
ven que esto Entonces nos permite en las
otras tarjetas
pasarle a cada una el contenido que le
corresponde una sintaxis más sencilla
una vez que entendieron las propiedades
es simplemente acá como ir desarmando el
objeto pues sabemos que props es un
objeto entonces lo que podemos hacer es
aprovechar la sintaxis de javascript y
recibir el objeto de esta forma en este
caso title y descripción incluso acá les
podemos poner un valor por defecto de
esta forma título por defecto
y descripción por defecto y acá en vez
de hacer pros punto title simplemente
accedemos de esta forma porque los
recibimos por parámetro de manera
desacoplada si guardamos van a ver que
las tarjetas que no reciben ninguna
propiedad que son la tercera y la cuarta
van a aplicar estos valores y las otras
tarjetas van a seguir aplicando las
propiedades que nosotros le pasamos
Supongo que nosotros tenemos una lista
de cosas una lista de 100 elementos que
queremos mostrar en la página web no es
muy raro tener esa cantidad de elementos
e incluso más así que por lo general
vamos a tener los datos de los elementos
en otro archivo nosotros vamos a querer
importar en nuestro componente o en
nuestra vista o en lo que sea y sería
muy incómodo tener que hacer a mano
tener que poner
así a mano cada vez que haremos nuevos
elementos Entonces vamos a simular que
tenemos datos vamos a hacer una carpeta
de llamada Data y vamos a ponerle
vicos punto js
este vigo es punto js lo que va a hacer
es exportar una red Sí con datos de
vehículos que tengo armado acá
básicamente lo que viene acá es una Rey
donde cada elemento es un objeto y
representa un vehículo tiene nombre
descripción y una imagen y esta
estructura siempre se mantiene en cada
uno de los objetos se van a ver que al
ser consistente de esta forma podemos
importar este Rey en nuestro componente
y mostrarlo de manera más automática lo
vamos a borrar todo esto lo voy a
mostrar cómo hacemos para mostrar una
lista de manera más automática sin
importar la cantidad de elementos que
tenga la lista lo primero que vamos a
hacer es importar el array acá arriba es
importe
bueno merece solo from.data barrabbicos
ahí tenemos este Arley acá y lo que
vamos a hacer es crear una especie de
lista Sí con list
va a ser igual a y ahora vamos a
recorrer nuestro rey bicos
punto Maple
creamos la función anónima y esto
queremos que retorne xml cada vehículo
va a ser representado por una tarjeta
entonces vamos a retornar una tarjeta
por cada vehículo
y acá le vamos a pasar lo que es en el
título le vamos a pasar el nombre y en
la descripción la descripción entonces
title va a ser igual a b y acá Recuerden
que tenemos que usar las llaves cada vez
que queremos usar javascript dentro de
xml B punto name y en descripción va a
ser igual a b punto descripción Entonces
por cada uno de estos elementos vamos a
devolver una tarjeta Como que cada cada
va a estar armado y acá abajo que es
nuestro componente simplemente podemos
hacer
llaves Beat list y listo van a ver todas
nuestras tarjetas renderizadas en la
vista
esto es muy bueno Porque no tenemos que
Modificar el código que tiene la lógica
que muestra las tarjetas y simplemente
podemos cambiar los datos y el
comportamiento
de la vista se va a cambiar
automáticamente Por ejemplo si quiero
sacar Este chip de acá lo borro de los
datos guardo y no lo vemos más si
queremos agregar uno nuevo lo agregamos
y lo vemos Así pueden pensar incluso que
este array que importamos acá son los
datos que vienen de la Api y de la base
de datos entonces sin importar Cuántos
elementos te vengan este código de acá
lo que va a hacer es renderizartelos
todos tengas tres tarjetas 20 tarjetas o
incluso cientos de tarjetas Obviamente
que tenés muchos elementos puede ser muy
lento por supuesto pero lo va a hacer
los componentes también pueden tener
estado interno que puede definir su
comportamiento o lo que pueden mostrar
para demostrar esto vamos a crear un
componente nuevo que se va a llamar show
hide porque va a ser un componente
sencillo pero nos va a servir bastante
para explicar algunos conceptos de react
lo vamos a generarlo automáticamente con
el con el atajo rfc show y por ahora lo
que vamos a hacer es simplemente
afuera del retorno del xml vamos a ver
algo nuevo que es un Hook de react
Entonces quiero presten atención acá
vamos a declarar sí const Y acá vamos a
declarar una variable de estado que
guarda el estado del componente este
componente piensen que lo que va a hacer
es un botón que va a mostrar y ocultar
algo en nuestro caso un texto para
mantenerlo simple entonces lo que vamos
a guardar en el estado es Si queremos
que esté mostrado o ocultado Entonces el
estado se va a llamar show
y acá también necesitamos pasarle el
nombre de la función que va a cambiar el
comportamiento de esto
igual use State y ahí usted le tenemos
que pasar el valor por defecto que va a
tener esta variable show que va a ser
true por defecto simplemente tienen que
pensar que you State te va a devolver
una Rey con dos elementos donde el
primero es la variable donde se guarda
el estado y el segundo elemento es la
función que te permite cambiar el valor
de esta de esta variable y lo
interesante de tener estado Así es que
en base al valor de show podemos decidir
si Mostrar o ocultar algunas cosas
Entonces voy a poner un h2 acá que vamos
a mostrarlo ocultarlo en base al valor
de la variable show entonces acá voy a
poner un texto en este caso va a ser
hide me que significa ocultame
y lo voy a mostrar ocultar en base al
valor de esto y para eso voy a
envolverlo dentro de llaves porque
quiero que se comporte en base a
javascript y lo que voy a hacer es
cuando yo es verdadero Mostrar Esto
entonces lo que podemos hacer para que
sea sencillo no es hacer un ternario de
esta forma
sí show es verdadero me va a mostrar
esto y si no me ha de volver un String
sí Para probarlo guardamos
si importamos este componente Joe hyde
acá en nuestra vista van a ver
el comportamiento van a ver que ahora no
se ve y si esto es verdadero ahí se ve y
otra forma más breve de hacer esto es
simplemente sacar la parte del falso y
en vez de hacer un ternario poner un
operador ant acá por qué esto funciona
ven que si está en true y está en Force
lo oculta esto funciona Porque show es
el valor que va a cambiar va a ser
verdadero o falso y hited me este
elemento xml o html siempre va a ser
verdadero Entonces hidemy se va a
mostrar cuando show sea verdadero porque
los dos son verdaderos pero cuando yo es
falso Heidi no se va a mostrar porque
está esta cosa de acá evalúa falso lo
que podemos hacer para que sea incluso
más interactivo y no tengamos que
cambiar el valor de show a mano es poner
un botón acá
Y acá es donde vamos a estar eventos no
el botón lo que va a hacer es cuando
nosotros lo clicamos va a cambiar el
valor de show como hacemos eso primero
Vamos a ponerle un poco de texto al
botón así lo vemos lo vemos bien hide
text va a ser el texto el botón y acá
vamos a hacer un clic de esta forma y lo
vamos a pasar el nombre de una función
que todavía no creamos Pero vamos a
crear en breve por lo general se llama
handle click pero ustedes le pueden
poner el nombre que quieran handle clic
lo vamos a crear acá arriba de esta
forma con handle click es una función
esto por lo general va a recibir un
evento pero si no lo usan esto lo pueden
dejar en blanco
Pero yo lo voy a poner acá evento y Esto
va a ser una función que lo que va a
hacer es usar esta otra función de acá
para cambiar el valor de la variable
show set show no que nosotros queremos
hacer es si yo es verdadero a cambiarlo
a falso y si yo es falso cambiar la
verdadero y eso se logra muy fácilmente
simplemente pasándole a set show el
valor contrario de show porque es un
booleano entonces este botón lo que va a
hacer es Llamar a esta función que
cambia el valor de show por defecto por
defecto Recuerden que era verdadero cada
vez que yo clique este botón va a
cambiar el valor de show de verdadero a
falso y de falso o verdadero que a su
vez va a ocultar este texto Mira
el botón de arriba abajo lo que podemos
hacer es poner el botón antes del texto
otra cosa interesante de hacer es que
cuando el texto
está lo podemos ver tiene sentido que el
botón diga hitex Porque es ocultar texto
pero cuando el texto ya está ocultado el
botón no tiene mucho sentido que siga
diciendo hitex entonces podemos cambiar
el texto de este botón programáticamente
con algo que ya vimos que es un ternario
en base al valor de show envolvemos High
text en llaves y acá adelante vamos a
preguntar el valor de show nuevamente en
base a eso sí cuando show es verdadero
es porque el texto está entonces hitex
es el texto que corresponde pero cuando
yo es falso no hay texto entonces
tendríamos que Mostrar Show
incluso lo que podemos hacer es sacar
este espacio text para afuera y dejar
que cambie solamente
hide y Show
guardamos esto van a ver cómo cambia el
texto del botón en base a si se está
mostrando o no el título
y con este componente de acá vimos
estado vimos eventos de clic estos
eventos pueden ser cualquier otra cosa
que se les ocurra no Por lo general se
trabaja un click al principio y también
vimos renderizado condicional vamos a
ocultar este componente porque ya
mostramos ya lo usamos para aprender los
conceptos y el último tema que vamos a
ver en este curso es enrutado
nosotros vamos a hacer enrutado del lado
del cliente que significa eso que cuando
cambiamos de página vamos a simular que
estamos cambiando de página y no y no
vamos a pedirle una nueva página al
servidor cada vez que tengamos que
cambiar de página esto permite que las
variables que se crean en javascript
mantengan sus valores y así podemos
mantener estado otra ventaja que tiene
es que es mucho más rápido que pedir una
página nueva al servidor cada vez que
tengamos que cambiar de página vamos a
lograr esto con el framework react
router vamos a ir a la consola del
proyecto vamos a frenar un ratito
nuestro proyecto y vamos a instalar una
librería llamada react router dom de
esta forma hoy me equivoqué con el
comando
esperamos a que se instale y listo
tenemos nuestra nuestro enrutador acá
instalado lo podemos ver en Backstage
Jason la dependencia y seguro si abrimos
la carpeta los bollos también va a estar
entonces lo que vamos a hacer a
continuación es ir a nuestro Main punto
jsx y acá vamos a definir nuestras rutas
acá vamos a tener que importar un par de
cosas de react entre ellas create
browser router y
router Provider
si quieren saber más sobre router down
Recuerden que siempre pueden checar la
documentación yo estoy siguiendo Este
ejemplo de acá que está en feature
overview hacemos const router de esta
forma va a ser igual a create browser
router y acá lo vamos a tener que pasar
una Rey con las rutas y cada ruta va a
ser un objeto que va a tener un una
dirección si paz que va a ser un String
al path Recuerden que el paz por defecto
es una Barrita Así que este va a ser
nuestro paz por defecto y un elemento no
que puede ser un elemento jsx entonces
Element acá vamos a pasarle la app de
esta forma entonces ahí tenemos Nuestra
primer ruta y después vamos a poner otra
ruta cuando tengamos otros elementos que
nos permite hacer esto sacar esta app de
acá y poner el elemento router Provider
que lo importamos acá de esta forma
router Provider lo cerramos y le tenemos
que pasar la ruta raw router va a ser
igual a router lo que creamos arriba
para mostrar el comportamiento si
nosotros si guardamos esto no va a
cambiar mucho nuestra página web si todo
funciona bien van a ver que el pad
principal que es este va a seguir
mostrando nuestro componente app Bueno
ahora no está corriendo tenemos que
volver a correr la aplicación con mpm
te va a correr El Comando vite y nos va
a cobrarla nuevamente en 51 73 y vemos
que en el pack principal tenemos nuestra
nuestra app lo que me interesa hacer a
mí en esta aplicación es por cada uno de
estos vehículos crear una página web no
una página aparte por ejemplo podríamos
hacer no Paz
car no de auto y el elemento podría ser
no sé acá incluso podemos directamente
programar acá voy a hacer un tip que
diga Card page para demostrar no el
comportamiento del enrutador y cuando yo
escribo acá barra Card o barra Card no
importa mucho la mayúscula minúscula no
vamos a ir a la nueva página que creamos
que es esta acá pero como dije antes
nosotros no sabemos Cuántos elementos
tenemos Entonces sería muy interesante
poder generar estos de manera
programática con el array que se exporta
acá entonces parecido a lo que hicimos
en App de generar una lista así lo
podemos hacer con las rutas entonces
volvemos a nuestro main. José jsx y acá
vamos a importar nuevamente sí nuestros
vehículos entonces
imports velt y lo vamos a recorrer acá
para ir creando las rutas este array que
tenemos acá lo vamos a tener que sacar
de acá y una vez que recorramos estos
vehículos vamos agregando una por una
las rutas Entonces vamos a sacar esto de
acá sí vamos a crear
un array de rutas en routes va a ser que
el primer elemento que va a tener va a
ser el por defecto que es este de acá
el path es el principal y el elemento es
app esto ya lo podemos sacar y acá le
vamos a pasar
y acá en el medio lo que vamos a hacer
es ir agregando en estas rutas los
diferentes vehículos Entonces por cada
vehículo vamos a crear una ruta para eso
vamos a recorrer los vehículos punto
Ford each B por cada vehículo acá para
que se entienda mejor podemos poner
disco y después acá vamos a agregar
routes punto Push vamos a crear un
elemento para tener como Paz el nombre
del vehículo entonces vehículo name y
por ahora el elemento como no tenemos la
vista de la página creada va a ser
simplemente un DIF que muestre el nombre
de esta forma
entonces ahí creamos por cada vehículo
una ruta donde el camino el Paz es el
nombre del vehículo van a ver que
nosotros tenemos
un Kart un motor
tenemos creadas cada una de esas páginas
acá en el
main.jsx Entonces si vamos a nuestra
línea de direcciones ponemos barra Card
vamos a ver la página del car
barra Bicycle tenemos la página del
baysical y así con las demás para crear
una página más interesante tendríamos
que crear el componente Entonces vamos a
ir acá a source vamos a crear la página
para cada uno de nuestros vehículos
vamos a pasarle por propiedad los datos
Y lo único que va a cambiar es el
contenido
como si fuese una página de producto
donde lo único que cambia es la
información entonces source new file lo
hago afuera de la carpeta de componentes
por eso ya no es un componente sino que
es una página entera una vista entonces
voy a crear una carpeta llamada views de
esta forma barra bico
pues vamos a mostrar un vehículo
jsx después si necesitamos css lo vamos
a agregar pero por ahora con esto
estamos bien Vamos a crear el real
funcionar export component y acá por
propiedad vamos a recibir el vehículo
entero y lo que vamos a mostrar es un h1
con el nombre del vehículo Víctor punto
name Recuerden que este objeto es el que
te manda este a Rey así que tenemos que
acceder a estas propiedades
Vico el punto name vamos a hacer un h2
con la descripción
vehículo descripción y finalmente vamos
a poner un elemento imagen para
renderizar la imagen donde el source es
punto
y el alt va a ser por ejemplo
name más email por ejemplo y esto nos
armaría el texto car y mesh
Motors etcétera no entonces dependiendo
del vehículo va a cambiar el texto de
alt también lo único que nos queda hacer
es volver a main.js x y acá en vez de
mandar Este dip vamos a importar esta
nueva vista que nos creamos Así que
borramos esto y
View me va a importar automáticamente y
nos faltaría pasarle el vehículo acá
bitcol igual a bitcoin ahora cada vez
que nos vayamos a por ejemplo acá nos va
a mostrar la vista a modo motor cycle no
muestra la vista de morseico lo único
que cambia es el contenido es la misma
vista Pero por propiedad estamos pasando
el vehículo lo que nos quedaría hacer
para que sea más interactiva la página
es no tener que escribir manualmente la
dirección que quiero ir porque nadie
hace eso y crear los links acá en
tarjetas yo las voy a crear sencillo acá
voy a ir a ver mi componente Card y
usando otro elemento de la librería voy
a hacer que cada título sea un link a la
página correspondiente entonces lo que
tenemos que hacer es importar el
componente link también de router como
me sugirió acá y voy a envolver este
title en un link entonces link de esta
forma cortamos este pedacito y lo
ponemos acá al final y al link le
tenemos que pasar la ruta no pero con el
atributo tú Nosotros queremos ir a
barrancar Barra more cycle
que por suerte lo tenemos acá en el
título porque Recuerden que a la tarjeta
le estamos pasando el nombre del
vehículo no
tu title Obviamente que esto está medio
mal en realidad porque esta propiedad
titter representa el título de la
tarjeta y no siempre el título de tu
tarjeta va a ser igual a la ruta a la
cual quieres ir pero para este tutorial
lo vamos a hacer así solamente tengan en
cuenta que tienen que tener cuidado con
estas cosas lo ideal sería que cada
vehículo también tenga acá otra
propiedad que sea la dirección no y acá
por ejemplo tendría que hacer esto o
cualquier otra dirección que sea y eso
sería lo que le tendríamos que pasar al
link pero para este tutorial Bueno vamos
a dejar así ven que acá cambio a link
cada uno de los de los de los títulos de
las tarjetas y creo que vamos en ella
nos va a llevar a la página
correspondiente vamos a ir a las vistas
a la vista nuevamente
y vamos a poner un poco de estilos Así
que vamos a crear el
12ss y lo que nos interesaría hacer es
agarrar el contenedor principal que es
este que lo vamos a poner una clase
respetando lo que venimos haciendo hasta
ahora vamos a llamarla igual que el
componente
vamos a seleccionar esta clase en el
view.css
y vamos a darle un ancho máximo de 90
por ciento margin auto para que esté
centrado y vamos a centrar el texto con
texto Line Center también nos interesa
hacer que
la imagen
tenga sea display block para que se
comporte de manera predecible y el ancho
máximo sea del 100% del contenedor y nos
faltaría importar este css acá en el
componente con import comillas punto
barra
View punto css
y ahí se vuelve mucho más presentable
volvemos a la Home
y podemos ver cada uno de los
vehículos de manera muy sencilla bueno
esta imagen es bastante pesada Así que
tarda en cargármela entonces con este
ejemplo sencillo siento que podemos ver
la potencia que tiene react para armar
interfaces de usuario porque por ejemplo
si quiero Agregar un nuevo vehículo a
cada una nueva página es tan sencillo
como agregarlo en la base de datos sin
que en mi caso sería este array de acá
acá agregue un space chip lo guardo y
simplemente aparece acá y ya está todo
armado se entiende entonces así Podemos
agregar fácilmente todos los que
queramos sin tener que tocar el código
Fuente del Front Incluso si bien acá
viejos.js es parte del código fuente
nosotros podemos sacar estos datos de
una Api y una base de datos y react nos
lo va a mostrar bien automáticamente si
es que hicimos bien las cosas en el
Front y con el componente Joe hyde
también vimos lo fácil que es agregar
interactividad en la página a través de
estado combinando todo esto que ofrece
react con todos buenos estilos de css
podemos tener una página muy buena
en muy pocos pasos que se puede expandir
incluso con mucha facilidad Hay cambio
unos estilos para que no quede tan
básico y voy a subir Este ejemplo a
github le dejo el link en la descripción
para que se lo clonen si es que Sienten
que les sirve este ejemplo como
inicio en reactor bueno con eso deberían
tener las básicas de react Así que sigan
practicando sigan Armando proyectos
chequen la documentación de react y de
reactter y van a llegar muy lejos nos
vemos
5.0 / 5 (0 votes)