Everyone dealing with React knows about this warning: Warning: Each child in a list should have a unique "key" prop. It shows up in your development tools of your browser and it's one of the warnings you encounter very early in your React career. The following list component results in this warning: The warning says we only need to add a key…
If you haven't used state management excessively in React Function Components , this tutorial may help you to get a better understanding of how React Hooks -- such as useState, useReducer, and useContext -- can be used in combination for impressive state management in React applications. In this tutorial, we will almost reach the point where…
So much has been said about the appropriate way to style modern web apps. There's the general and oldest method of styling at document level - creating a style.css file and linking to it in the HTML file and more recently the method of styling in JS. This is popularly known as CSS-in-JS. CSS-in-JS is a styling approach that abstracts the CSS…
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…
Even though React didn't introduce a lot of breaking changes since it has been released 2013, different React Component Types emerged over time. A few of these component types and component patterns are still used nowadays -- they are the status quo of how React applications are built -- whereas several of them are only seen in older applications…
In this tutorial, I want to show you how to fetch data in React with Hooks by using the state and effect hooks. We will use the widely known Hacker News API to fetch popular articles from the tech world. You will also implement your custom hook for the data fetching that can be reused anywhere in your application or published on npm as…
So far, it was fine to rely only on React's local state and React's Context API. This tutorial dives into using MobX on top of React and Firebase for the state management. We'll exchange React's local state (e.g. users on admin page, messages on home page) and React's context (e.g. session management for authenticated user) with MobX. It will how…
The previous tutorial series covered a lot of ground for Firebase in React. So far, it was fine to rely only on React's local state and React's Context API. This tutorial dives into using Redux on top of React and Firebase for state management. You will exchange React's local state (e.g. users on admin page, messages on home page) and React's…
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. Composition in JavaScript Let's take…
