Table of Contents: · Table of Contents: · How to type React props ∘ Creating a type alias for the props ∘ Typing optional props ∘ List of types for React component props · How to type React function components · How to type React hooks ∘ Typing useState hook ∘ Typing useEffect and useLayoutEffect hooks…

Using Bit to compose independent React components, bottom-up, from atoms to full pages. — Atomic design is a methodology for designing and developing user interfaces in a modular manner by putting the focus on building components rather than applications. Modern user interfaces are composed of many small UI elements in the form of labels, buttons, links, and cards that are combined together. …

A complete development environment for your web dev needs — Building a modern JavaScript project with front-end libraries like React, Vue, or Angular requires you to configure many development tools so that they can process your JavaScript code. As you may already know, a huge amount of separate development tools are available in the JavaScript ecosystem for various purposes: Webpack…

Agrippa is a development tool that allows you to generate new React components from the command line. It reduces the amount of boilerplate code you need to write when creating React components. A boilerplate is a chunk of code that serves as a template for a software project. Boilerplate components…

Understanding the differences between the two CSS layout models. — Flexbox and Grid are two CSS layout models that can be used to create complex web application layouts with just a couple of CSS rules. This tutorial will help you understand the differences between Flexbox and Grid CSS layout models and a recommendation on when to use one over the…

Learn how to create a grid-based layout for your React components. — Atomic Layout is a lightweight React library that allows you to generate a grid-based responsive layout for your components. Modern CSS libraries like styled-components and emotion are incredibly useful because they allow you to create isolated, local CSS that applies only to the intended specific components. But since both libraries…

Learn how to speed up initial load time with Webpack’s code splitting feature (with examples using React) — The main purpose of Webpack is to prepare your JavaScript files so that they can be consumed by the browser. It does so by scanning your JavaScript code from an entry point (usually the index.js file) and then following the import statements that are written in that entry point. Webpack…

The React Team has recently released a new alpha version of React 18. The main addition to this new version is concurrent features that improve the performance of your React application. The notable features you can already try in React 18 are as follows: The new ReactDOM.createRoot() API replacing ReactDOM.render() …

IMPORTANT: Since Bit Harmony is still in its beta phase it is likely that some of the steps in this tutorial will no longer be relevant. If that happens, please check with the official docs. Bit Harmony is a new version of Bit that offers a modern approach to develop…