AstroJS 101: Build Blazing Fast Frontends!

سرفصل های دوره

Get Started with Astro and Unlock the Power to Build Ultra-Fast Frontends with Multiple Frameworks in One.

1. Build your first Astro Application

1.1 Understanding Astro (Download Ebooks - PDFEpub).html

1.2 Understanding Astro (Read online on Github).html

1. (Extra) PDF Understanding Astro (500+ Page Practical Book to Master Astro).html

2.1 Read the entire section transcript online.html

2.2 The Completed Project Source Code.html

2. Project overview

3.1 Astro editor setup for other code editors.html

3.2 Download NodeJS.html

3. Installing NodeJS and Setting up your Code Editor

4. The Astro Install Wizard

5. Understanding the Astro Project Structure

6. Introduction to Astro Pages

7. The Anatomy of an Astro Component

8. Astro Component Styles

9. Reusable Page Layouts

10. Capitalising component names

11. A Test on What Youve Learned So Far.html

12. The global style directive

13. Custom fonts and global CSS

14. Independent Astro components

15. Adding interactive scripts to Astro components

16. Adding an Interactive theme toggle

17. The global() selector

18. Event Handling

19. Theming via CSS variables

20. Accessing global client objects

21. The magic of scripts

22. A Test on What Youve Learned So Far.html

23. Leveraging inline scripts

24. Beware of Global Selectors in Scripts

25. Using Markdown for Pages

26. How to Navigate between Astro Pages

27. Uniformity via Markdown Layouts

28. Composing Layouts in Astro

29. Astro Component Props

30.1 Markdown Page Images (find images with the same name).html

30. Leveraging Markdown Frontmatter Properties

31. Interactive Navigation State with Astro Scripts

32. Composing Astro Components

33. A Test on What Youve Learned So Far.html

34. Complete Component Card Navigation

35. Astros Template Flow of Data

36. The Dark Side of definevars

37. How to Load Multiple Files in Astro - Part 1

38.1 The Completed Project Source Code.html

38. How to Load Multiple Files in Astro - Part 2

39. A Test on What Youve Learned So Far.html

40. Deploying a static Astro site.html

41.1 The Completed Project Source Code.html

41. How Fast is Our Astro Website Shocker!!!

2. Astro Components In-depth

1.1 Read the entire section transcript online.html

1. Introduction

2. The Javascript Runtime Fatigue

3. Ditching the Javascript Runtime

4. What is an Astro Component - Part 1

5. Manual Astro Installation and Rendering HTML

6. The Bliss of Composability

7. The Root Element and Local Styles in Compositions

8. Hoisting the Head Element

9. Revisiting the Component Script Section

10. Fetching Data in Astro

11. Revisiting the Component Template Section

12. Dynamic Tags in Astro

13. The Magic of Slots in Astro

14. Similarities and Differences to JSX

15. What is an Astro Component Conclusion

3. Build Your Own Component Island

1.1 Final Component Island Implementation (Annotated Source Code).html

1.2 Read the entire section transcript online.html

1. Introduction

2. A Brief History of how we Got Here

3. The Basics of Client-Side Rendering (CSR)

4. The PROs and CONs of Client-Side Rendering

5. The Basics of Server-Side Rendering (SSR)

6. The PROs and CONs of Server-Side Rendering (SSR)

7. Server-Side Rendering with Client-Side Hydration

8. The Pros of Server-Side Rendering With Client-Side Hydration

9. Partial Hydration for the Win

10. Where do Component Islands Come From

11. Objectives and API Design

12. Getting Started with Mini-island

13. The Content Template element

14. Hydration Implementation

15. Partial Hydration Implementation - Part 1

16. Partial Hydration Implementation - Part 2

17. Clientvisible Lazy Hydration Implementation

18. Clientmedia Lazy Hydration Implementation

19. Vue Framework Support (Mini-island)

20. Preact Framework Usage (Mini-island)

21.1 Final Component Island Implementation (Annotated Source Code).html

21. Conclusion

4. The Secret Life of Astro Component Islands

1.1 Read the entire section transcript online.html

1. Introduction

2. When Should you Use a Framework Component

3.1 The Starter Template.html

3. Step 1 Build an Astro site

4. Step 2 Install the Framework Integration

5. Steps 3 & 4 Write and Render the Framework Component

6. Getting Started with Responsible Hydration

7. The Clientload Directive

8. The Clientonly Directive

9. The Clientidle Directive

10. The Clientvisible Directive

11. The Clientmedia Directive

12. Using Multiple Frameworks in Astro

13.1 Signals from Preact.html

13.2 Signia from tldraw.html

13.3 Solid signals.html

13.4 Sveltes stores.html

13.5 Vues reactivity API.html

13. Sharing State between Component Islands

14. Handling Props (and Children) in Framework Components

15. Using Multiple Slots in Framework Components

16. Nested Framework Components

17. Astro Island Gotchas

18. Conclusion - Why islands

5. Conclusion

1. Thank you, and Goodbye (for now).html

139,000 تومان

خرید اشتراک افزودن به سبد خرید

خرید دانلودی فوری

در این روش نیاز به افزودن محصول به سبد خرید و تکمیل اطلاعات نیست و شما پس از وارد کردن ایمیل خود و طی کردن مراحل پرداخت لینک های دریافت محصولات را در ایمیل خود دریافت خواهید کرد.

تولید کننده: Udemy