React is a JavaScript library

sparingly/recap/explicitly/synthetic/extract/subsequent/alternative/inclination/hatch

After compilation, JSX expressions become regular JavaScript objects.

React reads these objects and uses them to construct the DOM and keep it up to date.

Elements are the smallest building blocks of React apps.

React DOM takes care of updating the DOM to match the React elements.

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

React elements are immutable. Once you create an element, you can't change its children or attributes. An element is like a single frame in a movie: it represents the UI at a certain point in time.

In practice, most React apps only call ReactDOM.render() once.

React Only Updates What's Necessary

When React sees an element representing a user-defined component, it passes JSX attributes to this component as a single object.

Always start component names with a capital letter.

Components can refer to other components in their output. This lets us use the same component abstraction for any level of detail.

Components must return a single root element.

Don't be afraid to split components into smaller components.

We recommend naming props from the component's own point of view rather than the context in which it is being used.

A good rule of thumb is that if a part of your UI is used several times (Button, Panel, Avatar), or is complex enough on its own (App, FeedStory, Comment), it is a good candidate to be a reusable component.

Whether you declare a component as a function or a class, it must never modify its own props.

All React components must act like pure functions with respect to their props.

State is similar to props, but it is private and fully controlled by the component. (Local state is exactly that: a feature available only to classes)

Clock(a component) is now defined as a class rather than a function. This lets us use additional features such as local state and lifecycle hooks.

In applications with many components, it's very important to free up resources taken by the components when they are destroyed.

The componentDidMount() hook runs after the component output has been rendered to the DOM.

If you don't use something in render(), it shouldn't be in the state.

There are three things you should know about setState().

1. Do Not Modify State Directly (The only place where you can assign this.state is the constructor)
2. State Updates May Be Asynchronous
3. State Updates are Merged (The merging is shallow)

Any state is always owned by some specific component, and any data or UI derived from that state can only affect components "below" them in the tree.

If you imagine a component tree as a waterfall of props, each component's state is like an additional water source that joins it at an arbitrary point but also flows down.

Handling events with React elements is very similar to handling events on DOM elements. There are some syntactic differences:

1. React events are named using camelCase, rather than lowercase.
2. With JSX you pass a function as the event handler, rather than a string.

Another difference is that you cannot return false to prevent default behavior in React. You must call preventDefault explicitly.

When using React you should generally not need to call addEventListener to add listeners to a DOM element after it is created. Instead, just provide a listener when the element is initially rendered.

You have to be careful about the meaning of this in JSX callbacks. In JavaScript, class methods are not bound by default.

Conditional rendering in React works the same way conditions work in JavaScript.

You can use variables to store elements. This can help you conditionally render a part of the component while the rest of the output doesn't change.

Returning null from a component's render method does not affect the firing of the component's lifecycle methods. For instance, componentWillUpdate and componentDidUpdate will still be called.

A "key" is a special string attribute you need to include when creating lists of elements.

The best way to pick a key is to use a string that uniquely identifies a list item among its siblings.

We don't recommend using indexes for keys if the items can reorder, as that would be slow.

A good rule of thumb is that elements inside the map() call need keys.

Keys Must Only Be Unique Among Siblings. (Keys used within arrays should be unique among their siblings. However they don't need to be globally unique.)

Keys serve as a hint to React but they don't get passed to your components.

In React, mutable state is typically kept in the state property of components, and only updated with setState()
.

In React, a <textarea> uses a value attribute instead.

In React, sharing state is accomplished by moving it up to the closest common ancestor of the components that need it. This is called "lifting state up".

We know that props are read-only.

There should be a single "source of truth" for any data that changes in a React application. Usually, the state is first added to the component that needs it for rendering. Then, if other components also need it, you can lift it up to their closest common ancestor. Instead of trying to sync the state between different components, you should rely on the top-down data flow.

React has a powerful composition model, and we recommend using composition instead of inheritance to reuse code between components.
(繼承是一種靜態(tài)杜顺、顯性的關系，合成是一種動態(tài)蘸炸、隱形的關系躬络。)

Sometimes we think about components as being "special cases" of other components. In React, this is also achieved by composition, where a more "specific" component renders a more "generic" one and configures it with props.

At Facebook, we use React in thousands of components, and we haven't found any use cases where we would recommend creating component inheritance hierarchies.

Props and composition give you all the flexibility you need to customize a component's look and behavior in an explicit and safe way.

If you want to reuse non-UI functionality between components, we suggest extracting it into a separate JavaScript module. The components may import it and use that function, object, or a class, without extending it.

React is, in our opinion, the premier way to build big, fast Web apps with JavaScript.

Props are a way of passing data from parent to child.

In simpler examples, 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.

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.

To build your app correctly, you first need to think of the minimal set of mutable state that your app needs. The key here is DRY: Don't Repeat Yourself.

Remember: React is all about one-way data flow down the component hierarchy. It may not be immediately clear which component should own what state.

User-Defined Components Must Be Capitalized

JSX type can't be an expression.

if statements and for loops are not expressions in JavaScript, so they can't be used in JSX directly.

Make sure that the expression before && is always boolean.

React.PropTypes is deprecated as of React v15.5. Please use the prop-types library instead.

With PropTypes.element you can specify that only a single child can be passed to a component as children.

In the typical React dataflow, props are the only way that parent components interact with their children.

React supports a special attribute that you can attach to any component. The ref attribute takes a callback function, and the callback will be executed immediately after the component is mounted or unmounted.

React will call the ref callback with the DOM element when the component mounts, and call it with null when it unmounts.

In the React rendering lifecycle, the value attribute on form elements will override the value in the DOM.

We learned earlier that React elements are first-class JS objects and we can store them or pass them around. To render multiple items in React, we pass an array of React elements. The most common way to build that array is to map over your array of data.