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
Original version
Functional version with hooks
Functional React Resources
React Stateless Functional Components: Nine Wins You Might Have Overlooked
Realtime Firebase with hooks
-- emphasis on realtime data retrieval
Firebase, meet React Hooks
-- small example of tracking authentication; see elsewhere for code for providers, e.g., Google, Facebook.
React Firebase Hooks
-- a library of custom Firebase hooks if you don't want to write your own
Thanks to Hakim El Hattab for
the slide template