Learning React in 2023 is not the easiest endeavour. While we had lots of stability since the release of React Hooks in 2019, the tide is turning again. And it may be a more volatile shift than it has been with React Hooks. In this article, I want to compare the two angles on how to learn React in 2023: the library way and the framework way. To put…
A quick migration guide to Vite from Create React App, because (apart from Next.js) Vite is the natural successor of CRA for creating a modern React application as SPA . First, install Vite and all React related libraries (here: Vite's React Plugin) as development dependencies: Second, uninstall create-react-app's dependency: Third, adjust your…
Here I want to give you a brief overview of starter kits for a new React project. I want to reflect on advantages and disadvantages, on the skill-level needed as a developer, and on what features each starter project has to offer for you as a React developer. At the end you will know about 3 solutions for different requirements. A bit of context on…
A React tutorial by example about how to use drag and drop in React. Here you will learn how to create a DnD component in React step by step. First, you will implement it as vertical list, later as horizontal list, and in between with lots of customizations as examples. We will be using react-beautiful-dnd for this React tutorial. We will start the…
React has been around for a while. Since then, a well-rounded yet overwhelming ecosystem of libraries evolved around the component driven library. Developers coming from other programming languages or libraries/frameworks often have a hard time figuring out all the libraries for creating web applications with React . At its core, React enables one…
A quick tutorial for setting up ESLint in Vite. We will make the case for using linting (as general programming concept) with ESLint (JavaScript tool for linting) for the following Vite + React project, because it catches errors early. However, you can do it for any other Vite template. We will start with a basic App component which has an unused…
Material UI for React, also called MUI, does not come with a native CrossFade component for transitioning with a cross fade animation between two or more components. Here I want to share the cross fade component that I have used for several of my freelance projects when using Material UI: And the usage of this CrossFade component appears as follows…
React Testing Library (RTL) by Kent C. Dodds got released as alternative to Airbnb's Enzyme . While Enzyme gives React developers utilities to test internals of React components, React Testing Library takes a step back and questions us "how to test React components to get full confidence in our React components": Rather than testing a component's…
When using function components in React, we may want to type their props with TypeScript. Overall there are two ways of making a React component type safe with TypeScript, however, let's start by converting the following JavaScript React component to a TypeScript React component as leading example: The straightforward yet most verbose way of…
Material UI for React, also called MUI, does not come with a native nested Dropdown menu. Here I want to share the nested dropdown component that I have used for several of my freelance projects when using Material UI. Before you can use it, you have to check out my implementation for a dropdown with Material UI (MUI) in React: In the Dropdown…
