Montar un proyecto en React con TypeScript desde cero te obliga a entender cómo se conectan el punto de entrada, los componentes y los tipos de datos. Aquí vas a ver cómo armar esa estructura paso a paso, qué archivos crear y por qué cada decisión importa cuando trabajas con un empaquetador como Webpack.

Cómo organizar la carpeta source en un proyecto React

La convención más usada es centralizar tu código dentro de una carpeta src. Ese es el primer paso antes de escribir una sola línea de JSX.

Dentro de src creas el archivo index.tsx, que será el punto de entrada de tu aplicación. La extensión .tsx indica que vas a mezclar TypeScript con JSX, a diferencia de .js o .jsx que verías en proyectos sin tipado.

¿Qué diferencia hay entre .jsx y .tsx? El archivo .jsx permite escribir HTML dentro de JavaScript. El .tsx hace lo mismo pero añade el sistema de tipos de TypeScript, lo que te obliga a validar qué datos recibe cada componente.

Qué imports necesita el archivo index.tsx

El punto de entrada necesita dos librerías base que ya instalaste como dependencias [02:14]:

• React, para acceder a la API de la librería.
• ReactDOM, para renderizar componentes en el DOM real del navegador.
• App, el componente principal que vas a crear dentro de la carpeta components.

Cuando importas desde ./components/App, no necesitas escribir la extensión. El empaquetador resuelve automáticamente el archivo correspondiente.

Cómo funciona ReactDOM.render con dos argumentos

El método ReactDOM.render es el puente entre tu código React y el HTML del navegador. Recibe dos argumentos clave:

1. El componente que quieres renderizar, en este caso <App />.
2. El nodo del DOM donde se va a montar, obtenido con document.getElementById('app').

Al componente App le pasas un prop llamado message con el valor "Platzi Earth Build Example". Este prop viaja desde el padre hacia el hijo y será mostrado en pantalla [05:30].

¿Qué es un prop en React? Es un dato que un componente padre envía a un componente hijo. Funciona como un parámetro de función: el hijo lo recibe y decide cómo usarlo en su renderizado.

Cómo tipar los props de un componente con TypeScript

Aquí entra la ventaja real de usar TypeScript en React: puedes declarar qué tipo de dato espera recibir cada componente y evitar errores antes de que ocurran en el navegador.

Dentro de App.tsx defines la función del componente y describes la forma de sus props:

tsx const App = (props: { message: string }) => { return ( <> <h1>{props.message}</h1> <h2>count</h2> <button>increment</button> </> ); };

Si alguien intenta pasar un número o una función al prop message, TypeScript marcará una alerta inmediata. Esa validación temprana es lo que hace que el tipado pague su costo de complejidad.

Para qué sirve el fragment en JSX

El bloque <>...</> es lo que en React se llama fragment. Te permite devolver varios elementos sin envolverlos en un <div> extra que ensucie el árbol del DOM.

Es útil cuando necesitas un h1, un h2 y un button como hermanos directos, sin un contenedor padre que no aporta nada visual ni semántico.

Qué son los hooks useState y useCallback en React

React introduce el concepto de hooks: funciones especiales que te permiten manejar estado y lógica dentro de componentes funcionales. Para esta aplicación vas a usar dos:

• useState, para guardar cuántas veces se ha presionado el botón de incremento.
• useCallback, para memorizar la función que actualiza ese contador y evitar que se vuelva a crear en cada renderizado.

Ambos se importan directamente desde la librería React y se invocan dentro del cuerpo del componente. La lógica del contador y el manejo del clic se construyen sobre esta base.

¿Cuándo usar useCallback en React? Cuando necesitas pasar una función a un componente hijo o a un event handler y quieres evitar que se redefina en cada render. Mejora el rendimiento en componentes que se renderizan con frecuencia.

La interfaz que estás construyendo es deliberadamente simple: un mensaje, un contador y un botón. El objetivo no es la app en sí, sino entender cómo se conectan React, TypeScript y el empaquetador que prepararás más adelante. ¿Qué parte de esta estructura te genera más dudas?