How to build a checkout form in React using Formik and Yup from scratch

Screenshot of the React Checkout Form
  • Use formik with material-ui
  • Use yup to validate the form
  • Create reusable form
  • Integrate with Redux
  • Add internationalization

Boilerplate

Create React App

npx create-react-app react-checkout-form --template typescript

Tech Stack



Screenshot of the Discussion Forum
  • How to create a database in Firebase.
  • How to query the database at the frontend using AngularFire.

Tech Stack


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

Message Extraction

# npm
npm run formatjs extract '{apps/<app-name>,libs/<library-name>}/src/**/*.{ts,tsx}' --out-file apps/<app-name>/src/translations/extracted-messages.json"
# yarn
yarn formatjs extract '{apps/<app-name>,libs/<library-name>}/src/**/*.{ts,tsx}' --out-file apps/<app-name>/src/translations/extracted-messages.json"

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


  1. Can easily change the…


Harden up your codebase with a solid set of unit tests

A collection of bicycles
Photo by Berto Macario on Unsplash
  • Services
  • Presentational components
  • Smart/container/connected components
  • Redux files
  • Hooks


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

Sort Imports

Install

# npm
npm install eslint-plugin-import --save-dev
# yarn
yarn add eslint-plugin-import --dev

Add Rules


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


NG-ZORRO

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