React Context is a powerful feature. If your React application grows in size beyond a small application, there is nothing wrong in giving it a try. Many third-party libraries like Redux are using it under the hood anyway, so why not learning about it. Especially if your component hierarchy grows in vertical size, it becomes tedious passing props…

React Hooks were introduced to React to make state and side-effects available in React Function Components. Before it was only possible to have these in React Class Components; but since React's way of implementing Components has changed over the years , we have the class component's features available with React Hooks in React Function Components…

React Function Components -- also known as React Functional Components -- are the status quo of writing modern React applications. In the past, there have been various React Component Types , but with the introduction of React Hooks it's possible to write your entire application with just functions as React components. This in-depth guide shows…

There are various advanced concepts and patterns in React to master on becoming a React developer. In this tutorial, I want to go through React's Component Composition step by step by evolving one example around this React pattern. You can find more about the topic in the official React documentation as well. What's Composition in Code? Let's…

The article is a short tutorial on how to have state in React without a constructor in a class component and how to have state in React without a class component at all. It may be a great refresher on topics such as higher-order components and render prop components in React too. React State without a Constructor In React, state is used in a React…

The concept of children as a function or child as a function , also called render prop in general, is one of the advanced patterns in React (next to higher-order components ). The components which implement this pattern could be called render prop components. In this tutorial, you will learn everything about React's render prop pattern…

Everyone who is new to React is confused by these so called props, because they are never mentioned in any other web framework, and rarely explained on their own. They are one of the early things you will learn in React after initially grasping React's JSX syntax. Basically props are used to pass data from component to component. In this guide, I…

React has been around for a while and since then a well-rounded, also perceived as overwhelming, ecosystem has evolved around the component driven library. It's not always simple to pick a library that solves your problem in the React world, but once you get to know all the options, its ecosystem becomes very powerful. That's why I want to give…

In my recent (yet not fully released) application , I was confronted with SVG in React. I had to use a logo and wanted to use playful SVG background patterns in React. By using SVG, I avoided to use other image formats which would add performance penalties to my application. The article will guide you through using SVG in React. It shows you how…