Quite recently, in a React freelance project of mine, I came across a React pattern where I had been using the same UI components repetitively across multiple pages tied to specific page information . Let's walk through this thing that I name Context Injection in React. Let's say we have an App component which splits its top-level navigation…
In this tutorial, I want to show you how to use React Table Library to create a table component in React . After this part, there are many other parts giving you examples for searching , filtering , sorting , selecting , nesting tree tables , and pagination for your React table by using React Table Library. Let's start with the basics…
A short React tutorial by example for beginners on how to create an indeterminate React Checkbox which uses an indeterminate state (also called tri state ). Let's start with a checkbox example from our previous tutorial: Now we want to extend the functionality of this checkbox for handling a tri state instead of a bi state. First, we need to…
A short React tutorial by example for beginners about using a checkbox in React. First of all, a checkbox is just an HTML input field with the type of checkbox 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 checkbox: In your browser, this checkbox can already…
In this tutorial, I want to show you how to use React Table Library with a filter feature. In the previous example, you installed React Table Library to create a table component. Now, we will enable users to filter data in the table. React Table Library does not come with a native filter feature, however, as you have access to the data from…
A recent React freelance project of mine offered me a challenging task: The client wanted to have a tree table component in React. The role model for this was MacOS's Finder and its tree view; and as a cherry on top: it should be able to fetch asynchronously up to 100.000 items in chunks as paginated and nested lists. Over the next months, I built…
When working with multiple developers on one React application, it's always good to align the team on a common set of best practices. This holds also true for styling React components . Over the past years, I was fortunate to work with many React freelance developers on different applications where we had to align the best practices throughout…
After I rewrote my book The Road to React with React Hooks using function components instead of class components, aspiring React beginners always ask me whether React class components are going away . I always give them the same short answer, however, I thought it would be good to have this brief explanation here as well. Yes, React class…
In this React Hooks tutorial, I want to show you how to use a middleware for React's useReducer Hook. This middleware would run either before or after the state transition of the reducer and enables you to opt-in features. Before we can start, let's establish what we have as a baseline from the previous useReducer tutorial: Our React application…
In this tutorial you will learn everything about React's useEffect Hook. Let's say we have these two components whereas the parent component manages state with React's useState Hook and its child component consumes the state and modifies the state with a callback event handler : Based on the stateful boolean flag coming from the parent component…
