Cómo dividir tu clon de Airbnb en componentes React

Vas a construir un clon de Airbnb con React partiendo de una vista en HTML, aprendiendo componentes, props, estado y eventos mientras armas algo real. Este proyecto está pensado para quienes quieren dominar los fundamentos de React construyendo, no memorizando.

La propuesta es sencilla y potente a la vez: no se trata de copiar Airbnb por completo, sino de usar ese tipo de producto como excusa para aprender. El resultado se llama Platzi Host, una home con propiedades, búsqueda, filtros y componentes reutilizables.

Qué vas a construir en este curso de React

El objetivo es transformar una vista estática en HTML en una aplicación funcional en React, separándola parte por parte. Empezarás con una interfaz que ya existe y aprenderás a descomponerla en piezas que React pueda manejar.

Durante la mayor parte del recorrido vas a trabajar con JavaScript, y esto no es casualidad. Trabajar primero con JavaScript te permite concentrarte en los conceptos que realmente importan sin la carga extra de tipado. Esos fundamentos son:

• Componentes y props.
• Estado y eventos.
• Listas y renderizado condicional.
• Efectos.

Cerca del final harás una actualización del proyecto para migrarlo a TypeScript y entender qué beneficios trae ese cambio. Así terminas con una base sólida y una primera versión funcional del clon.

¿Por qué aprender React con un proyecto en lugar de teoría suelta? Porque construir un clon estilo Airbnb te obliga a aplicar componentes, props y estado en un contexto real. Aprendes resolviendo problemas concretos, no memorizando definiciones aisladas.

Cómo separar la vista de Airbnb en componentes de React

Antes de escribir una sola línea de React, necesitas un plan claro de cómo transformar el HTML. Y aquí viene lo interesante: todo empieza por decidir cómo dividir la interfaz en piezas reutilizables.

La vista principal de Platzi Host se organiza en tres componentes principales:

1. El header, que es toda la barra superior de navegación.
2. El hero section, la sección destacada bajo el encabezado.
3. El listado de propiedades, donde se muestran los alojamientos disponibles.

Dentro de cada uno de estos bloques pueden vivir muchos más componentes anidados, pero estos tres son la columna vertebral para que entiendas cómo funciona React. Pensar en componentes desde el inicio es la mentalidad que diferencia a quien domina la herramienta.

¿Qué es un componente en React? Es una pieza reutilizable de interfaz que agrupa su propia estructura y lógica. Por ejemplo, un header o una tarjeta de propiedad se convierten en componentes que puedes reusar en distintas partes de la app.

Qué necesitas saber antes de empezar con React

Este curso asume que ya manejas ciertos conceptos base. Si HTML es un término nuevo para ti, la recomendación es clara: toma primero el curso gratis de programación básica antes de continuar.

Para avanzar con soltura conviene tener a mano dos recursos que encontrarás disponibles:

• El curso de programación básica, ideal si necesitas reforzar HTML.
• El curso de fundamentos de JavaScript, para actualizar conceptos clave.

También tendrás acceso al repo del curso, organizado de una forma muy práctica: cada clase vive en una rama distinta. En este caso, el HTML inicial lo encuentras en la rama clase uno, lo que te permite seguir el progreso paso a paso sin perderte.

¿Cómo sigo el código de cada clase? Cada lección tiene su propia rama en el repositorio. Solo cambias a la rama correspondiente, por ejemplo clase uno, y ves exactamente el estado del proyecto en ese punto.

En la siguiente clase darás el primer paso técnico: crear el proyecto desde cero. Cuéntame en los comentarios qué parte de Airbnb te gustaría convertir en tu propio componente.