Not another boring tutorialReady for somethingdifferent
Interactive Previews
Learn Visually. Our live previews offer a clear and intuitive way to understand coding concepts. See how your code affects the output, making learning more engaging and effective.
Clear Code Walkthrough
Follow along with our step-by-step guides and clear explanations. We break down complex concepts into simple steps, making it easy for you to understand and apply them.
Storybook and source code included
Dive deeper into the code with Storybook and access the full source code of each tutorial. Understand how components are built and interact with each other, and use the source code as a reference for your own projects.
Understading Typescript Generics
Generics is a core feature in statically-typed languages like TypeScript, enabling developers to define components, functions, or structures that can accept and enforce types passed during use. This enhances flexibility, promotes reusability, and reduces code duplication.
What are generics in TypeScript?
Making Your Code Flexible with Generics
Generic Parameter Defaults
Generic Constraints
Conditional types with generics
Closing thoughts
class MyStorage<T> {private items: T[] = [];addItem(item: T): void {this.items.push(item);}getAllItems(): T[] {return this.items;}}// Usageconst stringStorage = new MyStorage<string>();stringStorage.addItem("Hello");stringStorage.addItem("World");const numberStorage = new MyStorage<number>();numberStorage.addItem(42);numberStorage.addItem(100);
Build a User Profile Page with React, Tailwind and HeroUI
This in-depth tutorial guides you through the process of creating a modern, interactive user profile page using React and HeroUI. You'll learn how to construct reusable components for showcasing user information, implementing a feature photo carousel, and displaying user posts and photos. By the end of this tutorial, you'll have a fully functional profile page that demonstrates best practices in React development and UI design.
Setup and initialize a new React project
Building the FeaturePhotos component
Designing the Profile Information Section
Creating the Profile Stats Section
Implementing the Profile Post Timeline
Implementing the Profile Photo Timeline
Implementing the Profile Timeline Tabs
Putting it All Together
Build a Flight Booking UI with React, Tailwind and HeroUI
This comprehensive tutorial guides you through creating a modern, interactive flight booking page using React and HeroUI. You'll learn how to build reusable components for displaying flight information, implementing advanced filtering and sorting functionalities, and creating a responsive user interface. By the end of this tutorial, you'll have a fully functional flight booking page that showcases best practices in React development and UI/UX design.
Setup and initialize a new React project
Building Flight Header Component
Building Flight Card Component
Building Flight List Component
Building Flight Filter Form Component
Building Flight Filter Drawer Component
Building Flight Sort Menu Component
Building Flight Preferences Component
Putting It All together
Follow Upskills.dev
Stay updated with our latest tutorials and coding tips.