GitHub - pedro-donoso/typescript-react: proyecto de lista de tareas creado en react y typescript, permite al usuario ingresar nueva tarea y la muestra en pantalla, tambien le permite borrar

https://react-typescript-lista-tareas.netlify.app/

1. Creo proyecto con Vite y agrego nombre:

create vite@latest

2. Seleccion React y TypeScript + SWC:

Ingreso a la carpeta del proyecto y abro VSC

3. Elimino archivos innecesarios e instalo npm para errores:

npm install

4. Creo carpeta components y componente TodoApp.tsx:

5. Desde main.tsx llamo al componente TodoApp.tsx:

6. Desde index.html llamo al modulo main.tsx:

7. Ejecuto la aplicación:

npm run dev

8. Instalo Tailwind y creo archivos de configuración:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

9. Agrego contenido a tailwind.config.js:

10. En src creo archivo index.css y agrego directivas:

@tailwind base;
@tailwind components;
@tailwind utilities;

11. Importo archivo index.css al archivo principal main.tsx:

12. Agrego estilos Tailwind al componente TodoApp.tsx:

13. Corro la Aplicacion para ver los estilos:

npm run dev

Al finalizar el proyecto:

npm run build

Name		Name	Last commit message	Last commit date
Latest commit History 24 Commits
src		src
.gitignore		.gitignore
README.md		README.md
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

https://react-typescript-lista-tareas.netlify.app/

1. Creo proyecto con Vite y agrego nombre:

2. Seleccion React y TypeScript + SWC:

Ingreso a la carpeta del proyecto y abro VSC

3. Elimino archivos innecesarios e instalo npm para errores:

4. Creo carpeta components y componente TodoApp.tsx:

5. Desde main.tsx llamo al componente TodoApp.tsx:

6. Desde index.html llamo al modulo main.tsx:

7. Ejecuto la aplicación:

8. Instalo Tailwind y creo archivos de configuración:

9. Agrego contenido a tailwind.config.js:

10. En src creo archivo index.css y agrego directivas:

11. Importo archivo index.css al archivo principal main.tsx:

12. Agrego estilos Tailwind al componente TodoApp.tsx:

13. Corro la Aplicacion para ver los estilos:

Al finalizar el proyecto:

Para generar la carpeta dist

About

Releases

Packages

Languages

pedro-donoso/typescript-react

Folders and files

Latest commit

History

Repository files navigation

https://react-typescript-lista-tareas.netlify.app/

1. Creo proyecto con Vite y agrego nombre:

2. Seleccion React y TypeScript + SWC:

Ingreso a la carpeta del proyecto y abro VSC

3. Elimino archivos innecesarios e instalo npm para errores:

4. Creo carpeta components y componente TodoApp.tsx:

5. Desde main.tsx llamo al componente TodoApp.tsx:

6. Desde index.html llamo al modulo main.tsx:

7. Ejecuto la aplicación:

8. Instalo Tailwind y creo archivos de configuración:

9. Agrego contenido a tailwind.config.js:

10. En src creo archivo index.css y agrego directivas:

11. Importo archivo index.css al archivo principal main.tsx:

12. Agrego estilos Tailwind al componente TodoApp.tsx:

13. Corro la Aplicacion para ver los estilos:

Al finalizar el proyecto:

Para generar la carpeta dist

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages