Paper CSS is a drop-in CSS library that makes your app look like a paper sketch! It's great for getting your practice projects to look good, without wasting too much time styling them. To add it to your React project, the simplest way is to update the index. ...
Data fetching with useEffect is easy to use and great for quick one-off or practice apps. I've used it myself for a long time - but recently, I've come to the conclusion it's best to just use react-query, even for the simplest cases. Why? ...
If you're just learning React, it can be overwhelming to figure out what to learn, in what order and what practice projects are too difficult for your skill level - or just right. Here's my suggested learning path, with recommended projects for each stage. Good luck! ...
Most examples showing how to use Context in React focus on reading a value in distant components. But how would you update the value? const LanguageContext = createContext("en"); export const LanguageFlag = () => { const languageCode = useContext(LanguageContext); return <h1>Selected language code is {languageCode}</h1> ...
Here is a step by step walkthrough of using React Context API with Typescript: Step 1: Create the context First, you want to define the type of the data you will store inside your context. Next, you can pass it as the generic type to createContext: type DummyContextType = { id?: string; ...
Using a library when building complex forms is likely still very helpful - react-hook-form with zod is a robust solution used in production in many applications today. But if you just want to build a quick form, do you really need a library? I used to jump to building a ...
Everyone wants to build an amazing portfolio of projects or submit an awesome solution to an interview take-home assignment. But if your code screams that it was built by an inexperienced developer, it won't get your through the door. So what are the most common signals that give ...
If you want to test your components in a React + Vite project, the best way is using React Testing Library. This allows you to render your component with different props, interact with it and do assertions on the final output. To get it set up, you first need to install ...
When working with an API, it's essential to have access to its documentation, so you can see what endpoints are available, what parameters are supported and what responses you can expect. One common interface for documenting an API is using Swagger - a live documentation that allows you ...
Doing a GET request with fetch is easy: const data = await fetch(`https://pokeapi.co/api/v2/pokemon`) .then(reponse => response.json()); But what if you need to pass query string params? E.g. https://pokeapi.co/api/v2/pokemon?limit=100000&offset=0. How would you write ...
This is my favourite way to scaffold solutions for the practice projects. It's super straight forward, so let's get to it. Create a React project with Vite It's as simple as: npm create vite@latest You will get a nice wizard that will ask ...
It's common for React interviews to have "Leetcode"-style interview questions. But what does that even mean? Leetcode is a website for coding challenges. Traditionally, Leetcode-style questions refer to solving algorithm problems. But more broadly, they are simply focused problems that test a specific skill. You ...
Say you want to display 12 images in a grid view. How would you do it without skewing the images and making sure they each fit their square? The easiest way is using CSS Grid. Let's go over it below, first as plain CSS and then using Tailwind. ...
Ever wondered what to build next to practice your React skills? It's easy to get stuck thinking instead of just building things! So today I'm sharing with you 100 React practice project ideas ✏️. Wondering what to build based on your skills? Just make the app simpler ...
React 19 was just launched with a lot of new improvements to how we use forms. I wanted to get a before and after look of how to build forms in React, so I created a simple newsletter subscribe box to showcase the differences: Here is how the form would ...
Most interviews nowadays have some sort of coding challenge - either a live test or a take home assignment. It's common to blow these up if you don't "warm up" before hand. Here are 7 challenges perfect to prepare for an interview! Set aside ...
When working with intervals, it's important to also clear them. You can achieve this by passing the interval id you received when starting the interval to the clearInterval function: // start an interval and get its id const intervalId = setInterval(() => console.log('hello'), 1000); // clear the ...
Say we have a Date object representing five minutes: const fiveMinutes = new Date(0, 0, 0, 0, 5, 0); How can you format this date to display "5:00"? The easiest way is using Intl.DateTimeFormat browser API (see docs). This formats the Date as a string, according ...
Say you want to start a countdown timer when a user presses a "Start button". How would you build this in React? One common way I see - and it's even suggested by ChatGPT - is to have a state variable that remembers if the timer ...
The Intersection Observer API allows us to easily check if two items are intersecting. Here is a simple example that checks when the user has reached the end of the page: 0:00/1× In plain Javascript, you would use the Intersection Observer API as follows: <html> < ...
28 days of focused practice of increasing difficulty, going through everything from Fundamentals, Data fetching, Forms and using Intervals in React.
You will also get notified whenever a new challenge is published.
