Aprende React en 45 Minutos

Summary

This 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

00:00

📚 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.

05:00

🔧 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.

10:01

🏗️ 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.

15:02

🎨 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.

20:02

📋 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.

25:02

⚙️ 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.

30:04

🔀 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.

35:05

🚀 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.

40:07

🔗 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.

Keywords

💡React

React is a popular JavaScript library for building user interfaces, particularly single-page applications where you need a fast, interactive user experience. In the script, React is the central technology being taught, with the video tutorial covering fundamental concepts like components, props, state, and events. These are the building blocks for creating dynamic web applications, illustrating React's role in modern web development by allowing developers to build complex UIs from encapsulated pieces of code called components.

💡Component

A component in React is a reusable piece of the UI. It can be thought of as a JavaScript function or class that returns a React element (usually defined in JSX). Components can be simple and display static content, or complex and maintain their own state. The video script discusses creating, importing, and using components to build a demo page, showing how components are the building blocks of React applications.

💡Props

Props, short for properties, are a way of passing data from parent to child components in React. They are read-only, making them useful for configuring components with specific data. The script describes using props to customize components like cards with different titles and descriptions, demonstrating how props enable component reuse and customization without repeating code.

💡State

State in React refers to a set of data that determines the behavior of a component at a given point in time. Unlike props, state is mutable and can change over time, often in response to user actions. The script explains using the useState hook to manage state within components, such as showing or hiding elements based on user interaction, illustrating state's role in creating interactive and dynamic user interfaces.

💡Events

Events in React are actions that can be triggered by users or the system, such as clicks, mouse movements, or keyboard inputs. React allows developers to handle these events with event handlers, functions that execute in response to an event. The script shows adding click events to buttons to demonstrate changing component states, showcasing how React makes interactive UI development straightforward.

💡JSX

JSX is a syntax extension for JavaScript that looks similar to HTML. It allows developers to write HTML structures in the same file as JavaScript code, making the structure of component UIs more readable and expressive. The script mentions JSX when discussing creating components, highlighting how JSX simplifies defining the UI structure within React components.

💡vite

Vite is a modern frontend build tool that significantly improves the development experience by offering fast cold starts and updates. The script includes instructions for setting up a development environment using Vite, illustrating its role in creating a React project quickly and efficiently.

💡Hooks

Hooks are functions that let you hook into React state and lifecycle features from function components. They provide a way to use stateful logic and share it between components without changing the component hierarchy. The video script discusses the useState hook, a fundamental hook for managing state in functional components, demonstrating how hooks extend the functionality of React components without complex class syntax.

💡npm (Node Package Manager)

npm is a package manager for JavaScript, used to install, share, and manage dependencies in projects. In the script, npm is used to create a new React project using the Vite tool, illustrating how npm facilitates the management of project dependencies and the setup of development environments in modern web development.

💡Router

Router refers to a tool or library used in web development for navigating between pages or views within a single-page application (SPA) without refreshing the page. The script introduces React Router, demonstrating how to use it for client-side routing in React applications. This enables the creation of navigable, bookmarkable URLs that improve user experience and the overall structure of SPAs.

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