4^th Practical Class:
Prettier, Rules of Hooks, Forms

• EditorConfig & Prettier
• Rules of Hooks & Custom Hooks
• 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"
  • JavaScript, TypeScript, JSX, GraphQL, JSON, CSS, SCSS, Less, ...
• in terminal
  • run yarn prettier (see "scripts" section in packages.json)

Prettier in Atom (and other editors)

• 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.4.1
• other editors:
  • see "Editor Support" section on Prettier homepage or use Google

.prettierrc.yaml example:

Rules of Hooks

• see React documentation of Rules of Hooks

1. Only Call Hooks at the Top Level

Don’t call Hooks inside loops, conditions, or nested functions:

2. Only Call Hooks from React Functions

Don’t call Hooks from regular JavaScript functions.

Only call them from:

• ✅ React function components
• ✅ custom hooks

Custom Hooks

• see Building Your Own Hooks
• use use* prefix!

React Inputs

Controlled input - you provide:

• value: current input value
• onChange: called each time user changes value in input (typing, paste, ...)
  • new value is in event.target.value

Input and Array.filter()

• 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)