In this article, you will find a step by step guide on how to install React on MacOS. It follows the philosophy of having one IDE to manage most of your web development tasks. That's how you can focus on your task at hand as a developer. However, if you like to compose your development environment with lightweight tools rather than with an full…
In this article, you will find a step by step guide on how to install React on Windows. There are plenty of articles out there on how to setup your web development environment on MacOS, but very few on how to setup it on Windows. Especially when people want to enter the world of React.js in Windows, there is a missing starting point. I wanted 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 two TypeScript configuration files; one for the…
How to learn React is high on the agenda for plenty of JavaScript developers this year. The recent State of JS survey has shown that many developers choose React for creating modern web applications. Due to its popularity and job demand, many JavaScript developers want to learn React. Here I want to give beginners a comprehensive overview of how…
Learning React in 2024 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 2024: 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…
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…
