Estructura de un proyecto React con TypeScript
Contenido del curso
Webpack
Parcel
ESBuild
Rollup
Vite
Conclusiones
Estructura de un proyecto React con TypeScript
Estructura de un proyecto React con TypeScript
Contenido del curso
Rubén Ernesto Aragón Gil
Néstor Raúl Guzmán Díaz
Norman Jaimes Mora
Reinhard Tristan Ortiz
Rubén Ernesto Aragón Gil
Kenneth Angulo L
Kenneth Angulo L
Kevin Daniel Hincapie Lumbaque
index.tsx
import React from "react"; import ReactDOM from "react-dom"; import App from './components/App.tsx'; ReactDOM.render( <App message = 'Practica de ESBUILD'/>, document.getElementById('app') )
App.tsx
import React, { useCallback, useState } from 'react'; const App = (props: { message: string }) => { return ( <> <h2>{props.message}</h2> <h3>Count: {count}</h3> <button>Increment</button> </> ) }
Si alguien esta viendo este curso en 2025 y su version de React es > 18, aqui les dejo el script acoplado.import React, { useCallback, useState } from "react"; const App = (props: { message: string }) => { return ( <> <h2>{props.message}</h2> <h3>Count: { count }</h3> <button>Increment</button> </> )}
Index.tsx
import React from "react"; import { createRoot } from "react-dom/client"; import App from './components/App'; const container = document.getElementById('app')!; const root = createRoot(container); root.render(<App message="remy EBuild example!" />) ````App.tsx` ```js import React, { useCallback, useState } from "react"; const App = (props: { message: string }) => { return ( <> <h2>{props.message}</h2> <h3>Count: { count }</h3> <button>Increment</button> </> ) }
Profe, una pregunta extra. Qué plugin maneja para que le muestre los errores en letra?? Por ejemplo en el minuto 11. Aparece "Cannot find name 'count"". Le agradezco, o si alguién podría decirme estaría agradecido...
La extensión es "Error lens" de Alexander:
Esa extensión es buena, la recomiendo, papu.
¿Por qué es mejor usar React Fragments?
Al construir interfaces, es muy común que necesites devolver múltiples elementos hermanos desde un componente, como un título <h1> y un subtítulo <h2>. Si los envuelves en un <div> tradicional, estarás inyectando nodos extra en el DOM que no tienen ningún propósito semántico ni visual. Esto puede romper diseños basados en CSS Grid o Flexbox, y hacer que tu código sea más pesado de procesar para el navegador a medida que la aplicación crece. Usar la sintaxis de fragmentos (<>...</>) te permite agrupar esa lista de hijos sin añadir nodos adicionales al DOM real. Es como una caja invisible que mantiene tu estructura limpia y optimizada, asegurando que el navegador solo renderice exactamente lo que el usuario necesita ver. Además, mejora la accesibilidad web al no ensuciar el árbol de elementos con contenedores div innecesarios que los lectores de pantalla tendrían que interpretar.
¿Qué pasa si envío props incorrectas?
Si defines que una propiedad debe ser un texto (string) y accidentalmente envías un número o una función desde el componente padre, TypeScript detendrá el proceso de compilación y te mostrará un error inmediatamente en tu editor de código. Esta es la mayor ventaja de tipar tus props. En lugar de descubrir que la interfaz se rompió cuando el usuario ya está navegando en la aplicación (como pasaría con JavaScript tradicional), el tipado estricto actúa como un escudo protector. Te obliga a respetar el contrato de datos que tú mismo diseñaste para el componente, garantizando que la información fluya de manera predecible y eliminando horas de depuración por errores de tipo. Al final, esta validación temprana se traduce en un código mucho más robusto, escalable y seguro para llevar a un entorno de producción sin sorpresas desagradables.
Justo vengo de ver los cursos de typescript así que me emociona ver como se junta con React.