Preface to React Practice Discussions

How do we describe the process of developing a React app?

First, we prepare something like routing, state management, and network requests.

Then, we write a collection of functions (Functional Component) and compose them into one

These 2 steps reflect the 2 key considerations: architecture and business logic, with most resources devoted to the latter.

React is to enable a team of junior engineers to build a scalable application.

When it comes to:

• a polished LandingPage
• a survey Form
• a financial data analysis Table
• a FeedCard list like X
• a Button or a line of text

All of them go to writing components.

Here, component refers strictly to React functional components(FC): functions that accept props, manage internal state, and return UI elements based on props and state.

Thus, when delivering a feature, our focus narrows to writing a good component.

The baseline requirement: fulfill the specs.

The advanced goal: ensure the component is reusable or modifiable for future scenarios.

Writing a component typically starts from one of these scenarios:

• A detailed figma file.
• An existing component.
• A prototype with basic requirements.
• An idea.

Scenarios 1 and 2 are aiming for 100% fidelity → more like imitation.

Scenarios 3 and 4 demand clarifying requirements, gathering inspiration, designing, and implementing → more like creation.

Whether imitating or creating, every component follows two steps:

1. Draw visual elements → Make it look right.
2. Inject Data/state → Make it interactive.

Rarely do we build components from scratch. Leveraging existing UI libraries is preferred.

This brings us to the familiar topic: What value do UI libraries provide?

• Efficiency
• Cost reduction
• Team confidence and DX (Developer Experience)
• User Experience

Most importantly, a component library is a team’s asset. Every iteration is an investment.

Finally, two questions I aim to explore in this series:

How do we establish a design language to improve communication among users, PMs, designers, and developers?

How do we build a component library from real-world needs to enhance human-device interaction?