Przejdź do głównej zawartości

Spróbujmy z Astro!

notatka

Spróbujemy teraz zaimplemntować komponent Link w projekcie opartym o Astro

Nowy projekt Astro​

Generujemy strukturę projektu​

pnpm create astro@latest

Wybory podjęte podczas generowania

Astro CLI

Zapoznajmy się ze strukturą folderów w projekcie​

  • astro.config.mjs - plik, w którym znajduje się konfiguracja Astro
  • src/components - folder na reużywalne komponenty
  • src/layouts- folder na layouty stron, tu znajdują się pliki zawierające tagi <head></head> i <body></body>
  • src/pages - folder na strony (osobne ściezki w routingu)

Instalujemy i importujemy Bootstrap'a jak poprzednio​

pnpm i bootstrap@5.3.3
  • Dodajemy import do pliku src/layouts/Layout.astro
---
import 'bootstrap/dist/css/bootstrap.css'

O nie, i wszystko od początku...​

Strassburger

wskazówka

Dzięki integracjom Astro możemy wykorzystać komponenty Reactowe w naszym kodzie!

Instalcja integracji z React​

pnpm astro add react
wskazówka

Astro informuje nas o wszystkich zmianach, których dokonuje w projekcie w z wiązku z integracją.

Przeniesienie kodu z projektu React'owego​

  • Kopiujemy src/components/Link.tsx do takiego samego katalogu w projekcie Astro
  • Kopiujemy strukturę JSX z src/App.tsx do src/pages/index.Astro oraz dodajemy kilka smaczków 😉
<Layout title="Home page">
  <div class="row">
    <div class="col min-vh-100 text-center pt-5">
      <div class="col-lg-6 mx-auto">
        <img src="/favicon.svg" height="256"/>
        <p class="lead mb-4">
          Talk4Devs is the coolest IT Event in the world. 
          But you probably know that already... 😉
        </p>
      </div>
      <Link url="https://talk4devs.j-labs.pl/" text="Talk4Devs" primary />
      <Link url="https://www.j-labs.pl/" text="J-Labs" />
    </div>
  </div>
</Layout>
  • Dodajemy strukturę HTML do pliku /src/layouts/Layout.astro dla lepszej oprawy wizualnej
<main transition:animate="slide" class="container pt-5 min-vh-100">
  <slot />
</main>
  • Odpalamy build, aby sprawdzić jakie są rezultaty co do rozmiaru naszej strony
pnpm build && pnpm preview
  • Astro nie załączyło żadnego JavaScript'u mimo, że użyliśmy komponentów z React'a. Rozmiar strony to 33.4kB przy tej samej funkcjonalności. Astro Build Size

Jak to się stało?​

informacja

Przy komponentach niezawierających żadnej logiki, astro kompiluje je do czystego kodu HTML.

warning

Skoro nie ma Javascript'u to nie ma też VirtualDOM. Jak myślicie, czy to dobrze, czy nie?