Forms

Router React Router et permet renderitzar un component concret en funció del "path" de la url i navegar entre components.

Estado Los componentes a menudo necesitan cambiar lo que aparece en la pantalla como resultado de una interacción.

Effect

TSX TSX és una extensió sintàctica per Typescript que et permet escriure codi que s'assembla a HTML dins d'un fitxer Typescript

Component Les aplicacions de React es construeixen a partir de peces independents d'UI anomenades components.

Pendent

Suspense Amb Suspense els components poden aturar el renderitzat mentre esperen que finalitzi un procés asíncron, com la separació de codi o la recuperació de dades.

Windows

React

Introducció

React és una biblioteca dissenyada per crear interfícies d’usuari.

Entorn de treball

Instal·la Deno.

Crea un projecte amb el nom tsx, especificant directament el nom del projecte i la plantilla que vols utilitzar:

deno init --npm vite tsx --template react-swc-ts

Instal·la les dependències:

cd tsx
deno install --allow-scritps

Instal·la tailwindcss i @tailwindcss/vite

deno install --allow-scripts npm:tailwindcss npm:@tailwindcss/vite

Afegeix el complement @tailwindcss/vite a la teva configuració de Vite.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(),tailwindcss()],
})

Modifica el contingut del fitxer src/index.css

@import "tailwindcss";

Arrenca el servidor de desenvolupament:

deno run dev

Obre el navegador: http://localhost:5173

Veuras la pàgina d’inici per defecte:

Elimina el fitxer src/App.css.

Modifica el fitxer src/App.tsx:

export default function App() {
  return <h1>Hello</h1>
}

El prefix export default és part de la sintaxis estàndard de Typescript (no és específic de React).

Et permet marcar la funció principal d’un arxiu perquè després la puguis importar en altres arxius.

Activitats