Home-theater-designers
Quan creeu una aplicació amb el marc Astro, potser us preguntareu com gestionar l'estat de l'aplicació o compartir-lo entre components i marcs. Nano Stores és un dels millors gestors estatals d'Astro, gràcies al fet que funciona amb React, Preact, Svelte, Solid, Lit, Angular i Vanilla JS.
MUO Vídeo del dia DESPLACEU PER CONTINUAR AMB EL CONTINGUT
Aprèn a gestionar l'estat dins d'un projecte Astro. Seguiu passos senzills per crear una aplicació bàsica de presa de notes que utilitzi Nano Stores per a la gestió de l'estat i comparteixi el seu estat entre un component React i Solid.js.
com posar l'iPhone 8 en mode de recuperació
Què és Astro?
El marc Astro us permet crear aplicacions web a sobre dels marcs d'interfície d'usuari populars com React, Preact, Vue o Svelte. El marc utilitza a arquitectura basada en components , de manera que cada pàgina d'Astro consta de diversos components.
Per accelerar el temps de càrrega de la pàgina, el marc minimitza l'ús de JavaScript del costat del client i prerenderitza les pàgines al servidor.
Astro va ser dissenyat per ser l'eina ideal per publicar llocs web centrats en contingut. Penseu en blocs, pàgines de destinació, llocs web de notícies i altres pàgines que se centren en el contingut per sobre de la interactivitat. Per als components que marqueu com a interactius, el marc només enviarà el JavaScript mínim necessari per habilitar aquesta interactivitat.
Instal·lació i Configuració
Si ja teniu un projecte Astro en funcionament, ometeu aquesta secció.
Però si no teniu cap projecte Astro, haureu de crear-ne un. L'únic requisit per a això és tenir Node.js instal·lat a la vostra màquina de desenvolupament local.
Per crear un projecte Astro nou, inicieu el vostre indicador d'ordres, cd al directori en què voleu crear el vostre projecte i, a continuació, executeu l'ordre següent:
npm create astro@latest
Respon 'y' per instal·lar Astro i proporcioneu un nom per al nom de la carpeta del vostre projecte. Podeu consultar Astro's tutorial oficial de configuració si estàs atrapat pel camí.
Un cop hàgiu acabat de crear el projecte, seguiu-ho amb l'ordre següent (això afegeix React al projecte):
npx astro add react
Finalment, instal·leu Nano Stores per a React executant l'ordre següent:
npm i nanostores @nanostores/react
Encara al vostre terminal, aneu a la carpeta arrel del projecte i inicieu l'aplicació amb qualsevol de les ordres següents (segons quina d'elles utilitzeu):
npm run dev
O:
yarn run dev
O:
pnpm run dev
Anar a http://localhost:3000 al vostre navegador web per veure una vista prèvia del vostre lloc web.
Amb el vostre projecte Astro configurat, el següent pas és crear una botiga per a les dades de l'aplicació.
Creació de la botiga de notes
Creeu un fitxer anomenat noteStore.js fitxer dins del /src directori a l'arrel de la vostra aplicació. Dins d'aquest fitxer, utilitzeu àtom () funció des de nanobotigues per crear una botiga de notes:
aplicació per provar diferents colors de cabell
import { atom } from "nanostores"
export const notes = atom([])
export function addNote(note) {
notes.set([...notes.get(), note])
console.log("Added note: ", note.get())
}
El afegir nota() La funció pren una nota com a argument i l'emmagatzema dins de la botiga de notes. Utilitza l'operador de propagació quan emmagatzema la nota per evitar la mutació de dades. L'operador de propagació és a Abreviatura de JavaScript per copiar objectes.
Creació de la interfície d'usuari de l'aplicació per prendre notes
La interfície d'usuari consistirà simplement en una entrada per recollir la nota i un botó que, en fer clic, afegeix la nota a la botiga.
Dins del src/components directori, creeu un fitxer nou anomenat NoteAddButton.jsx . A continuació, enganxeu el codi següent dins del fitxer:
import {useState} from "react"
import {addNote, notes} from "../noteStore"
export default function NoteAdder() {
const [userNote, setUserNote] = useState('')
return(
<>
<label htmlFor="note">Add a note: </label>
<input type="text" name="note" id="note"
onChange={(event) => setUserNote(event.target.value)} />
<button onClick={() => addNote(userNote)}>Add</button>
<ul>
{
$notes.map((note, index) => {
<li key={index}>{note}</li>
})
}
</ul>
</>
)
}
Aquest codi afegeix la nota a l'estat del component mentre escriviu a l'entrada. Aleshores, quan feu clic al botó, desa la nota a la botiga. També agafa les notes de la botiga i les mostra dins d'una llista no ordenada. Amb aquest enfocament, la nota apareixerà a la pàgina immediatament després de fer clic a Desa botó.
Ara al teu pàgines/índex.astro fitxer, cal importar NoteAddButton i utilitzar-lo dins de
import NoteAddButton from "../components/NoteAddButton.jsx"
---
<Layout title="Welcome to Astro.">
<main>
<NoteAddButton client:load />
</main>
</Layout>
// Other code
Si ara torneu al vostre navegador, trobareu l'element d'entrada i el botó representats a la pàgina. Escriviu alguna cosa a l'entrada i feu clic a Desa botó. La nota apareixerà immediatament a la pàgina i persistirà a la pàgina fins i tot després d'actualitzar el navegador.
Compartint l'estat entre dos marcs
Suposem que voleu compartir l'estat entre React i Solid.js. El primer que heu de fer és afegir Solid al vostre projecte executant l'ordre següent:
npx astro add solid
A continuació, afegiu les Nano Stores per a solid.js executant:
npm i nanostores @nanostores/solid
Per crear la interfície d'usuari a solid.js, aneu dins del fitxer src/components directori i creeu un fitxer nou anomenat Notes.js. Obriu el fitxer i creeu el component Notes dins d'ell:
import {useStore} from "@nanostores/solid"
import {notes} from "../noteStore"
import {For} from "solid-js"
export default function Notes() {
const $notes = useStore(notes)
return(
<>
<h1>My notes</h1>
<ul>
<For each={notes()} />
{(note) => <li>{note}</li>}
</For>
</ul>
</>
)
}
En aquest fitxer, importeu les notes de la botiga, feu un bucle per cadascuna de les notes i les mostreu a la pàgina.
Per mostrar l'anterior Nota component creat amb Solid.js, simplement aneu al vostre pàgines/índex.astro fitxer, importar NoteAddButton i utilitzar-lo dins de
com afegir una drecera a l'iPhone
import NodeAddButton from "../components/NoteAddButton.jsx"
import Nodes from "../components/Notes.jsx"
---
<Layout title="Welcome to Astro.">
<main>
<NoteAddButton client:load />
<Notes client:load />
</main>
</Layout>
// Other code
Ara torneu al vostre navegador, escriviu alguna cosa a l'entrada i feu clic a Desa botó. La nota apareixerà a la pàgina i també es mantindrà entre renderitzacions.
Altres novetats d'Astro
Amb aquestes tècniques, podeu gestionar l'estat dins de la vostra aplicació Astro i compartir-lo entre components i marcs. Però Astro té moltes altres funcions útils, com ara la recollida de dades, la minificació HTML i la representació paral·lelitzada.