Aprende React en 45 Minutos
Summary
TLDRThis comprehensive video tutorial guides viewers through the fundamentals of React, a popular JavaScript library for building user interfaces. It covers key concepts like components, properties, state, events, and routing. The instructor creates a small demo page while explaining each concept step-by-step, enabling viewers to follow along and learn by building. With practical examples and clear explanations, this video serves as an excellent introduction for those new to React, equipping them with the essential skills to kickstart their journey in building dynamic and interactive web applications.
Takeaways
- 💻 Setting up a React development environment involves creating a new project using Vite for better performance and efficiency.
- 📚 Prerequisites for learning React include a basic understanding of HTML, CSS, and JavaScript, with resources available for beginners.
- 📱 React components, properties, state, and events are fundamental concepts that enable dynamic and interactive web development.
- 🎥 Demonstrating React concepts through building a simple demo page offers a practical approach to learning by applying concepts step by step.
- 🔨 The create-react-app command, once common for starting new React projects, has been superseded by faster alternatives like Vite.
- 🔧 Understanding file structure and configuration files is crucial for managing React projects and customizing the development environment.
- 💎 React's JSX syntax allows embedding HTML within JavaScript, enhancing the developer's ability to create dynamic user interfaces.
- 👥 Prop handling in React components facilitates the passing of data and functions between components, promoting reusable and maintainable code.
- 📈 React Router enhances single-page applications by enabling client-side routing, allowing for efficient page transitions without reloading.
- 📲 React's useState hook and event handling mechanisms offer powerful ways to manage state and build interactive applications.
Q & A
What is the purpose of this video?
-The purpose of this video is to teach the basics of React, including components, properties, state, events, and more. The instructor aims to provide an initial understanding of React by building a small demonstration page.
What prerequisites are required for this React course?
-The video mentions that to follow this course, you need to have knowledge of HTML, CSS, and JavaScript. If you are not familiar with these technologies, the instructor provides links to videos where you can learn them.
What is the recommended way to set up the development environment for a React project?
-The video recommends using the Vite command `npm create vite@latest` to create a new React project. This command is faster than the previously used `npx` command, and it guides you through the process of setting up the project.
How are components created in React?
-In React, components are typically created as JavaScript functions that return JSX (a syntax extension that allows embedding HTML-like code in JavaScript). Components start with a capital letter, and they can be exported and imported into other files.
What is the purpose of props in React components?
-Props (short for properties) are used to pass data from a parent component to a child component. They allow components to be reusable by accepting different data values as input.
How can you render a list of items in React?
-To render a list of items in React, you can use the `.map()` method to iterate over an array of data and render a component for each item. The video demonstrates how to map over an array of vehicle data to render a list of Card components.
What is the role of state in React components?
-State in React components is used to manage internal data that can change over time. The video introduces the `useState` hook, which allows components to have their own state and update it, causing a re-render of the component with the new state.
How can you handle events in React components?
-In React, you can handle events by defining event handler functions and passing them as props to the corresponding elements. The video demonstrates how to handle a click event on a button to toggle the state of a component.
What is client-side routing in React, and why is it useful?
-Client-side routing in React allows you to simulate page changes without requesting a new page from the server each time. This maintains the state of JavaScript variables and provides a faster experience compared to server-side routing. The video introduces the react-router-dom library for implementing client-side routing.
How can you create dynamic routes in React based on data?
-The video demonstrates how to create dynamic routes in React by iterating over an array of data (in this case, vehicles) and programmatically generating routes for each item. Each route corresponds to a specific component or view that displays the data for that item.
Outlines
📚 Introduction to React Basics
This segment introduces the React framework, emphasizing the necessity of HTML, CSS, and JavaScript knowledge as prerequisites. The instructor plans to use a simple demo page to teach React concepts such as components, props, state, and events. Viewers are guided through setting up their development environment using the 'create vite' command and selecting React as their framework. The video also covers installing dependencies and launching the project in a browser, establishing the foundation for a React-based project.
🔧 Setting Up and Exploring React Structure
The instructor dives deeper into the structure of a React project, explaining the significance of various files and folders such as 'src', '.jsx', '.gitignore', and 'package.json'. The focus shifts to creating a basic React component by demonstrating the removal of unnecessary parts from the default template and explaining JSX, the syntax for embedding HTML within JavaScript. This setup lays the groundwork for building more complex components and introduces CSS integration into React.
🏗️ Creating and Using React Components
In this part, the viewer learns how to create reusable React components. The instructor demonstrates this by developing a 'Card' component, illustrating how to pass props and structure components efficiently. The section reinforces understanding of JSX and React's modular nature, showing how to import and use components within other parts of the application. Additionally, the instructor introduces basic CSS styling to improve the component's appearance.
🎨 Styling and Flexbox in React
The instructor focuses on CSS styling within React, particularly using Flexbox to layout components. By adjusting properties like 'display', 'flex-wrap', and 'justify-content', the video shows how to control the spacing and alignment of components. This segment is pivotal for understanding how to apply CSS styles to React components to create visually appealing and responsive designs.
📋 Handling Lists and Data in React
This part of the video addresses managing dynamic lists in React. The instructor demonstrates how to render lists by mapping over an array of data, a common pattern for displaying dynamic content. The concept of key props in lists for performance optimization is also touched upon. Additionally, this section explains how to handle external data, such as from an API, making the application dynamic and interactive.
⚙️ Introduction to React State and Events
The video introduces the concept of state in React using the 'useState' hook, showcasing how to build interactive components. A 'ShowHide' component is developed to demonstrate toggling visibility based on user interaction, illustrating how state influences rendering and behavior. The tutorial covers event handling in React, such as click events, showcasing the dynamic capabilities of React components.
🔀 Introduction to Client-Side Routing in React
This segment introduces client-side routing using 'react-router-dom', which allows for navigation between different components without reloading the page. The instructor explains setting up routes and navigating between pages, maintaining the application state. This concept is crucial for building single-page applications (SPAs) that offer a seamless user experience.
🚀 Advanced Routing and Dynamic Pages in React
Building on previous routing concepts, the instructor demonstrates how to create dynamic routes for individual items from data arrays, such as products or articles. This approach enables the generation of unique pages based on item specifics, enhancing the application's interactivity and functionality. This part is essential for understanding how to manage larger sets of data and individual detail pages in React applications.
🔗 Linking Components and Finishing Touches
The final part focuses on linking different components using React Router's 'Link' component, allowing users to navigate through the application without manual URL entry. This section also touches upon the importance of CSS for styling individual pages and enhancing the overall user experience. The instructor concludes by highlighting the ease of expanding the application by adding new items to the data array, showcasing the scalable nature of React applications.
Mindmap
Keywords
💡React
💡Component
💡Props
💡State
💡Events
💡JSX
💡vite
💡Hooks
💡npm (Node Package Manager)
💡Router
Highlights
In this video, I'll teach you the basics of React. We'll cover components, properties, state, events, and much more.
To start this course, you'll need knowledge of HTML, CSS, and JavaScript. If you're not familiar with these technologies, you can learn them from these videos.
The good thing about this course is that we'll be learning all these topics by building a small demo page, which is much better than seeing the topics separately.
We'll start by setting up our development environment using the 'npm create vite' command, which is faster than the old 'create-react-app' command.
We'll create our first React component, which is a reusable building block for our user interface.
We'll learn how to pass data to components using props (properties).
We'll dynamically render a list of components using the .map() function and data from an array.
We'll introduce state, which allows components to manage their own internal data and update the UI accordingly.
We'll learn how to handle events in React, such as clicking a button, and update the component's state based on user interactions.
We'll explore conditional rendering, which allows us to show or hide elements based on certain conditions.
We'll implement client-side routing using the React Router library, allowing us to create multiple views and navigate between them without refreshing the page.
We'll generate routes programmatically based on data from an array, demonstrating the power and flexibility of React.
We'll create individual pages for each vehicle, passing data through props and rendering dynamic content.
We'll add navigation links to our components, enabling users to navigate between pages without manually entering URLs.
The instructor emphasizes the power of React in building user interfaces, allowing for easy addition and modification of components and data without modifying the source code.
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
Voir Plus de Vidéos Connexes
React tutorial for beginners ⚛️
Every React Concept Explained in 12 Minutes
Routing | Mastering React: An In-Depth Zero to Hero Video Series
How To Master React In 2024 (Complete Roadmap)
Learn TypeScript For React in 50 Minutes - React TypeScript Beginner Crash Course
Demo Khóa Học React Hook - Những Kiến Thức Về React.JS Cho Beginners
5.0 / 5 (0 votes)