React II

React - Conditional Rendering

This allows you to render part of components depends on the situation. same way condition works in JS.

• the if else condition,
• the variables to store states,
• the inline logical&& operators.

All those methods can be used to control the content rendering.

React - Lists & Keys

• transform array to list in React is same to the coding in JS.
• specifically in React, we use JSX and map() methods to build collections of elements.
• A “key” is a special string attribute you need to include when creating lists of elements.
• key help react identify changes of element collections.
• don’t use indexes for keys?

React - Forms

• Form works different in React than in HTML.
• In React, mutable state is handled in setState()
• textarea tag: use value attribute to hold dynamic contents
• select tag: create drop-down list
• file input tag: uncontrolled components that handled by DOM

React - Lifting State

We lift up state to a common ancestor of components that need it, so that they can all share in the state. 
This allows us to more easily share state among all of these components that need rely upon it.

Need to know more about this concept.

React - Composition vs Inheritance

• use composition more than inheritance for the code reuse purpose.
• Props and composition give you all the flexibility you need to customize a component’s look and behavior
• in an explicit and safe way.

Thinking in React

• single responsibility principle, a single component is only do one thing
• build up component hierarchy base on UI
• build a static version
• identify states and decide which parts should live
• add data flow