Every year, I want to give you a brief overview of how to start a new React project. I'll reflect on the advantages and disadvantages, the skill level needed as a developer, and the features each starter project offers to you as a React developer. By the end, you'll know about three solutions for different requirements. React with Vite Vite is…
This is a comprehensive tutorial on Monorepos in JavaScript and TypeScript -- which is using state of the art tools for monorepo architectures in projects. You will learn about the following topics from this tutorial. I've become passionate about monorepos, as they've transformed how I approach my work as a freelance developer and contributor to…
A brief walkthrough on how to upgrade Vite from JavaScript to TypeScript. The tutorial assumes that you have already created a React project with Vite in JavaScript. To use TypeScript in React (with Vite), install TypeScript and its dependencies into your application using the command line: Add three TypeScript configuration files; one for the…
Organizing large React applications into folders and files is a topic that often sparks strong opinions. I found it challenging to write about this, as there isn't a definitive "correct" approach. However, I frequently get asked how I structure my React projects, from small to large, and I'm happy to share my approach. After implementing React…
A React Router tutorial which teaches you how to use Search Params with React Router 7 . The code for this React Router v7 tutorial can be found over here . Search Params (also called Query Params ) are a powerful feature, because they enable you to capture state in a URL. By having state in a URL, you can share it with other people. For example…
A React Router tutorial which teaches you how to use Descendant Routes with React Router 7 . The code for this React Router v7 tutorial can be found over here . The previous tutorial of Nested Routes has shown you how to replace a part of a component depending on the URL with the help of the Outlet component. This way, in the last example, we…
A React Router tutorial which teaches you how to use Nested Routes with React Router 7 . The code for this React Router v7 tutorial can be found over here . Nested Routes are a powerful feature. While most people think React Router only routes a user from page to page, it also allows one to exchange specific fragments of the view based on the…
A React Router tutorial which teaches you how to use Lazy Loading with React Router 7 . The code for this React Router v7 tutorial can be found over here . Lazy Loading on route level with React Router is a powerful feature. Usually a client-side rendered React applications comes as one bundle from a web server. However, when enabling lazy…
A React Router tutorial which teaches you how to use Authentication in React Router 7 . The code for this React Router v7 tutorial can be found over here . We will start off with a minimal React project that uses React Router to navigate a user from one page to another page. In the following function component , we have matching Link and Route…
A quick React Router 7 example which should get you up and running. The code for this React Router v7 tutorial can be found over here . The example features the matching between Routes and Links, a so-called Layout Route for encapsulating components within the same layout (see Layout component), a so-called Index Route loaded with the Home…
