11^th Practical Class:
Getting Real!

Data Transformation

const newData = transformFn(data)

• vanilla JS

  • (array.map(), array.filter(), { ...a, b: 1 }, Object.entries())

  • 👍 good for basic usage 👍

• lodash

  • 🤔 simple, but kind of outdated design 🤔

• ramda

  • 👍 recommended 👍

• fp-ts

  • ⚠️ 🤯 the best...
    ...but only for functional programmig lovers 🤯 ⚠️

  • like Elm/Haskell/OCaml/F#, but in TypeScript

React Newsletters

• React Newsletter
• React Status newsletter

How to Create the Frontend:
Create React App

• Create React App

  • no boilerplates!
  • react-scripts

1. Create project:

npx create-react-app 4it580-cra

2. add: .editorconfig

3. add .prettierignore

4. add .prettierrc.yaml

5. add .env

6. add .nvmrc

...or use command: node --version > .nvmrc

7. install prettier

8. edit "scripts" section of package.json

9. install dependencies

10. add src/Routes.js

(more info about react-router setup)

11. change src/App.js

• SWR (Stale While Revalidate):
  • Quick Start
  • Info about <SWRConfig>

12. add src/pages/HomePage.js

• yarn eject
  • only for super advance configurations!
  • webpack
  • Babel

How to Create the Backend:
Backpack

Vanilla JS

1. create 4it580-backend folder

2. create package.json

• use yarn init (it will ask few questions and create package.json for you)
• or paste following:

3. add Express.js

4. create src/index.js

5. run the server

Add Backpack
("Create React App for backend")

6. add backpack

7. add "scripts" to package.json

8. run dev server

How to Create Server-Side Rendering:
Next.js

• Next.js

• create new project

• deployment:

  • Vercel
    • works great with Next.js (but also with Create React App)
    • can connect to Github repo and build automatically
  • Netlify
    • alternative to Next.js

• alternative to Next.js is Gatsby.js

  • both are good for static sites and with server-side rendering (good SEO, works without JS)
  • Next.js is usable for more aplication types (e.g. e-shops, dynamic apps, data from DB)
    • it's also more flexlible
    • it could require bit more work in some cases
  • Gatsby is more focuset on static sites (data from static files in Git repo)
    • some usecases are easier (e.g. blog)