The JavaScript and web development community evolves quickly and new frameworks come and go. There are many people learning React, Angular, Vue or Svelte nowadays. They are not only computer science graduates, like it used to be in the past, but also self-taught programmers coming from bootcamps and other backgrounds. I find it amazing that 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…
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…
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…
A short React tutorial by example for beginners about creating a select in React. First of all, a select is just an HTML select element which can be rendered in React's JSX: What may be missing is an associated label to signal the user what value is changed with this select: In your browser, this select can already change its select state by…
