Home-theater-designers
Al crear una aplicación con el marco Astro, es posible que se pregunte cómo administrar el estado de la aplicación o compartirla entre componentes y marcos. Nano Stores es uno de los mejores administradores estatales de Astro, gracias a que funciona con React, Preact, Svelte, Solid, Lit, Angular y Vanilla JS.
MUO Vídeo del día DESPLÁCETE PARA CONTINUAR CON EL CONTENIDO
Aprenda a gestionar el estado dentro de un proyecto Astro. Siga pasos sencillos para crear una aplicación básica para tomar notas que utilice Nano Stores para la gestión del estado y comparta su estado entre un componente React y Solid.js.
¿Qué es Astro?
El marco Astro le permite crear aplicaciones web sobre marcos de interfaz de usuario populares como React, Preact, Vue o Svelte. El marco utiliza un arquitectura basada en componentes , por lo que cada página de Astro consta de varios componentes.
Para acelerar el tiempo de carga de la página, el marco minimiza el uso de JavaScript del lado del cliente y, en su lugar, preprocesa las páginas en el servidor.
Astro fue diseñado para ser la herramienta ideal para publicar sitios web centrados en contenido. Piense en blogs, páginas de destino, sitios web de noticias y otras páginas que se centran en el contenido más que en la interactividad. Para los componentes que marque como interactivos, el marco solo enviará el JavaScript mínimo necesario para habilitar esa interactividad.
Instalación y configuración
Si ya tienes un proyecto Astro en funcionamiento, omite esta sección.
Pero si no tienes un proyecto Astro, necesitarás crear uno. El único requisito para ello es tener Nodo.js instalado en su máquina de desarrollo local.
Para crear un nuevo proyecto Astro, inicie el símbolo del sistema, cd en el directorio desea crear su proyecto, luego ejecute el siguiente comando:
npm create astro@latest
Responda 'y' para instalar Astro y proporcione un nombre para la carpeta de su proyecto. Puedes consultar Astro's tutorial de configuración oficial si estás atrapado en el camino.
Una vez que haya terminado de crear el proyecto, continúe con el siguiente comando (esto agrega React al proyecto):
npx astro add react
Finalmente, instale Nano Stores para React ejecutando el siguiente comando:
npm i nanostores @nanostores/react
Aún en su terminal, acceda a la carpeta raíz del proyecto e inicie la aplicación con cualquiera de los siguientes comandos (dependiendo de cuál de ellos esté usando):
npm run dev
O:
yarn run dev
O:
la mejor manera de copiar un DVD
pnpm run dev
Ir a http://localhost:3000 en su navegador web para ver una vista previa de su sitio web.
Con su proyecto Astro configurado, el siguiente paso es crear un almacén para los datos de la aplicación.
Creando la tienda de notas
Crea un archivo llamado notaStore.js archivo dentro del /fuente directorio en la raíz de su aplicación. Dentro de este archivo, use el átomo() función de nanotiendas para crear una tienda de notas:
import { atom } from "nanostores"
export const notes = atom([])
export function addNote(note) {
notes.set([...notes.get(), note])
console.log("Added note: ", note.get())
}
El añadir la nota() La función toma una nota como argumento y la almacena dentro del almacén de notas. Utiliza el operador de extensión al almacenar la nota para evitar la mutación de datos. El operador de diferencial es un taquigrafía de JavaScript para copiar objetos.
Crear la interfaz de usuario de la aplicación para tomar notas
La interfaz de usuario simplemente consistirá en una entrada para recopilar la nota y un botón que, al hacer clic, agrega la nota a la tienda.
Dentro de origen/componentes directorio, cree un nuevo archivo llamado NotaAddButton.jsx . A continuación, pegue el siguiente código dentro del archivo:
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>
</>
)
}
Este código agrega la nota al estado del componente a medida que escribe en la entrada. Luego, cuando haces clic en el botón, guarda la nota en la tienda. También toma las notas de la tienda y las muestra dentro de una lista desordenada. Con este enfoque, la nota aparecerá en la página inmediatamente después de hacer clic en el Ahorrar botón.
Ahora en tu páginas/index.astro archivo, necesitas importar NotaAñadirBotón y utilizarlo dentro del
import NoteAddButton from "../components/NoteAddButton.jsx"
---
<Layout title="Welcome to Astro.">
<main>
<NoteAddButton client:load />
</main>
</Layout>
// Other code
Si ahora regresa a su navegador, encontrará el elemento de entrada y el botón representados en la página. Escriba algo en la entrada y haga clic en el Ahorrar botón. La nota aparecerá inmediatamente en la página y persistirá en la página incluso después de que actualice su navegador.
Compartir estado entre dos marcos
Supongamos que desea compartir el estado entre React y Solid.js. Lo primero que debes hacer es agregar Solid a tu proyecto ejecutando el siguiente comando:
npx astro add solid
A continuación, agregue Nano Stores para solid.js ejecutando:
npm i nanostores @nanostores/solid
Para crear la interfaz de usuario en solid.js, ingrese al origen/componentes directorio y cree un nuevo archivo llamado Notas.js. Abra el archivo y cree el componente de Notas dentro de él:
¿C ++ todavía se usa?
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 este archivo, importa las notas de la tienda, recorre cada una de las notas y las muestra en la página.
Para mostrar lo anterior Nota componente creado con Solid.js, simplemente vaya a su páginas/index.astro archivo, importar NotaAñadirBotón y utilizarlo dentro del
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
Ahora regrese a su navegador, escriba algo en la entrada y haga clic en el Ahorrar botón. La nota aparecerá en la página y también persistirá entre renderizaciones.
Otras características nuevas de Astro
Con estas técnicas, puede administrar el estado dentro de su aplicación Astro y compartirlo entre componentes y marcos. Pero Astro tiene muchas otras funciones útiles, como recopilación de datos, minificación de HTML y renderizado en paralelo.