Tutorial práctico: React y TypeScript paso a paso
En este tutorial, te guiaré a través de los pasos para crear tu primera aplicación utilizando React y TypeScript. React es una biblioteca de JavaScript para construir interfaces de usuario, mientras que TypeScript es un superconjunto de JavaScript que agrega tipado estático a la sintaxis de JavaScript.
Paso 1: Configuración del entorno
Lo primero que necesitas hacer es configurar tu entorno de desarrollo. Para esto, asegúrate de tener Node.js y npm instalados en tu computadora. Luego, instala create-react-app, una herramienta que te permite crear fácilmente proyectos de React. Puedes hacerlo ejecutando el siguiente comando en tu terminal:
npx create-react-app my-app --template typescript
Esto creará un nuevo proyecto de React con TypeScript llamado my-app en tu directorio actual.
Paso 2: Crear la aplicación
Una vez que tu proyecto esté creado, navega al directorio de la aplicación y ejecuta el siguiente comando para iniciar el servidor de desarrollo:
cd my-app
npm start
Esto abrirá tu aplicación en un navegador y podrás verla en acción. Ahora puedes comenzar a trabajar en tu aplicación.
Paso 3: Escribir código
Abre tu editor de código favorito y comienza a escribir código. Puedes utilizar TypeScript para agregar tipado estático a tu código, lo que te ayudará a detectar errores en tiempo de compilación.
Por ejemplo, puedes crear un componente de React con TypeScript de la siguiente manera:
import React from 'react';
interface AppProps {
name: string;
}
const App: React.FC = ({ name }) => {
return (
Hola, {name}!
);
}
export default App;
Una vez que hayas escrito tu código, guarda tus cambios y podrás ver la aplicación actualizada en tiempo real en tu navegador.
Paso 4: Despliegue de la aplicación
Una vez que estés satisfecho con tu aplicación, puedes desplegarla en producción. Para hacerlo, ejecuta el siguiente comando en tu terminal:
npm run build
Esto generará una versión optimizada de tu aplicación en la carpeta build. Puedes subir esta carpeta a un servidor web para que tu aplicación esté disponible en línea.
¡Y eso es todo! Has creado tu primera aplicación utilizando React y TypeScript. Espero que este tutorial práctico te haya sido útil y te ayude a comenzar a desarrollar aplicaciones web utilizando estas tecnologías modernas.
Me quedé con la duda de que era eso de signals.
No sé por qué no explicarlo o redireccionar a alguien solo por el hecho de que lo dijiste hace meses.
La gente que apenas te está siguiendo no sabría que ya lo explicaste
Hola midu, me encantó esta primera parte, pero no encuentro la segunda, podrías compartirmela? pls
Hola Midu, gracias por le video pero no me funciono lo del esLinst. No me aparecen los errores como a ti.
No sirve el link del repositorio D:
la consola esa que usas siempre al hacer un nuevo proyecto es la propia de mac? es algun programa? siento si la pregunta es tonta, soy profano y estoy empezando a aprender a programar ahora
Para los que tienen problemas con Eslint que no les agarra, revisen el apartado OUTPUT de vscode alado de terminal, allí les saldrá el error de eslint, en mi caso, tuve que borrar la linea de referencia a eslintconfig en mi package.json de la carpeta que contiene los proyectos, y quedo funcionando.
Buen video! Falta agregarlo a la playlist de aprendiendo react @midulive
muy bueno, hay segunda parte?
Gracias
nunca e estado mas perdido aprendiendo programacion
no entendi ni la mitad de todo
Midu donde está la continuación?
Sigo sin enteder por qué en el filter "!todo.completed" se refiere a que sea false, pero todo.completed se supone que es false, !todo.completed no se supone que seria true? alguien me puede explicar? por favor me estoy volviendo loco
muy buen video para ir aprendiendo TS, ahora la segunda parte solo queda en los recuerdos…
Algún desarrollador por aquí que pueda contratar pero que sepa aplicar esto para un proyecto! Que pueda crear un todolist que se vincule a una base de datos
Primero que todo, gracias por compartir!
Aún espero la segunda parte.
el init del eslint a mi me funcionó escribiendo
"npm init @eslint/config"
La verdad es increíble la cantidad de cosas que uno aprende viendo los videos de midu. Trabaje con angular un tiempo, pero no sabia que se podia hacer todas estas cosas con TS. Ahora ando aprendiendo React y me gusta mucho aprender la forma de tener un codigo limpio y que sea escalable asi como menciona midu. Muchas gracias por el contenido que nos brindas!
donde esta la continuacion de este proyecto?
recien comienzo con vite y me sabe mal que tiene un mundo de problemas con los pluggins y las dependencias … o no se si sea mala suerte la mia xd ojala este tutorial hubiera sido con next.js :v