This document provides guidance on how to design user interfaces in React. It recommends breaking the UI into a component hierarchy, building a static version first, and identifying where state should live. Components should do a single thing and be decomposed if their responsibilities grow. The design process involves mocking up the UI, breaking it into reusable components, developing features and their components, integrating with backend APIs, and identifying shared components.

1. How to Design in React
1
Steven Wang
chokobu22@hotmail.com
0987-253-575!
"

2. 2
1. Break the UI into component hierarchy
2. Build a static version
3. Identify where your state should live
Design in React

3. 3
A component should ideally only do ONE
thing. If it ends up growing, it should be
decomposed into smaller subcomponents.
Single Responsibility Principle
https://facebook.github.io/react/docs/thinking-in-react.html

4. Break the UI into Component Hierarchy
4

5. Break the UI into Component Hierarchy
5

6. Identify Shared/Reusable Components
6

7. Identify Shared/Reusable Components
7

8. Front-end Development Process
8
Mockup/
Design
Break into
Components
Develop
Feature
Develop
Components
for Feature
Design Store /
Mock Data
Integrate
with
Backend
Build
Static
Version
Identify
Reusable
Components
Define API

9. Question Time!