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.…
Author: Vijay Thirugnanam
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.…
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.…
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.…
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.…
CRA or create-react-app helps to create a react app with just a single command. It has a package called react-scripts
that can run an app in dev mode, run tests or build the app for production. It is quite useful for demos, prototypes and internal apps. But I still don’t like it as much. Here are the top 3 reasons why I still don’t like it in the year 2021!…
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.…
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.…
Most React frameworks like Antd do a good job of trapping keyboard focus within a modal. If there is a textbox and some buttons, tabbing from the textbox takes you to the button. Tabbing from the buttons takes you back to the textbox. The keyboard focus never goes to the controls in the background. This is what I mean by trapping keyboard focus within a Modal.…
Many web apps allow users to export data as CSV. This can be done using JavaScript on the browser. Papaparse is a nice package that prepares the CSV for us. This blog post has the code to show you how to do this.
Prepare CSV using Papaparse
The first step is to install Papaparse.
yarn add papaparse
Add an import statement at the top of your module.…