General Steps For Building ReactJS Apps From Scratch
This is a high-level look into the methodology of building a ReactJS app.
- Break the app into components
Draw up a wireframe. Map out the component structure of the app by examining the app’s working UI. Apply the single-responsibility principle to break components down so each has minimal viable functionality.
2. Build a static version of the app
Our bottom-level (user-visible) components rendered HTML based on static props, passed down from parent components.
3. Determine what should be stateful
Question what data should be stateful. This data was represented in our static app as props.
4. Determine in which component each piece of state should live
Question which component should own each piece of state. eg. TimersDashboard owned timer state data and ToggleTimerForm and EditableTime both held state pertaining to whether or not to render a TimerForm.
5. Hard-code initial states
We then initialised state-owners’ state properties with hard-coded values.
6. Add inverse data flow
Add interactivity using onClick handlers. These call functions that were passed in as props down the hierarchy from whichever component owned the relevant state being manipulated.
7. Add server communication
Ultimately, our top-level component will comunicate with a server. The server will be the initial source of state.
As shown in the hierarchy diagram, data flows from parent to child in place. Then we can add inverse data flow, propagating events from child to parent. Then we modify the top-level component to communicate with the server.
