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:
<div id="root"> — el contenedor donde React "vivirá"index.js) — conecta React con ese divApp.js) — el componente principal donde escribes tu interfazEn 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.
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 rootimport App trae tu componente principalroot.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.
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.
Así de simple. Un archivo conecta, otro define qué se ve.
Crea tu tarjeta de presentación personal en el componente App:
<h1> con tu nombre<p> con información sobre ti (tu hobby, tu frase favorita, de dónde eres...)Acabas de crear tu primera aplicación React. Es pequeña, pero toda app grande empieza exactamente así.