TypeScript allows developers to write code that gets compiled to JavaScript. The output JavaScript code runs in browsers and anywhere where JavaScript runs. TypeScript is around since 2012. So, it is not something new. Most developers with JavaScript background use TypeScript these days as it is very convenient as well as very safe. In this article, I will show 5 useful syntaxes in TypeScript.…

Read More

Theme UI (theme-ui) is a library for styling React components using a customisable theme object. It is easier to get started with theme-ui rather than explaining it. In this article, we will cover the following topics:

  • Getting started with theme-ui
  • Defining fonts and colors
  • Variants for heading, button, etc
  • Responsive breakpoints and Media queries
  • Dark mode

We will build a sample app using theme-ui.…

Read More

NextJS is the framework for building production React apps. Its main selling point is its ability to pre-render pages. If you do a “View page source” on a React app built with create-react-app (CRA), you will see an almost empty body. There will only be a div element into which JavaScript renders all content on the client-side. This is great for building admin pages or internal apps but not so great for building content websites that the search engines crawl.…

Read More

React Testing Library makes functional testing of React components easier. It provides a virtual DOM where we can render components, provides methods to query the DOM for various elements, interact with those elements and make assertions on them. The objective of this post is to serve as a one-stop reference material for the most commonly used code patterns related to React testing library.…

Read More

Let’s say we have an idea for a cool component. We want to build it and share it with the community by publishing it to NPM registry. The code to implement the component functionality appears intuitive. But the boilerplate we have to put together for the open-source project is convoluted. In this tutorial, we will put together a boilerplate project for publishing components.…

Read More

In this tutorial, we are going to build 2 CRA projects and share components between them. The solution is to have a mono repository or monorepo built with Lerna and Yarn workspace.

Lerna and Yarn workspace are complementary tools to build monorepo. Lerna allows to execute npm scripts in package.json for all sub-projects. Yarn workspace allows to manage dependencies and reference types from other sub-projects.…

Read More

The useState hook is probably the most popular and frequently used hook in React. There were a few questions I had about it. If a component had multiple useState hooks and an event handler did multiple state updates, will the component render multiple times? If a setState function did not change the state value, will the component be rendered again?

To answer these questions, I created a sample component.…

Read More