Astro çerçevesiyle bir uygulama oluştururken, uygulama durumunu nasıl yöneteceğinizi veya bileşenler ve çerçeveler arasında nasıl paylaşacağınızı merak ediyor olabilirsiniz. Nano Stores, React, Preact, Svelte, Solid, Lit, Angular ve Vanilla JS ile çalışması sayesinde Astro için en iyi durum yöneticilerinden biridir.

Bir Astro projesi dahilinde durumu nasıl yöneteceğinizi öğrenin. Durum yönetimi için Nano Mağazaları kullanan ve durumunu React ile Solid.js bileşeni arasında paylaşan temel bir not alma uygulaması oluşturmak için basit adımları izleyin.

Astro Nedir?

Astro çerçevesi, React, Preact, Vue veya Svelte gibi popüler UI çerçevelerinin üzerinde web uygulamaları oluşturmanıza olanak tanır. Çerçeve şunu kullanır: bileşen tabanlı mimariyani Astro'daki her sayfa birkaç bileşenden oluşur.

Sayfa yükleme süresini hızlandırmak için çerçeve, istemci tarafı JavaScript kullanımını en aza indirir ve bunun yerine sayfaları sunucuda önceden oluşturur.

Astro, içerik odaklı web siteleri yayınlamak için ideal bir araç olacak şekilde tasarlandı. Etkileşim yerine içeriğe odaklanan blogları, açılış sayfalarını, haber web sitelerini ve diğer sayfaları düşünün. Etkileşimli olarak işaretlediğiniz bileşenler için çerçeve yalnızca bu etkileşimi etkinleştirmek için gereken minimum JavaScript miktarını gönderecektir.

Kurulum ve Kurulum

Halihazırda çalışır durumda olan bir Astro projeniz varsa bu bölümü atlayın.

Ancak bir Astro projeniz yoksa bir tane oluşturmanız gerekecektir. Bunun için tek şart sahip olmak Node.js yerel geliştirme makinenize kurulu.

Yepyeni bir Astro projesi oluşturmak için komut isteminizi başlatın, dizine cd koy projenizi oluşturmak istediğinizde aşağıdaki komutu çalıştırın:

npm create astro@latest

Astro'yu yüklemek ve projenizin klasör adı için bir ad sağlamak için "y" yanıtını verin. Astro'ya başvurabilirsiniz. resmi kurulum eğitimi eğer yolda takılıp kalırsanız.

Projeyi oluşturmayı bitirdikten sonra aşağıdaki komutu uygulayın (bu, projeye React'ı ekler):

npx astro add react

Son olarak aşağıdaki komutu çalıştırarak React için Nano Stores'u yükleyin:

npm i nanostores @nanostores/react

Hala terminalinizde, projenin kök klasörüne cd yazın ve aşağıdaki komutlardan herhangi birini kullanarak uygulamayı başlatın (hangisini kullandığınıza bağlı olarak):

npm run dev

Veya:

yarn run dev

Veya:

pnpm run dev

Git http://localhost: 3000 Web sitenizin önizlemesini görmek için web tarayıcınızda.

Astro projenizin kurulumu tamamlandıktan sonraki adım, uygulama verileri için bir depo oluşturmaktır.

Not Deposu Oluşturma

Adlı bir dosya oluşturun noteStore.js içindeki dosya /src uygulamanızın kökündeki dizin. Bu dosyanın içinde şunu kullanın: atom() işlev nano depolar bir not deposu oluşturmak için:

import { atom } from"nanostores"
exportconst notes = atom([])
exportfunctionaddNote(note) {
 notes.set([...notes.get(), note])
console.log("Added note: ", note.get())
}

bu not ekle() işlev bir notu argüman olarak alır ve onu not deposunda saklar. Veri mutasyonunu önlemek için notu saklarken yayılma operatörünü kullanır. Yayılma operatörü bir JavaScript kısaltması nesneleri kopyalamak için.

Not Alma Uygulamasının Kullanıcı Arayüzünü Oluşturma

Kullanıcı arayüzü, notu toplamak için bir giriş ve tıklandığında notu mağazaya ekleyen bir düğmeden oluşacaktır.

İçinde kaynak/bileşenler dizini adında yeni bir dosya oluşturun NoteAddButton.jsx. Daha sonra aşağıdaki kodu dosyanın içine yapıştırın:

import {useState} from"react"
import {addNote, notes} from"../noteStore"
exportdefaultfunctionNoteAdder() {
const [userNote, setUserNote] = useState('')
return(
 <>
"note">Add a note: </label>
"text" name="note" id="note"
 onChange={(event) => setUserNote(event.target.value)} />
 addNote(userNote)}>Add</button>


 {
 $notes.map((note, index) => {
{note}</li>
 })
 } 
 </ul>
 </>
 )
}

Bu kod, siz girdiye yazarken notu bileşenin durumuna ekler. Daha sonra butona tıkladığınızda notu mağazaya kaydeder. Ayrıca mağazadaki notları alır ve bunları sırasız bir listede görüntüler. Bu yaklaşımla not, tıklamanın hemen ardından sayfada görünecektir. Kaydetmek düğme.

Şimdi senin sayfalar/index.astro dosyayı içe aktarmanız gerekiyor NotEkleDüğmesi ve bunu içinde kullanın Etiketler:

import NoteAddButton from"../components/NoteAddButton.jsx"

"Welcome to Astro.">


 </main>
</Layout>
// Other code

Şimdi tarayıcınıza geri dönerseniz sayfada görüntülenen giriş öğesini ve düğmeyi bulacaksınız. Girişe bir şey yazın ve Kaydetmek düğme. Not hemen sayfada görünecek ve tarayıcınızı yeniledikten sonra bile sayfada kalmaya devam edecektir.

İki Çerçeve Arasında Durumu Paylaşma

Durumu React ve Solid.js arasında paylaşmak istediğinizi varsayalım. Yapmanız gereken ilk şey aşağıdaki komutu çalıştırarak projenize Solid'i eklemektir:

npx astro add solid

Ardından, aşağıdakileri çalıştırarak Solid.js için Nano Mağazaları ekleyin:

npm i nanostores @nanostores/solid

Solid.js'de kullanıcı arayüzü oluşturmak için kaynak/bileşenler dizini açın ve adında yeni bir dosya oluşturun. Notes.js. Dosyayı açın ve içinde Notes bileşenini oluşturun:

import {useStore} from"@nanostores/solid"
import {notes} from"../noteStore"
import {For} from"solid-js"
exportdefaultfunctionNotes() {
const $notes = useStore(notes)
return(
 <>
My notes</h1>



 {(note) => <li>{note}li>}
 </For>
 </ul> 
 </>
 )
}

Bu dosyada notları mağazadan içe aktarır, notların her biri arasında geçiş yapar ve bunları sayfada görüntülersiniz.

Yukarıdakileri göstermek için Not Solid.js ile oluşturulan bileşen için basitçe sayfalar/index.astro dosya, içe aktarma NotEkleDüğmesi ve bunu içinde kullanın Etiketler:

import NodeAddButton from"../components/NoteAddButton.jsx"
import Nodes from"../components/Notes.jsx"

"Welcome to Astro.">



 </main>
</Layout>
// Other code

Şimdi tarayıcınıza geri dönün, girişe bir şeyler yazın ve Kaydetmek düğme. Not sayfada görünecek ve oluşturma işlemleri arasında da kalacaktır.

Astro'nun Diğer Yeni Özellikleri

Bu teknikleri kullanarak Astro uygulamanızın içindeki durumu yönetebilir ve bunu bileşenler ve çerçeveler arasında paylaşabilirsiniz. Ancak Astro'nun veri toplama, HTML küçültme ve paralelleştirilmiş görüntü oluşturma gibi birçok kullanışlı özelliği daha vardır.