6^th Practical Class:
Forms and More

• EditorConfig & Prettier
• React Inputs
• Formik
• Form Validations

EditorConfig

• https://editorconfig.org/
• see editorconfig Atom plugin
  • open .editorconfig when using with Remote FTP plugin

.editorconfig example:

Prettier

• https://prettier.io

• Code Formatter:

  • "Ugly Code" -> "Nice Code"

• supports:

  • JavaScript, TypeScript, JSX, GraphQL, JSON, CSS, SCSS, Less, ...

• in terminal

  • run yarn prettier (see "scripts" section in packages.json)

• for Atom:

  • install prettier-atom plugin
  • remember to:
    • open .prettierignore and .prettierrc.yaml when using with Remote FTP plugin
    • turn on "Format File on Save"
  • maybe you will need global installation of Prettier on your machine
    • npm install --global prettier@2.1.2

• other editors:

  • see "Editor Support" section on Prettier homepage or use Google

.prettierrc.yaml example:

React Inputs

• Array.filter() documentation

React Forms - Formik

• https://formik.org/

• library for handling forms in React

• validations:

  • form state
  • data "wiring" (React Context)
  • validation
  • array fields + dynamic fields
  • wizards
  • and much more...

Formik Validations

• Formik Validation Guide

• You can use<Formik validationSchema={...} />

• yup validation library

Reusable Field with useField Hook

• useField documentation

Formik Limits

• file upload

  • no native support for file inputs
  • there are workarounds

• number of inputs (100+ inputs on one page):

  • could become slow
  • there are workarounds

• Google it or use other form libraries for React

• if in doubt contact me using MS Teams to: Tomas Horacek (@hort19)