Creando una app con React y TypeScript

Crear una app con next.js

npx create-next-app@latest --typescript --use-npm

Para que quede como en el proyecto de Jonathan
Would you like to use ESLint with this project? › No / Yes
Would you like to use src/ directory with this project? › No / Yes
Would you like to use experimental app/ directory with this project? › No / Yes

Ejecutar el proyecto

npm run dev

tsconfig.ts

“strict" : true
"noImplicitAny": true,
“noImplicitReturns”: true,

.eslintrc.json

“rules”:{
"@next/next/no-img-element":“off”,
“jsx-a11y/alt-text”:“off”
}

Tailwind

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

tailwind.config.js

content: [
"./app//*.{js,ts,jsx,tsx}",
"./pages//.{js,ts,jsx,tsx}",
"./components/**/.{js,ts,jsx,tsx}",
],

global.css

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

Uso

<h1 className=“text-3xl font-bold underline”>
Hello world!
</h1>

¿Por qué es una buena opción hacer este curso de React con TypeScript construido con Next.js? Les cuento algo 👇

Cuando vi que sacaron este curso me emocioné muchísimo porque una de mis metas de este año es aprender TypeScript y utilizarlo en React. Pero luego, cuando comencé el curso me incomodó un poco porque no me esperaba que estuviese hecho con Next.js 😣 Y pues, lo abandoné a la tercera clase porque al momento de instalarlo me estaba dando errores y no sabía nada de Next.js.

Una semana después, decidí dejar de lado la frustración y volví a retomar el curso por estas razones:

• No pienso rendirme tan fácil al primer error que tenga porque de lo contrario no me serviría de nada seguir formandome como desarrolladora.
• Creo que lo mejor es aprender Next.js, porque es una tecnología que nos brinda muchas facilidades al momento de desarrollar aplicaciones en React.
• La ultima razón y creo que una de las más importantes, es que incluso en la documentación de React, sus propios creadores recomiendan que para crear proyectos se utilice alguno de los marcos de trabajo que ellos recomiendan, siendo Next.js el primero de entre los que recomiendan.

Así que a darle! 💪 Es normal sentir miedo y rechazo hacía las cosas que no conocemos… solo debemos tomar en cuenta que en ocasiones al aprender esas cosas/tecnologías que no conocemos podremos llegar más lejos 💫

tsconfig.json

.....
"strict":true,
"noImplicitAny": true,
    "noImplicitReturns": true,

.eslint.json
(configuracion de curso, no recomendado para produccion)

......
"rules":{
    "@next/next/no-img-element":"off",
    "jsx-a11y/alt-text":"off"
  }

La fuente que está usando el prof Jonathan en su VSC me confunde, pero espero en las otras clases poder verlo mejor. 😭

Con este comando de instalación y los siguientes pasos quedaria igual al proyecto del curso, recordemos que hoy en dia ya se esta usando la versión 13 de Nextjs.

Tuve problemas al trabajar con el proyecto por la version de next (a la fecha de este cometnario es v. 13 o mas). Por eso decidi usar este comando para usar la misma version del curso:

npx [email protected] --ts --use-npm

npx create-next-app@latest --ts --use-npm
Es un comando bastante impresionante porque instala todo esto:

• react
• react-dom
• next
• typescript
• @types/react
• @types/node
• @types/react-dom

¡Recuerden que la configuración de TailwindCSS es una distinta con ya que usamos Next.js!
https://tailwindcss.com/docs/guides/nextjs

Al crear el proyecto con el comando => ‘npx create-next-app@latest --typescript --use-npm’; nos da unas opciones de configuración la cual ya nos permite añadir tailwindcss a nuestro proyecto y viene ya configurado;
Otra cosa es que la estructura de archivos y carpetas al crear el proyecto ya cambio, para tenerlo en cuenta

Ya vieron este sitio para crear el proyecto de Next.js en segundos y probar el código online?
CodeSandbox
Díganme si les parece interesante.

.eslintrc.json queda asi:

{
  "extends": "next/core-web-vitals",
  "rules": {
    "@next/next/no-img-element": "off",
    "jsx-a11y/alt-text": "off"
  }
}
 

![](

el comando para crear el proyecto

npx create-next-app@latest --typescript --use-npm

En mi caso, trataré de dejar las reglas de Nextjs tal y como vienen, no cambiaré nada

<h1 className="text-3xl font-bold underline">
      Hello world!
</h1>

Este curso lo estoy tomando con Vite, se me hace hace muy pesado utilizar Next.

Jonathan no estoy de acuerdo en usar next para usar ts en react! Ya que en la misma documentación de react viene como configurar el entorno con TS

Al iniciar el proyecto, tuve muchos inconvenientes desde la terminal, porque no me el archivo package.json dentro de mi proyecto, lo solucioné creando una “subcarpeta” de mi proyecto, dentro de la carpeta principal… Espero les sirva.

react-ts npx create-next-app@latest --typescript --use-npm
Need to install the following packages:
[email protected]
Ok to proceed? (y) y
✔ What is your project named? … my-first-ts-app
✔ Would you like to use ESLint with this project? … No / Yes
✔ Would you like to use src/ directory with this project? … No / Yes
? Would you like to use experimental app/ directory with this project? › No / ✔ Would you like to use experimental app/ directory with this project? … No / Yes
✔ What import alias would you like configured? … @/*