Category: React

Searchtabular is a npm package that is part of the reactabular family. It has search utilities that can be applied to rows of data before rendering it in a table. Searchtabular has only text filter as part of the package. It does not have filters for date, number or boolean. This is where the searchtabular-antd package comes in. The searchtabular-antd package takes help of antd component library for various UI elements for the filters.…

Read More

When we are dealing with form input, we need to cancel navigation to a different page to ensure that the form is saved. This is a bit tricky than it sounds. How should the app behave if the user

  1. Closes the browser.
  2. Moves to a different website.
  3. Moves to another page within the same website.

Navigating to a different site or closing the browser

There is not much that a React app can do to handle the cases 1.…

Read More

React is unopinionated and may be that is a problem. React component has a state. The state within the component get a bit messy for any medium-sized application. State management libraries like Flux, Redux or Mobx are available to manage state. The Flux pattern enables uni-directional data flow in a React application. The article explains the various patterns available to manage state and control data flow.…

Read More

Last week, I made two mistakes with my Redux code.

Mistake #1: deepClone Redux state

The state within the reducer is immutable. That is, the old state should never be changed. To ensure that the old state never gets changed, I got a “cool idea”. Do a deepClone of the entire state. So, my reducer code looked like:

case ActionType.SomeAction: {
  const newState = deepCopy(state);
  newState.someArray.push('abc');
…
Read More

UPDATE (Jan 15, 2019):
A better article for Webpack v4 is published.

The article explains how to do a minimal scaffolding of React application using Webpack.

  1. Setup Git.
  2. Setup npm.
  3. Install packages.
  4. Setup babel.
  5. Setup Webpack.
  6. Define entry.
  7. Include bundle.
  8. Run application.

Setup Git

Setup a git repo as follows.

git init git remote add origin <remoteurl

Setting up a git repo is optional if you are only doing a demo.…

Read More