1.If you’re a power user and you aren’t happy with the default configuration, you can “eject” from the tool and use it as a boilerplate generator.
2. At this point, you’re on your own.
3.We are grateful to the authors of existing related projects for their ideas and collaboration.
4.If you don’t agree with the choices made in this project, you might want to explore alternatives with different tradeoffs.
5.Some of them might get added in the future if they are stable, are useful to majority of React apps, don’t conflict with existing tools, and don’t introduce additional configuration.
6.go through
7.check out
8.You can embed any JavaScript expression in JSX by wrapping it in curly braces.
9.You should either use quotes (for string values) or curly braces (for expressions), but not both in the same attribute.
10.keep it up to date
11.Tip Caveat Note
12.at a certain point in time.
13.In practice
14.React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state.
15.The above two components are equivalent from React's point of view.
16.This component can be tricky to change because of all the nesting, and it is also hard to reuse individual parts of it.
17.We recommend naming props from the component's own point of view rather than the context in which it is being used.
18.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.
19.Whether you declare a component as a function or a class, it must never modify its own props.
20.
React is pretty flexible but it has a single strict rule:
All React components must act like pure functions with respect to their props.
21.
We mentioned before that components defined as classes have some additional features.
22.
a feature available only to classes
23.
The merging is shallow, so this.setState({comments})
leaves this.state.posts
intact, but completely replaces this.state.comments
.
24.
Neither parent nor child components can know if a certain component is stateful or stateless, and they shouldn't care whether it is defined as a function or a class.
25.
This is why state is often called local or encapsulated. It is not accessible to any component other than the one that owns and sets it.
26.
You can use stateless components inside stateful components, and vice versa.
27
vice versa.
28.
avoid this sort of performance problem
29.
Also remember that whenever conditions become too complex, it might be a good time to extract a component.
30.
as a last resort
31.
Keys only make sense in the context of the surrounding array.
32.
Sometimes this results in clearer code, but this style can also be abused
33.
Like in JavaScript, it is up to you to decide whether it is worth extracting a variable for readability.
34.
corresponding to the given input name
35.
in addition to
36.
vice versa
37.
as a benefit
38.
ahead of time
39.
This is a matter of preference, and there's an argument to be made either way