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.

vite.config.ts

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:

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

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.

Router React Router te permite renderizar un componente concreto en función del "path" de la url y navegar entre componentes.

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

Effect

Forms

Windows

>

TODO

• Catalyst: Application layouts, navigation menus, description lists, and more