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 9

Preguntas 1

Ordenar por:

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

o inicia sesi贸n.

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"
  }

Crear una app con next.js

npx [email protected] --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>

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

el comando para crear el proyecto

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

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 [email protected] --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? 鈥 @/*

npx [email protected] --ts --use-npm
Es un comando bastante impresionante porque instala todo esto:

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

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>

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.