No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Creando una app con React y TypeScript

3/16
Recursos

Aportes 25

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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

鈥渟trict" : true
"noImplicitAny": true,
鈥渘oImplicitReturns鈥: true,

.eslintrc.json

鈥渞ules鈥:{
"@next/next/no-img-element":鈥渙ff鈥,
鈥渏sx-a11y/alt-text鈥:鈥渙ff鈥
}

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=鈥渢ext-3xl font-bold underline鈥>
Hello world!
</h1>

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. 馃槶

驴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 馃挮

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.

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

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

隆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 => 鈥榥px 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>
en mi caso fue imposible inicializar el proyecto con Next.js , por mi parte trabajar茅 con Vite
Si les da fallo al usar el comando algo como npx create-next-app@latest npm ERR! code ENOENT npm ERR! syscall lstat npm ERR! path C:\Users\User\AppData\Roaming\npm npm ERR! errno -4058 npm ERR! enoent ENOENT: no such file or directory, lstat 'C:\Users\User\AppData\Roaming\npm' npm ERR! enoent This is related to npm not being able to find a file. npm ERR! enoent npm ERR! A complete log of this run can be found in: C:\Users\User\AppData\Local\npm-cache\\\_logs\2024-04-25T16\_25\_45\_517Z-debug-0.log usen este comando ```js npm install -g npm // y si sigue sin funcionar limpien cache npm cache clean --force ```
que triste que use el fondo blanco, me limita completamente poder realizar este curso
no estoy desacuerdo, el curso dice crando app con React y Typescript, Typescript con nextjs
Para qu茅 son las configuraciones que hiciste, ser铆a bueno explicar para qu茅 son.
Hola a todos. Tengo un problema que es a su vez una duda: 驴Por qu茅 no se cre贸 autom谩ticamente la carpeta pages en mi proyecto? Agradezco de antemano a quien em responda.
Cual es el repositorio del proyecto? no aparece en los recursos, al menos del nuevo frontend de platzi

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 鈥渟ubcarpeta鈥 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? 鈥 @/*