React

Introducció

La combinació d’Astro de generació de llocs estàtics i flexibilitat de framework el fa perfecte per als desenvolupadors de React que volen optimitzar el rendiment sense sacrificar la potència dels components React.

Mitjançant el pre-renderitzat de la majoria dels nostres llocs i l’ús de JavaScript del costat del client només quan és necessari, pots oferir llocs web ràpids i escalables que encara aprofiten la potència interactiva de React.

Entorn de treball

L’enfocament independent de framework d’Astro li permet treballar sense problemes amb React.

Primer, al nostre directori de projecte Astro, executa la següent comanda per afegir suport per React:

deno run astro add react

La comanda anterior instal·larà React, configurarà les dependències necessàries i configurarà Astro per utilitzar components React. Un cop completada la integració, Astro habilitarà automàticament els components basats en React als fitxers .astro. Ara podem utilitzar components React juntament amb les característiques de plantilles HTML d’Astro, la qual cosa ens permet aprofitar completament l’ecosistema de React mentre mantenim la filosofia d’Astro orientada al rendiment.

Components React

Ara crearem un component React simple anomenat Greeting.tsx dins del nostre projecte.

Els components React es troben dins de la carpeta src/components d’un projecte Astro

src/components/Greeting.tsx

import React from "react"

export default function Greeting({name}: { name: string }) {
    return (
        <div>
            <h1>Hello, {name}!</h1>
            <p>Welcome to our Astro + React site!</p>
        </div>
    )
}

En el component anterior, simplement estem mostrant una salutació amb un nom passat com a propietat. El següent pas és utilitzar aquest component React dins d’una pàgina .astro.

Pàgina Astro

Astro ens permet integrar components React a les nostres pàgines de manera fluida. Per fer-ho, crea el fitxer src/pages/react.astro i importa el component Greeting.tsx. Després, utilitza el component dins de la pàgina Astro:

src/pages/react.astro

---
import Greeting from '../components/Greeting'
---

<Greeting name="David"/>

En l’exemple anterior, el component Greeting rep una propietat name="David", que mostrarà un missatge personalitzat a la pàgina d’inici. Aquest component és un component React completament funcional, però gràcies al pre-renderitzat d’Astro, es genera com a HTML pur durant el procés de construcció, assegurant temps de càrrega més ràpids i un rendiment òptim.

Interactivitat

Tot i que Astro fomenta l’ús mínim de TypeScript al frontend, hi ha casos on es requereix interactivitat.

Suposem que vols afegir un component comptador simple a la pàgina, cosa que permet als usuaris incrementar un valor. Crea un nou component Counter.tsx:

src/components/Counter.tsx

import React, {useState} from "react"

export default function Counter() {
    const [count, setCount] = useState(0)

    return (
        <div>
            <p>Current count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    )
}

Aquest és un component React estàndard que utilitza useState per gestionar el comptador. Per utilitzar aquest component de manera interactiva a la vostra pàgina Astro, podem importar-lo a react.astro i aplicar la directiva client:load:

src/pages/react.astro

---
import Greeting from '../components/Greeting'
import Counter from '../components/Counter'
---

<Greeting name="David"/>

<Counter client:load/>

Amb la directiva client:load, el component Counter es carregarà al client, cosa que significa que les funcionalitats interactives de React (com la gestió d’estat) són completament funcionals. Astro gestiona la hidratació d’aquest component, de manera que només s’envia al client el JavaScript necessari.

TODO

Consulta la documentació oficial d’Astro de Directives de client