Penjelasan Singkat Apa itu Astro? Dan Cara install dan Membuat Hero

Apa itu Framework Astro JS?

Framework Astro adalah sebuah platform yang mempermudah Anda dalam membangun situs web dengan performa tinggi, ukuran kecil, dan penggunaan JavaScript yang minimal di sisi klien. Dalam artikel ini, kita akan menjelaskan apa itu Astro dan bagaimana cara kerjanya.

Astro platform yang sangat efisien untuk membangun situs web yang cepat dan ringan. Dengan dukungan untuk berbagai kerangka kerja front-end, kontrol hidrasi yang fleksibel, dan integrasi yang mudah dengan Markdown dan TypeScript, Astro menjadi pilihan yang menarik bagi pengembang web modern.

Poin-Poin Utama Tentang Astro:

1. Situs Web yang Lebih Cepat dan Kecil

• Astro memungkinkan Anda untuk membangun situs web yang lebih cepat dengan mengirimkan jumlah JavaScript paling sedikit ke sisi klien.
• Ini sangat bermanfaat untuk meningkatkan kecepatan muat situs dan mengurangi waktu respons.

2. Penjelasan File .astro

• Saat menulis di Astro, Anda biasanya menggunakan file dengan ekstensi .astro.
• File ini menggabungkan berbagai konsep seperti penyiapan data di sisi server dan template HTML dan CSS yang dihasilkan secara statis.

3. Dukungan Kerangka Kerja Front-End

• Astro mendukung berbagai kerangka kerja front-end seperti React, Vue, Svelte, Solid, dan lainnya.
• Ini mempermudah integrasi komponen interaktif di situs web Anda tanpa perlu menulis banyak kode JavaScript di sisi klien.

4. Kontrol Hidrasi

• Astro memungkinkan Anda untuk mengontrol kapan dan bagaimana JavaScript di sisi klien dihidrasikan (dieksekusi).
• Anda bisa memilih untuk menghidrasi komponen saat halaman dimuat, saat benang utama bebas, setelah elemen masuk ke viewport, atau berdasarkan kondisi tertentu lainnya.

5. Integrasi Markdown dan TypeScript

• Astro memiliki dukungan bawaan untuk Markdown, memungkinkan Anda untuk dengan mudah membuat halaman dengan konten Markdown.
• TypeScript juga didukung tanpa perlu konfigurasi tambahan, membuat pengembangan menjadi lebih mudah dan terstruktur.

6.Plugin dan Fitur Tambahan

Astro menyediakan berbagai plugin untuk memperluas fungsionalitasnya.

• Beberapa fitur tambahan yang didukung termasuk penggunaan SASS untuk pengelolaan gaya, dan berbagai plugin untuk Markdown.

Cara Install Framework Astro Js

Langsung saja buka Terminal

where should we you new project? Boncafe-landing-page (berikut nama project yang anda buat contoh: boncafe-landing-page)

do you plan to write Typescript? Yes (Apakah kamu menulis code Typescript)

how to strict should typescript be? Strict (recommended) (strict mode diaktifkan, beberapa opsi kompilator TypeScript yang meningkatkan keamanan dan keandalan kode akan diaktifkan)

How would you like to start your new project? Include sample files (recommends) (pilih isi project baru)

install dependencies? Yes (Menginstall dependencies berarti menginstal semua pustaka, modul, atau paket yang dibutuhkan oleh suatu proyek untuk berjalan dengan benar.)

Initialize a new git repository? (optional) (jika project Anda memungkinkan Anda melacak perubahan dan mengatur versi dan kolaborasi dengan orang lain pilih bebas bisa ya atau tidak)

Intergrasi Framework Tailwind

Menambahkan framework css Tailwind ke folder “Boncafe-landing-page”

Jalankan Terminal:

Penjelasan

“cd boncafe-landing-page” menuju folder boncafe-landing-page

“npx astro add tailwind” menambahkan Framework Tailwind

“npm run dev” memulai menjalankan pengembangan code

jika sudah coba http://localhost:4321/  buka browser dan hasil seperti ini

Coding Hero Pada Astro Js

pada file Src/pages/index.astro

Kita menghapus semua style code 66 sampai 123

Dan hapus code isi dari main code 8 sampai 62

Hasil seperti ini:

Jika sudah kita akan membuat component Hero pada folder ”Src/components/Hero.astro”

bg-[url(‘/images/hero-cafe-image.jpg’)] : berikut adalah gambar yang ada di folder public/images/hero-café-image.jpg

Jika sudah kita akan ubah import component card ke Hero

tambahkan Hero dalam main