¿Qué es un componente?

¿Cómo está construido el proyecto de TodoMachine?

¡Sumérgete en la emocionante aventura de construir una aplicación con React! Nuestro objetivo es crear un TodoMachine, una aplicación donde gestionarás tareas pendientes. A lo largo de este contenido, desglosaremos el código, exploraremos los componentes y analizaremos cómo se transforman en etiquetas HTML. Prepárate para aprender y reutilizar componentes, convirtiendo tu aplicación en algo interactivo y versátil.

¿Qué estructura tiene el proyecto clonado?

El proyecto clonado inicialmente sigue la estructura típica generada por herramientas como Create React App. Esta base incluye carpetas como public y src, archivos de configuración como package.json, y herramientas de optimización y desarrollo. A continuación, abordaremos los archivos más relevantes:

• package.json: Contiene el nombre, la versión, las dependencias del proyecto, y scripts ejecutables. Por ejemplo, el script start se utiliza para iniciar el proyecto localmente.

• public: Aquí se encuentra el index.html, el punto de entrada de nuestra aplicación, que contiene un <div> con id="root" donde React inyectará nuestro contenido.

• src: Esta es la carpeta donde acontecerá gran parte del trabajo. index.js importa React y ReactDOM, define el root de nuestra aplicación, y renderiza el componente principal App.

¿Qué es un componente en React y cómo se crean y reutilizan?

Los componentes son la pieza angular de una aplicación React. Un componente en React es equivalente a una función en JavaScript que puede retornar elementos JSX. Estos elementos JSX se parecen a HTML, pero son más potentes, ya que permiten incluir lógica JavaScript.

Cómo crear un componente

Crear un componente en React es tan sencillo como definir una función. Observa este ejemplo básico de un componente llamado TodoItem:

function TodoItem() {
  return (
    <li>
      <span>✓</span>
      <p>Tarea pendiente</p>
      <span>✗</span>
    </li>
  );
}

Este componente TodoItem puede ser reutilizado tantas veces como se desee en la aplicación. Simplemente se declara dentro de otro componente, como App, de la siguiente manera:

function App() {
  return (
    <div>
      <TodoItem />
      <TodoItem />
      <TodoItem />
    </div>
  );
}

¿Cómo funcionan JSX y los elementos de React?

JSX (JavaScript XML) es la extensión de sintaxis que permite escribir código similar a HTML en archivos JavaScript. Esto genera una experiencia de desarrollo agradable al imitar la familiaridad del HTML, pero es importante recordar que JSX no es HTML. JSX es compilado por Babel y transformado en código JavaScript que React puede procesar y renderizar a elementos HTML.

Diferentes en JSX y elementos de React

• JSX: Se utiliza para definir la estructura visual de los componentes. Aunque parece HTML, permite la integración de lógica JavaScript.

• Elementos de React: Son lo que JSX genera y lo que React renderiza como HTML en el DOM del navegador.

¿Cómo se transforman los componentes y elementos React en HTML?

La magia reside en el método ReactDOM.render(), donde los componentes se transforman en el DOM real:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Al invocar render, React toma los componentes y a través de su proceso de conciliación, los transforma en el DOM, creando una representación visual interactiva de nuestra aplicación.

ReactJS es una poderosa herramienta que permite crear aplicaciones dinámicas con facilidad, y la reutilización de componentes es esencial para una arquitectura eficiente. ¡Sigue explorando y codificando en la siguiente lección del viaje!