react-intl is a library that helps to set up internationalization for a react app. It has been migrated to formatjs monorepo. There are instructions on formatjs website about the setup for react apps: https://formatjs.io/docs/getting-started/installation. Nx is a monorepo tool. This blog shows how to set up for Nx react app.

i18n for Nx React apps using formatjs
i18n for Nx React apps using formatjs
i18n for Nx React app using formatjs

The message declaration, we just need to use defineMessage, formatMessage or FormattedMessage: https://formatjs.io/docs/getting-started/message-declaration.

Message Extraction

However, for message extraction, we need to install @formatjs/cli and the command would be like:

In the above command, we…


React-i18next is internationalization framework for React. This blog is a step-by-step guide about adding react-118next to a React project, such as:

  • How to config react-118next
  • How to sync with Redux state
  • How to extract translation
React-i18next

The example I am going to use:


What is a white-label app? According to Wikipedia:

A white-label product is a product or service produced by one company (the producer) that other companies (the marketers) rebrand to make it appear as if they had made it.

To build a white-label app, it needs some customization, it is not just simply change the logo or font style. However, it also could not be infinitely customizable; otherwise, it is building 2 completely different apps.

This blog shows how to create a white-label react application. The goal of this white-label react app that satisfies the below requirements:

  1. Can easily change the…


Harden up your code base with a solid set of unit tests

A collection of bicycles
A collection of bicycles
Photo by Berto Macario on Unsplash

Unit testing is critical for development, no matter how small the app is. This article blog will go through how I wrote unit tests for an example app.

It’ll explain some of my unit-testing strategies for different parts of a React app:

  • Services
  • Presentational components
  • Smart/container/connected components
  • Redux files
  • Hooks


Nx is a set of dev tools for monorepos. It provides a lot of things out of the box, such as ESLint and Jest integration.

However, there are still additional setups I usually add to my Nx project. Here are still things I would like to do as boilerplate:

  • Add ESLint rules to order imports and audit accessibility
  • Change lint commands to include all libraries and applications
  • Change test commands to include all libraries and applications
  • Add pre-commit hooks
Nx Project Boilerplate

My Nx GitHub repo: https://github.com/xiongemi/white-label-airline

ESLint Rules

For Nx, it already installed a few ESLint plugins and provides a lot of ESLint rules…


Adding ESLint rules to sort imports statements and audit accessibility will ensure code consistency across the team and catch some errors early.

This blog shows how to:

  • add ESLint rules
  • add scripts in package.json
  • add pre-commit hooks

It assumes that your project already has ESLint installed.

ESLint Rules

This is the GitHub project I got with these ESLint rules added: https://github.com/xiongemi/white-label-airline.

Sort Imports

Install

Even though ESLint has this sort-imports rule (https://eslint.org/docs/rules/sort-imports); however, --fix will not reorder automatically for multiple lines.

However, we could use library eslint-plugin-import that allows --fix. To install:

Add Rules

Add…


If you have an Nx React project on GitHub, do you want to have free hosting of this app? This blog shows how to deploy an Nx React app to GitHub pages. GitHub pages provides free hosting for static pages for a GitHub repository. I am going to show you how to:

  • Deploy a sample flight search app
  • Change base href
Deploy Nx React app with GitHub Pages

GitHub Repo: https://github.com/xiongemi/white-label-airline

GitHub Pages: https://xiongemi.github.io/white-label-airline


Background: NG-ZORRO is an Angular UI library that is based on the Ant Design System used by Alibaba. I have heard about this library so many times, but I have never used it in the past.

I am a developer in Toronto right now and I mostly use Angular Material. I think NG-ZORRO is definitely popular in China. I always want to try it out so I have created a simple project using this library. This blog describes my developer experience using NG-ZORRO for the first time.

NG-ZORRO

Website: https://ng.ant.design

Github: https://github.com/NG-ZORRO/ng-zorro-antd

Below is a website I create using NG-ZORRO, it…


Problem I got: form handling is definitely a difficult task in Angular, or in any front-end frameworks. There are limitless interactions users could do with a form. I need to validate, show errors, and keep track of form status.

This blog will go through steps to create a pretty complex checkout form in Angular: https://xiongemi.github.io/angular-form-ngxs.

Sample checkout form
Sample checkout form
Sample checkout form

Github repo: https://github.com/xiongemi/angular-form-ngxs.

This blog will show my solution to these problems:

  • How to create a reusable form component
  • How to setup dynamic validation on form control
  • How to persist form values (using state management with NGXS)

Before We Start

HTML Form

We don’t need to re-invite the wheels, we…


As an Angular developer, I have been working with NgRx for a while. However, recently I keep hearing about this state management NGXS. I heard many good things about this library and one pro of this library is that it has a better “developer experience”. As a developer, I want to try it out to see what kind of experience this library would give me and see whether it could “convert” me.

NGXS

I have created this sample project using NGXS:

It is a simple web app that allows you to search a superhero by name, race, and gender: https://xiongemi.github.io/superhero-search-engine/.

Emily Xiong

A frontend web developer in Toronto

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store