Links and resources for building a react project
Taken from: React Docs: Thinking in React
- Design Mock (scribble), JSON data (data model)
- Break The UI Into A Component Hierarchy
- draw boxes in the mockup
- name all boxes
- think in parents and children
- props and state flowing down the hierarchy
- Build A Static Version in React
- No state, no interaction: just static
- smaller projects: top down
- big projects: bottom-up with tests
- Minimal (but complete) UI State
- dry (don't repeat yourself)
- identify state and props
- State and Component
- Add Inverse Data Flow
- interaction of the user updates state
- state might be propagated upwards
- keyword: double data binding
- Is it passed in from a parent via props? If so, it probably isn’t state.
- Does it remain unchanged over time? If so, it probably isn’t state.
- Can you compute it based on any other state or props in your component? If so, it isn’t state.
- Identify every component that renders something based on that state.
- Find a common owner component (a single component above all the components that need the state in the hierarchy).
- Either the common owner or another component higher up in the hierarchy should own the state.
- If you can’t find a component where it makes sense to own the state, create a new component solely for holding the state and add it somewhere in the hierarchy above the common owner component.