in Uncategorized

Thinking in React

  • Conceive Components- Single responsibility
  • Build static page
    • build components that reuse other components and pass data using props. props are a way of passing data from parent to child
    • don’t use state at all to build this static version. State is reserved only for interactivity, that is, data that changes over time
    • In component hierarchy, it’s usually easier to go top-down, and on larger projects, it’s easier to go bottom-up and write tests as you build.
    • The component at the top of the hierarchy will take your data model as a prop. If you make a change to your underlying data model and call ReactDOM.render() again, the UI will be updated. You can see how your UI is updated and where to make changes. React’s one-way data flow (also called one-way binding) keeps everything modular and fast
    • There are two types of “model” data in React: props and state. It’s important to understand the distinction between the two;
  • Identify The Minimal (but complete) Representation Of UI State
    • Not the initial data passed into component
    • The ones which changes over time based on interactions
  • Identify which components changes based on state
    • React is all about one-way data flow down the component hierarchy. It may not be immediately clear which component should own what 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.
  • form components deep in the hierarchy need to update the state by calling setState()

Write a Comment