In modern React, there are many ways to style a React application with CSS. Whenever I do a React workshop with aspiring React developers, I show only one of these ways due to the limited time I have for the complete React workshop. But often this one way of styling isn't enough to cover the full scope of this important topic. There are many…
Using React ref and really understanding it are two different pair of shoes. To be honest, I am not sure if I understand everything correctly to this date, because it's not as often used as state or side-effects in React and because its API did change quite often in React's past. In this React Ref tutorial, I want to give you a step by step…
Micro Frontends are the equivalent for Microservices: Whereas microservices are an architecture to split up monolithic backend applications into smaller services, micro frontends can be used to achieve the same on the frontend. But they are not as popular as microservices yet. For my last client, I made a experimental spike for a Micro Frontend…
The Road to React teaches the fundamentals of React. You will build a real-world application in plain React without complicated tooling. Everything from project setup to deployment on a server will be explained for you. The book comes with additional referenced reading material and exercises with each chapter. After reading the book, you will be…
Just recently I had to use Docker for my React web application development. Here I want to give you a brief walkthrough on how to achieve it. First of all, we need a React application. Either create a React app yourself, or follow this minimal React with Webpack setup guide . The React + Webpack application can be found on GitHub too. Note: If…
Just recently I had to use Docker for my create-react-app web application development. Here I want to give you a brief walkthrough on how to achieve it. First of all, we need a React application. Either create a React app with create-react-app yourself, or follow this React MacOS setup guide or this React Windows setup guide . Note: If you are…
When my last client asked me about internationalization in React, I went through all the hoops to prepare a presentation for them. In this React tutorial, I want to show you the gist of what I have learned about translating a React application. Table of Contents React Internationalization: Which library should I use? There are two popular libraries…
Conditional rendering in React isn't difficult. In JSX - the syntax extension used for React - you can use plain JavaScript which includes if else statements, ternary operators, switch case statements, and much more. In a conditional render, a React component decides based on one or several conditions which DOM elements it will return. For instance…
In this React tutorial, we will get to know event handlers in React for HTML elements such as button and input elements. You will learn how to use a button with its onClick event and how to define and use different kinds of event handlers. Essentially we will go through three kinds of event handlers: event handlers, inline event handlers and…
In this React component tutorial by example, we will create a React Range Component with React Hooks and a Function Component . You can see the final output of this implementation in this CodeSandbox or in this GitHub repository . If you want to implement it step by step, just follow the tutorial. React Range: Component We are starting off…
