Introduccion

1

Empaquetadores Web: Herramientas y Evolución para Desarrolladores

2

Módulos y empaquetadores en JavaScript: fundamentos esenciales

3

Empaquetadores de Módulos en JavaScript: Webpack, Parcel, Sbuild y Más

4

Empaquetadores de Módulos JavaScript: Webpack y Alternativas

Webpack

5

Configuración y Uso de Webpack para Proyectos Web

6

Configuración de Webpack para Aplicación Web Dinámica

7

Creación de una Landing Page con JavaScript y Tailwind CSS

8

Manipulación del DOM con JavaScript: Creación de Funciones y Templates

9

Configuración y despliegue de aplicaciones web con Webpack y GitHub Pages

Parcel

10

Creación de Proyectos Web con Parcel y Fake API de Platzi

11

Creación de una Aplicación Web con Fake API y Parcel

12

Creación de SPA con Vanilla JavaScript y Parcel

13

Configuración y Uso de Parcel para Proyectos Web

ESBuild

14

Configuración de Proyectos React y TypeScript con SBuild

15

Desarrollo de Aplicaciones con React y TypeScript: Primeros Pasos

16

Integración de UseState y UseCallback en React con SBuild

17

Configuración de Servidor Local con sbuild en JavaScript

Rollup

18

Configuración de Proyectos con Roloop y Plugins Avanzados

19

Configuración de Plugins en Rollup para Optimización de Proyectos

20

Construcción de Aplicación Web con JavaScript y Fake API

21

Instalación y configuración de DevServer con Rollup

Vite

22

Configuración y uso de herramientas de empaquetado en JavaScript

Conclusiones

23

Empaquetadores JavaScript: Ventajas y Desventajas

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Desarrollo de Aplicaciones con React y TypeScript: Primeros Pasos

15/23
Recursos

¿Cómo comenzar un proyecto en React con TypeScript?

Comenzar un proyecto usando React con TypeScript puede parecer un desafío, especialmente si no estás familiarizado con estas tecnologías. Sin embargo, con una estructura clara y pasos bien definidos, puedes lograrlo sin problemas. Para partir, es esencial tener instaladas las dependencias necesarias y un editor de código preparado para trabajar. En esta guía, te mostramos cómo estructurar un nuevo proyecto usando React combinado con TypeScript.

¿Cómo estructurar el proyecto?

Iniciar un proyecto bien estructurado es clave para un desarrollo fluido y eficiente. Para ello, sigue estos pasos:

  1. Crear el directorio del código fuente:

    • Usamos Source como estándar para nombrar el directorio donde residirá el código.
  2. Añadir un archivo principal:

    • Crea un archivo llamado Index.tsx. Este será el punto de entrada de tu aplicación y donde conectarás React con el DOM del navegador.
  3. Implementar la lógica del archivo index:

    import React from 'react';
    import ReactDOM from 'react-dom';
    import App from './Components/App';
    
    ReactDOM.render(<App message="Platzi else build example" />, document.getElementById('app'));
    
  4. Configurar los componentes:

    • Crea una carpeta llamada Components y dentro de ella, un archivo App.tsx. Es aquí donde definirás los componentes de tu aplicación.

¿Qué ventajas tiene React con TypeScript?

Trabajar con TypeScript no solo aporta una capa extra de tipado y seguridad al desarrollo, sino que también mejora la mantebilidad del código. Algunos puntos a destacar son:

  • TSX como extensión: Elegimos .tsx en lugar de .js o .jsx dado que TypeScript ofrece capacidades adicionales al manejar tipado estático.
  • Tipo de datos establecido: Al implicar tipos específicos, se reduce el margen de error y se facilita el entendimiento y documentación del código.

¿Cómo definir un componente React con TypeScript?

En React, los componentes son bloques fundamentales que forman la interfaz de usuario. Aquí te mostramos cómo crear un componente básico con TypeScript:

  1. Importar librerías: Asegúrate de que las funciones clave de React estén disponibles:

    import React, { useState, useCallback } from 'react';
    
  2. Crear el componente principal: Dentro del archivo App.tsx, define la estructura de tu aplicación:

    type AppProps = {
        message: string;
    };
    
    const App: React.FC<AppProps> = ({ message }) => {
        const [count, setCount] = useState<number>(0);
    
        const increment = useCallback(() => setCount((prevCount) => prevCount + 1), []);
    
        return (
            <>
                <h1>{message}</h1>
                <h2>Count: {count}</h2>
                <button onClick={increment}>Increment</button>
            </>
        );
    };
    
    export default App;
    
  3. Entender el uso de hooks: Los hooks como useState y useCallback facilitan la gestión del estado y lógica de funciones en los componentes. Esto no solo optimiza, sino que también alinea el código con las mejores prácticas actuales de React.

¿Por qué usar JSX?

JSX es una extensión de sintaxis que hace posible escribir código similar a HTML dentro de JavaScript. Esto es clave en React para definir la interfaz visual de manera intuitiva y directa. Algunos beneficios incluyen:

  • Simplicidad y legibilidad: Refleja cómo se estructuran los componentes visualmente en la aplicación.
  • Dinamismo y flexibilidad: La posibilidad de incluir expresiones de JavaScript directamente dentro de la estructura HTML.

Comenzar con React y TypeScript puede abrir un mundo de posibilidades en el desarrollo web moderno. Si bien este fue solo un esbozo inicial del proceso, dedica tiempo para explorar en profundidad cada concepto. ¡No te desanimes si encuentras desafíos; el aprendizaje continuo es parte del viaje del desarrollo!

Aportes 3

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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 (
        <>
            <h1>{props.message}</h1>
            <h2>Count: {count}</h2>
            <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 (        <>            \

{*props*.message}\

            \

Count: { count }\

            \<button>Increment\</button>        \    )} Index.tsx ```js 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 ( <>

{props.message}

Count: { count }

<button>Increment</button> ) } ```

Justo vengo de ver los cursos de typescript así que me emociona ver como se junta con React.