Saat membangun aplikasi dengan kerangka Astro, Anda mungkin bertanya-tanya bagaimana cara mengelola status aplikasi atau membaginya antar komponen dan kerangka kerja. Nano Stores adalah salah satu pengelola status terbaik untuk Astro, berkat fakta bahwa ia bekerja dengan React, Preact, Svelte, Solid, Lit, Angular, dan Vanilla JS.

Pelajari cara mengelola negara dalam proyek Astro. Ikuti langkah-langkah sederhana untuk membuat aplikasi pencatatan dasar yang menggunakan Nano Stores untuk pengelolaan status dan membagikan statusnya antara komponen React dan Solid.js.

Apa itu Astro?

Kerangka kerja Astro memungkinkan Anda membuat aplikasi web di atas kerangka UI populer seperti React, Preact, Vue, atau Svelte. Kerangka ini menggunakan a arsitektur berbasis komponen, jadi setiap halaman di Astro terdiri dari beberapa komponen.

Untuk mempercepat waktu buka halaman, framework ini meminimalkan penggunaan JavaScript sisi klien dan melakukan pra-render halaman di server.

Astro dirancang untuk menjadi alat yang ideal untuk menerbitkan situs web yang berfokus pada konten. Bayangkan blog, halaman arahan, situs berita, dan halaman lain yang berfokus pada konten daripada interaktivitas. Untuk komponen yang Anda tandai sebagai interaktif, kerangka kerja hanya akan mengirimkan JavaScript minimal yang diperlukan untuk mengaktifkan interaktivitas tersebut.

Instalasi dan Pengaturan

Jika Anda sudah menjalankan proyek Astro, lewati bagian ini.

Namun jika Anda tidak memiliki proyek Astro, Anda harus membuatnya. Satu-satunya persyaratan untuk ini adalah memiliki Node.js diinstal pada mesin pengembangan lokal Anda.

Untuk membuat proyek Astro baru, luncurkan command prompt Anda, cd ke dalam direktori Anda ingin membuat proyek, lalu jalankan perintah berikut:

npm create astro@latest

Balas "y" untuk menginstal Astro dan berikan nama untuk nama folder proyek Anda. Anda bisa merujuk ke Astro tutorial pengaturan resmi jika Anda terjebak di tengah jalan.

Setelah Anda selesai membuat proyek, lanjutkan dengan perintah berikut (ini menambahkan React ke proyek):

npx astro add react

Terakhir, instal Nano Stores for React dengan menjalankan perintah berikut:

npm i nanostores @nanostores/react

Masih di terminal Anda, cd ke folder root proyek dan mulai aplikasi dengan salah satu perintah berikut (tergantung perintah mana yang Anda gunakan):

npm run dev

Atau:

yarn run dev

Atau:

pnpm run dev

Pergi ke http://localhost: 3000 di browser web Anda untuk melihat pratinjau situs web Anda.

Setelah proyek Astro Anda siap, langkah selanjutnya adalah membuat penyimpanan untuk data aplikasi.

Membuat Penyimpanan Catatan

Buat file bernama noteStore.js file di dalam /src direktori di root aplikasi Anda. Di dalam file ini, gunakan atom() berfungsi dari toko nano untuk membuat penyimpanan catatan:

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

Itu menambahkan catatan() fungsi mengambil catatan sebagai argumennya dan menyimpannya di dalam penyimpanan catatan. Ia menggunakan operator spread saat menyimpan catatan untuk menghindari mutasi data. Operator penyebarannya adalah a Singkatan JavaScript untuk menyalin objek.

Membuat UI Aplikasi Pencatat

UI hanya akan terdiri dari input untuk mengumpulkan catatan dan tombol yang, ketika diklik, akan menambahkan catatan ke penyimpanan.

Di dalam src/komponen direktori, buat file baru bernama CatatanAddButton.jsx. Selanjutnya, paste kode berikut di dalam file:

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>
 </>
 )
}

Kode ini menambahkan catatan ke status komponen saat Anda mengetikkan input. Kemudian, ketika Anda mengklik tombol tersebut, catatan tersebut akan disimpan ke toko. Itu juga mengambil catatan dari toko dan menampilkannya di dalam daftar tidak berurutan. Dengan pendekatan ini, catatan akan muncul di halaman segera setelah mengklik Menyimpan tombol.

Sekarang di milikmu halaman/index.astro file, Anda perlu mengimpor CatatanTambahkanTombol dan menggunakannya di dalam tag:

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

"Welcome to Astro.">


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

Jika sekarang Anda kembali ke browser Anda, Anda akan menemukan elemen input dan tombol yang dirender di halaman. Ketik sesuatu ke dalam input dan klik Menyimpan tombol. Catatan tersebut akan segera muncul di halaman dan tetap ada di halaman bahkan setelah Anda me-refresh browser Anda.

Berbagi Status Antara Dua Kerangka

Katakanlah Anda ingin berbagi status antara React dan Solid.js. Hal pertama yang perlu Anda lakukan adalah menambahkan Solid ke proyek Anda dengan menjalankan perintah berikut:

npx astro add solid

Selanjutnya, tambahkan Nano Stores untuk solid.js dengan menjalankan:

npm i nanostores @nanostores/solid

Untuk membuat UI di solid.js, masuk ke dalam src/komponen direktori dan buat file baru bernama Catatan.js. Buka file dan buat komponen Notes di dalamnya:

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> 
 </>
 )
}

Dalam file ini, Anda mengimpor catatan dari toko, menelusuri setiap catatan dan menampilkannya di halaman.

Untuk menunjukkan hal di atas Catatan komponen yang dibuat dengan Solid.js, cukup buka halaman/index.astro file, impor CatatanTambahkanTombol dan menggunakannya di dalam tag:

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

"Welcome to Astro.">



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

Sekarang kembali ke browser Anda, ketik sesuatu ke dalam input, dan klik Menyimpan tombol. Catatan tersebut akan muncul di halaman dan juga tetap ada di antara render.

Fitur Baru Astro lainnya

Dengan menggunakan teknik ini, Anda dapat mengelola status di dalam aplikasi Astro dan membaginya antar komponen dan kerangka kerja. Namun Astro memiliki banyak fitur berguna lainnya seperti pengumpulan data, minifikasi HTML, dan rendering paralel.