CodeAventura
React
▸Descubriendo React▸Tu primera aplicación React

Misión

// Crea tu tarjeta de presentación
// Añade un h1 con tu nombre y párrafos con info sobre ti

export default function App() {
  return (
    <div>
      {/* Tu contenido aquí */}
    </div>
  );
}

●localhost:5173
02 / 21Tu primera aplicación React
Anterior

Tu primera aplicación React

¿Cómo funciona una app React por dentro?

Antes de construir cosas increíbles, necesitas entender la estructura básica. No te preocupes — es más simple de lo que parece.

Una aplicación React tiene tres piezas fundamentales:

  1. Un archivo HTML con un <div id="root"> — el contenedor donde React "vivirá"
  2. Un archivo de entrada (index.js) — conecta React con ese div
  3. Un componente raíz (App.js) — el componente principal donde escribes tu interfaz

El div root: la puerta de entrada

En el HTML de tu app hay un div casi vacío:

Este div es el punto de montaje. React toma el control de este elemento y todo lo que ves en pantalla se genera dentro de él. Es como un lienzo en blanco donde React pinta tu interfaz.

index.js: el puente

El archivo de entrada conecta React con el HTML:

¿Qué hace cada línea?

  • createRoot crea un "punto de montaje" de React en el div con id root
  • import App trae tu componente principal
  • root.render(<App />) le dice a React: "renderiza el componente App aquí"

En nuestro editor, este archivo ya está configurado. Tú trabajarás en App.js.

App.js: tu componente principal

Este es tu terreno de juego. App es una función de JavaScript que devuelve JSX (que parece HTML):

Cada vez que guardas un cambio en este archivo, React detecta el cambio y actualiza el preview automáticamente. Esto se llama Hot Module Replacement y es una de las cosas que hace que desarrollar con React sea tan agradable.

El flujo completo

Así de simple. Un archivo conecta, otro define qué se ve.

Tu desafío 🚀

Crea tu tarjeta de presentación personal en el componente App:

  1. Añade un <h1> con tu nombre
  2. Añade al menos dos párrafos <p> con información sobre ti (tu hobby, tu frase favorita, de dónde eres...)
  3. Observa cómo aparece todo en el preview

Acabas de crear tu primera aplicación React. Es pequeña, pero toda app grande empieza exactamente así.