Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Đăng nhập
Xem tất cả kết quả
Menu
Đăng nhập Đăng ký miễn phí

AstroJS 101: Build Blazing Fast Frontends!

AstroJS 101: Xây Dựng Frontend Cực Nhanh!

AstroJS 101: Xây Dựng Frontend Cực Nhanh!

Bắt Đầu với Astro và Khai Phá Sức Mạnh Xây Dựng Frontend Siêu Tốc với Nhiều Framework Trong Một.

4.5
(234 đánh giá)
1,970 học viên
Giảng viên
Ohans Emmanuel
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
50.000đ 349.000đ -86%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
7.5 giờ video
92 bài giảng
4 bài quiz
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 30/05/2026
#Astro #Frontend Development #Javascript #Web Development

Bạn sẽ học được gì

Học cách sử dụng React, Preact, Svelte, Vue và hơn thế nữa trong ứng dụng Astro của bạn.
Hiểu về Component Islands: Kiến Trúc Web Hiện Đại để Xây Dựng Website Nhanh Hơn.
Xây Dựng Ứng Dụng Thực Tế, Hiện Đại.
Bắt Đầu với Astro: Một Trong Những Thư Viện Frontend Nhanh Nhất Hiện Nay.
Hiểu về Hydration Có Trách Nhiệm và Tại Sao Nó Quan Trọng.
Tìm Hiểu Cách Component Islands Hoạt Động trong Astro.
Hiểu Hành Vi của Markup, Styles và Scripts trong Astro Component.
Tìm Hiểu "Zero Javascript" Trong Thực Tế Có Nghĩa Là Gì.
Học Cú Pháp Template Mạnh Mẽ của Astro và Sự Khác Biệt với JSX.
Tự Tay Xây Dựng Component Islands Từ Đầu.

Yêu cầu

Bạn đã biết HTML, CSS và Javascript cơ bản
Bạn biết kiến thức cơ bản về Typescript, ví dụ: bạn biết types là gì

Đối tượng phù hợp

Nhà phát triển web muốn xây dựng website nội dung hiện đại
Kỹ sư Frontend (React, Vue, v.v.) muốn xây dựng website nhanh hơn nhiều

Nội dung khóa học

5 phần • 92 bài giảng
1 (Bổ sung) PDF: Hiểu về Astro (Sách Thực Hành 500+ Trang để Thành Thạo Astro)
2 Tổng quan dự án
3 Cài đặt NodeJS và Thiết lập Trình Soạn Thảo Mã
4 Trình Hướng Dẫn Cài Đặt Astro
5 Hiểu Cấu Trúc Dự Án Astro
6 Giới thiệu về Astro Pages
7 Cấu Trúc của một Astro Component
8 Styles trong Astro Component
9 Bố Cục Trang Có Thể Tái Sử Dụng
10 Viết hoa tên component
11 Chỉ thị style toàn cục
12 Phông chữ tùy chỉnh và CSS toàn cục
13 Astro components độc lập
14 Thêm script tương tác vào Astro components
15 Thêm nút chuyển đổi giao diện (theme) tương tác
16 Bộ chọn :global()
17 Xử lý sự kiện
18 Tùy chỉnh giao diện qua biến CSS
19 Truy cập đối tượng client toàn cục
20 Sức mạnh của scripts
21 Tận dụng script nội tuyến
22 Cẩn thận với Bộ Chọn Toàn Cục trong Scripts
23 Sử dụng Markdown cho Trang
24 Cách Điều Hướng giữa các Trang Astro
25 Tính nhất quán nhờ Bố Cục Markdown
26 Kết hợp Bố Cục trong Astro
27 Props của Astro Component
28 Tận dụng Thuộc Tính Frontmatter trong Markdown
29 Trạng thái điều hướng tương tác với Astro Scripts
30 Kết hợp các Astro Components
31 Hoàn thiện Điều Hướng Thẻ Component
32 Luồng Dữ Liệu Template trong Astro
33 Mặt tối của define:vars
34 Cách Tải Nhiều Tệp trong Astro - Phần 1
35 Cách Tải Nhiều Tệp trong Astro - Phần 2
36 Triển khai một trang Astro tĩnh
37 Website Astro của Chúng Ta Nhanh Cỡ Nào? Thật Bất Ngờ!!!
1 Giới thiệu
2 Sự mệt mỏi với Javascript Runtime
3 Loại bỏ Javascript Runtime
4 Astro Component là gì? - Phần 1
5 Cài đặt Astro Thủ Công và Render HTML
6 Sự tuyệt vời của tính Kết Hợp (Composability)
7 Phần tử Gốc và Styles Cục Bộ trong Kết Hợp
8 Đưa Phần Tử Head Lên Cao?
9 Xem lại Phần Script của Component
10 Lấy Dữ Liệu trong Astro
11 Xem lại Phần Template của Component
12 Thẻ Động trong Astro
13 Sức mạnh của Slots trong Astro
14 Điểm Tương Đồng và Khác Biệt với JSX
15 Astro Component là gì? Kết luận
1 Giới thiệu
2 Lược sử về Cách Chúng Ta Đến Đây
3 Kiến thức cơ bản về Client-Side Rendering (CSR)
4 Ưu và Nhược điểm của Client-Side Rendering
5 Kiến thức cơ bản về Server-Side Rendering (SSR)
6 Ưu và Nhược điểm của Server-Side Rendering (SSR)
7 Server-Side Rendering với Client-Side Hydration
8 Ưu điểm của Server-Side Rendering với Client-Side Hydration
9 Partial Hydration - Giải Pháp Chiến Thắng
10 Component Islands đến từ đâu?
11 Mục tiêu và Thiết kế API
12 Bắt đầu với Mini-island
13 Phần tử Content Template
14 Triển khai Hydration
15 Triển khai Partial Hydration - Phần 1
16 Triển khai Partial Hydration - Phần 2
17 Triển khai Client:visible Lazy Hydration
18 Triển khai Client:media Lazy Hydration
19 Hỗ trợ Framework Vue (Mini-island)
20 Sử dụng Framework Preact (Mini-island)
21 Kết luận
1 Giới thiệu
2 Khi Nào Nên Sử Dụng Framework Component?
3 Bước 1: Xây dựng một trang Astro
4 Bước 2: Cài đặt Tích hợp Framework
5 Bước 3 & 4: Viết và Render Framework Component
6 Bắt đầu với Responsible Hydration
7 Chỉ thị Client:load
8 Chỉ thị Client:only
9 Chỉ thị Client:idle
10 Chỉ thị Client:visible
11 Chỉ thị Client:media
12 Sử Dụng Nhiều Framework trong Astro
13 Chia sẻ Trạng thái giữa các Component Islands
14 Xử lý Props (và Children) trong Framework Components
15 Sử Dụng Nhiều Slots trong Framework Components
16 Framework Components Lồng Nhau
17 Những lưu ý với Astro Island
18 Kết luận - Tại sao là islands?
1 Cảm ơn, và Tạm Biệt (hiện tại)

Giới thiệu khóa học

Are you tired of sluggish web performance? Frustrated with heavy JavaScript frameworks bogging down your websites? It's time for a revolution, and Astro is leading the charge!


Problem Statement: In the fast-paced world of web development, speed and efficiency are everything. Traditional JavaScript frameworks often sacrifice performance for flexibility, leaving developers with bloated sites and sluggish load times. Astro changes the game by putting speed at the forefront, empowering developers like you to create lightning-fast websites with ease.


Course Overview: Join us in this comprehensive online course where we'll demystify Astro, the game-changing JavaScript framework built for speed. Whether you're a seasoned developer or just starting your journey, you'll gain invaluable insights into how Astro empowers you to build performant websites like never before.


At the end of the course you'll gain in-depth understanding into Astro, and have a rock-solid introduction to Astro -  the framework designed for speed.


Highlights:

  1. Astro Fundamentals:

    • Harness the power of Astro to build your personal website from scratch.

    • Set up a local development environment effortlessly.

  2. Component Islands Mastery:

    • Dive deep into Astro's groundbreaking architecture of component islands.

    • Discover how Astro extracts your UI into smaller, isolated components, ensuring blazing-fast load times.

    • Learn to leverage the flexibility of Astro with your favorite frameworks like React, Vue, Svelte, and Tailwind CSS.

  3. Practical JavaScript Insights:

    • Demystify the concept of "zero JavaScript" and its real-world implications.

    • Understand why shedding the JavaScript runtime overhead is a game-changer for web performance.

  4. Mastering Astro Components:

    • Get hands-on with Astro component markup, styles, and scripts.

    • Unlock the full potential of Astro's template syntax, distinct from JSX.

  5. Unleash Component Islands:

    • Dive deep into the core of Astro's architecture and build your own component islands from scratch.

    • Comprehend the magic of Astro's component islands and their pivotal role in web development.

  6. Optimized Hydration:

    • Explore responsible hydration and why it's critical for seamless user experiences.

  7. The Island Advantage:

    • Gain a profound understanding of why component islands are essential for modern web development.


Prerequisites for the course

  • Familiarity with HTML and CSS basics

  • Familiarity with JavaScript basics


Embrace the Future of Web Development.

Astro isn't just another framework; it's a revolution in web development. By the end of this course, you'll have the skills and knowledge to create faster, more efficient websites with Astro, leaving your competition in the dust.


Say goodbye to sluggish web performance and hello to a new era of web development!



Khóa học liên quan

Khám phá thêm các khoá học cùng chủ đề

Hiển thị tất cả khoá học Astro
Hiển thị tất cả khoá học Frontend Development
Hiển thị tất cả khoá học Javascript
Hiển thị tất cả khoá học Web Development
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊