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…
tRPC allows developers to create fully type safe APIs with TypeScript in full-stack applications. While the server application produces a type safe router with type safe functions (e.g. CRUD operations: create user, get user by identifier, get all users), the client application can call these functions directly on the inferred type safe router…
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…
While, in my personal opinion, the web development landscape slowed down for a few years (2016 - 2021), it started to gain lots of traction just last year (also see State of JS where the images for this article are taken from). In this article, I want to point out new web development trends that I have seen, which are certainly trends which I…
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…
TypeScript is getting more popular these days for frontend and backend applications. Here you will learn how to set up TypeScript in Node.js for a backend project. The previous tutorial already demonstrated how to set up a JavaScript project with Node.js. With this as foundation, we will start migrating the project to TypeScript here. First…
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…
Material UI for React, also called MUI, does not come with a native Dropdown component. Here I want to share the dropdown component that I have used for several of my freelance projects when using Material UI. Before you can use it, you have to install its Material UI (MUI) dependencies: Next follows the implementation of a Material UI Dropdown…
