How to Develop React Apps

Why React?

Front-end Framework Popularity

How to Develop Any App

  • Style from the start, with a style library
    • I like the simplicity of rbx as you know
  • Deploy immediately, even just a dummy page
    • Firebase can handle your site, your data, and your authentication
  • Hardwire data on the backend, not the front
  • Use real data from day one

How to Develop Any App

Vertical slices

How to Develop in Slices

  • Pick a tiny piece of real end user value
  • Define any new data necessary, but no more
  • Push
  • Sketch the visual display of the data, but no more
  • Define code to display the new data, but no more
  • Push
  • Add interaction last

How to Add Interaction

  • Identify client-side state
    • selections, visibility, highlighting, ...
  • Define variables and functions for that state
  • Test UI with different fixed states
  • Add event handlers to change state last

How to Handle Data

  • Use the cloud, e.g., Firebase
  • Represent user-dependent data from the start
    • But don't do login and such until necessary
  • Be consistent about asynchronous coding
    • Prefer async functions with await over classic promises
    • Use useEffect()

React Coding Tips

  • Use npx create-react-app
  • Defer redux until necessary
  • Use functional components, not classes
  • Refactor long code into functions and functional components
  • Define state with useState
  • Pass data with props
  • Retrieve data with useEffect

Modern JavaScript Coding Tips

  • Be functional. Pass closures. Minimize globals.
  • Use const
    • let rarely, var never
  • Use map, filter, reduce, every, etc.
    • Classic for loops rarely needed.

Thinking in React Design Process

Functional React Resources