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:

1. Small - “Your component should be small”

   1. 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

   2. 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.

2. Does one thing - “Your component should do one thing”

   1. Your components should have only one main responsibility: one reason to change.

   2. Split your UI into tiny chunks that each handle one thing.

3. One level of abstraction - “Your component should have one level of abstraction”

4. Less than three arguments - “Your component should have only a few arguments (props)”

   1. 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

   2. 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.

5. Descriptive name - “Your component should have a descriptive name”

   1. “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.”

...