A list of resources for writing good, understandable, and reusable React components for Paragon.
React component design
How to write great React - Scott Domes
Highlights
Scott Domes encourages us to always conceptualize our components as functions, even if they are written as class components. Then addressing the question, “what makes a good function?” the article walks through the five factors outlined in Robert Martin’s Clean Code as they apply to React component design. The five factors and some quotes:
Small - “Your component should be small”
The first rule of functions is that they should be small. The second rule of functions is that they should be smaller than that. — Clean Code
50 lines is a good rule of thumb for the body of your component (for class components, that is the render method). If looking at the total lines of the file is easier, most component files should not exceed 250 lines. Under 100 is ideal.
Does one thing - “Your component should do one thing”
Your components should have only one main responsibility: one reason to change.
Split your UI into tiny chunks that each handle one thing.
One level of abstraction - “Your component should have one level of abstraction”
Less than three arguments - “Your component should have only a few arguments (props)”
The ideal number of arguments for a function is zero (niladic). Next comes one (monadic), followed closely by two (dyadic). Three arguments (triadic) should be avoided where possible. More than three (polyadic) requires very special justification — and then shouldn’t be used anyway.. — Clean Code
Here’s a more relaxed rule of thumb. Three props is fine. Five props is a code smell. More than seven props is a crisis.
Descriptive name - “Your component should have a descriptive name”
“Having a hard time naming your component is a sign it’s doing too much. The answer to ‘what does this component do?’ should be simple, and lend itself to a descriptive name.”
Prop-Types
All component properties should be annotated with associated prop-types from the react prop-types
library.
https://reactjs.org/docs/typechecking-with-proptypes.html
React app design
Thinking in React - reactjs.org
“One of the many great parts of React is how it makes you think about apps as you build them. In this document, we’ll walk you through the thought process of building a searchable product data table using React.”
Start With A Mock
Step 1: Break The UI Into A Component Hierarchy
Step 2: Build A Static Version in React (no state)
Step 3: Identify The Minimal (but complete) Representation Of UI State
Step 4: Identify Where Your State Should Live
Step 5: Add Inverse Data Flow