Aprender a crear componentes en React JS es el primer paso para construir aplicaciones reutilizables e interactivas. Aquí descubrirás cómo se diferencian los componentes de los elementos, qué es JSX y cómo todo ese código termina convertido en HTML que ven tus usuarios.

¿Qué es un componente en React JS y cómo se crea?

Un componente de React es, en esencia, una función de JavaScript que retorna elementos. La convención clave es que su nombre empieza con letra mayúscula: si ves una función llamada App o TodoItem, casi con seguridad estás frente a un componente.

Dentro del proyecto base de Todo Machine, el componente principal vive en App.js y se importa desde index.js, donde React DOM lo renderiza dentro del div con id="root" del HTML. Ese div está vacío en el archivo index.html porque React se encarga de inyectar el contenido por ti [04:30].

Para crear tu propio componente basta con declarar una función nueva. Por ejemplo, un TodoItem que retorna un li con dos span y un p:

• Un span para marcar la tarea como completada.
• Un p con el texto del to-do.
• Un span con una X para borrar la tarea.

¿Cómo se crea un componente en React? Define una función cuyo nombre empiece en mayúscula y que retorne JSX. Luego invócala dentro de otro componente usando <NombreDelComponente />.

¿Cómo inserto un componente dentro de otro?

Una vez creado TodoItem, puedes llamarlo dentro de App con la sintaxis de corchetes triangulares: <TodoItem />. Igual que las imágenes en HTML, se cierra a sí mismo. Al guardar y recargar el navegador, verás esa estructura renderizada arriba del resto del contenido [12:40].

Lo poderoso es que puedes repetir esa línea las veces que quieras y tu componente se renderiza tantas veces como lo invoques, sin reescribir el li, los span ni el p. Esa es la magia de la reutilización de componentes.

¿Qué es JSX y por qué no es HTML?

Dentro de un componente, lo que escribes en el return parece HTML, pero no lo es. Esa sintaxis se llama JSX (JavaScript XML) y combina JavaScript con una notación parecida a XML para que el código sea cómodo de leer.

Hay pistas que delatan que no es HTML puro:

• Se escribe className en lugar de class.
• Los atributos pueden recibir variables con llaves, como src={logo}.
• El archivo termina en .jsx o .js y necesita pasar por Babel para transformarse en JavaScript real.

Después de la transpilación, esos corchetes se convierten en llamadas a React.createElement(...), una función mucho menos estética pero que es lo que el navegador realmente ejecuta.

¿JSX es lo mismo que HTML? No. JSX es una sintaxis de JavaScript que imita HTML para facilitar la escritura, pero se transpila a llamadas de función antes de convertirse en HTML real.

¿Cuál es la diferencia entre componente y elemento?

Dentro de un mismo archivo conviven ambos, y distinguirlos es más simple de lo que parece:

• Componente: empieza con mayúscula, es una función, recibe props y encapsula lógica. No se renderiza directamente como HTML.
• Elemento: empieza con minúscula (div, li, span, p), vive dentro de un componente y sí se transforma en una etiqueta HTML.

Es decir, los componentes contienen elementos, y los elementos son los que terminan en el DOM que ve el usuario.

¿Cómo paso datos dinámicos a un componente con props?

Si reutilizas un componente con la misma información, parece un copy paste sin sentido. Las props (propiedades) resuelven eso permitiendo enviar datos distintos en cada invocación.

Imagina un componente TodoCount que muestre cuántas tareas completaste de un total. En lugar de escribir fijo "3 de 5", recibes props.completed y props.total y los inyectas con llaves dentro del JSX. Al llamarlo, pasas los valores con una sintaxis parecida a los atributos de HTML:

• <TodoCount completed={3} total={5} />
• <TodoCount completed={8} total={10} />
• <TodoCount completed={6} total={15} />

Mucho ojo: estos no son atributos, son propiedades. La diferencia importa porque las props pueden ser strings, números, objetos, arrays o incluso funciones, mientras que los atributos HTML están limitados a strings.

¿Qué son las props en React? Son propiedades que un componente recibe como argumento para personalizar lo que renderiza. Permiten que un mismo componente muestre datos distintos según el contexto en que se use.

¿Cómo termina React convirtiendo todo en HTML?

La pieza final es el render. En index.js se ejecuta ReactDOM.createRoot(document.getElementById('root')) y sobre ese root se llama al método render, pasándole el componente principal [05:50].

Ese proceso funciona como una fábrica: recibe componentes, elementos y props, los procesa internamente y produce etiquetas HTML reales más el JavaScript necesario para que la página sea interactiva. Cuando el usuario abre el navegador, lo que encuentra ya no es JSX, son nodos HTML dentro del div con id="root".

¿Qué versión de React conviene usar para aprender?

El proyecto base usa React 18 y fue generado con Create React App. Esta versión asegura que las dependencias se instalen sin conflictos y que los fundamentos universales de React JS, como componentes, JSX, props y render, sigan siendo válidos sin importar futuras actualizaciones [02:50].

Dentro de package.json encontrarás tres scripts disponibles, aunque durante la mayor parte del aprendizaje solo usarás npm start para levantar el servidor local, y más adelante npm run build para generar la versión de producción.

Cuéntame en los comentarios cómo le llamas tú a esos corchetes triangulares de JSX y qué fue lo primero que renderizaste con tu propio componente.