The-Order-of-Steps-to-Making-a-React-Component-Visited-Upon-in-Several-Thymes.md

NOTE TO THE WARY: "Design One Smart Component At-A-Time!"

Don't try to be (too) innovative. Think in terms of HTML elements like <div>, <p>, <span>, <option>, <input>, <button>, etc. React calls these "native components" -- treat em that way!

⁃	no knowledge outside of itself other than its props. or appstore... but that's it!
⁃	React components represent UI at any POINT-IN-TIME through merely utilizing props and state
⁃	use propTypes brah (and optional: getDefaultProps)
⁃	always be explicit when passing props. none of the crap with spread operators

Phase One: The Non-interactive Version

1. Draw boxes around your UI mock. Find one "smart" component and it's immediate family of components.
2. Give names to each box.
3. Draft provisional props (IRL: API response, WebStorage).
4. Write the render methods of each component. Use your props at this stage.
5. Fine-tune your components to your heart's content!

Phase Two: Lifecycle Methods

1. Does The Smart Component™ need any lifecycle methods right now? Write those.

Phase Three: "Bring in the State!"

1. Discern what minimal state the "smart" component will have.
2. What callbacks will this state need? Write those methods (touch-event handling, input field handling, form submissing, blEh!). You should really see the power of React at work at this stage. "Look at how decoupled they are! Wowee."
3. Boom.