React Ecosystem
Learn React basics like components, hooks, routing, and state management, along with tools like Zustand and ways to make your app faster.
Frontend Overview
Frontend development is about building the part of a website or app that people actually see and use in their browser. This covers everything related to layout, design, how the page looks on different screens, and how easy it is for users to interact with.
The backend takes care of the logic and data behind the scenes, but the frontend makes sure that information is shown to users in a clear, smooth, and interactive way. A well-built frontend makes an app easier to use, more accessible to everyone, and faster - even on different devices and slower internet connections.
In a normal frontend application, your job is to:
- show the user interface using small, reusable pieces called components
- keep track of data (called state) and handle what users click, type, or do
- manage routing and navigation between different pages
- talk to the backend through APIs to get or send data
- make the app load fast and run smoothly
- make sure the app works well for everyone and looks good on any screen size
In this section, you’ll learn the main tools and practices used in modern frontend development:
Mobile Development
Build apps for Android and iOS using React Native, using the same React knowledge you already have.
Astro
Build fast, content-focused websites that load quickly by sending very little JavaScript to the browser.
Starlight
Use Starlight, a ready-made system built on top of Astro, to create clean and organized documentation websites.
React is the main focus of this section. You will learn how to build interactive, growing user interfaces using small, reusable pieces called components. Along the way, you’ll learn about hooks (special functions that add extra features to your components), routing (moving between pages), managing data across your whole app using tools like Zustand, and ways to make your app faster and easier to find on search engines (this is called SEO). By the end, you’ll be able to build apps that are ready for real-world use.
React Native takes these same ideas and applies them to mobile apps. You can build apps that work on both Android and iOS using the same core principles you already learned in React. This makes it much easier to move from building websites to building mobile apps, without having to learn a completely new way of working.
Astro takes a different approach to building websites. Instead of loading a lot of JavaScript like most frontend tools do, Astro focuses on speed first and sends very little JavaScript to the browser by default. This makes it a great choice for websites where content - like blogs, articles, or marketing pages - matters more than heavy interactivity.
Starlight is built on top of Astro and gives you a ready-to-use structure for building documentation websites. It comes with things like a sidebar, search, and page navigation already set up, so you can focus on writing content instead of building these features yourself - in fact, this very documentation site is built using Astro and Starlight.
By the end of this section, you will understand how these different frontend tools fit together, and how to pick the right one depending on what you are trying to build - a web app, a mobile app, or a content-based website.