in React, rendering logic and markup live together in the same place—components.
There are two reasons for a component to render:
- It’s the component’s initial render.
- The component’s (or one of its ancestors’) state has been updated.
React Class Component
React apps are made out of components. A component is a piece of the UI (user interface) that has its own logic and appearance. A component can be as small as a button, or as large as an entire page.
<MyButton /> starts with a capital letter. That’s how you know it’s a React component. React component names must always start with a capital letter, while HTML tags must be lowercase.
To “remember” things, components use state.
React components can have state by setting
this.state in their constructors.
this.state should be considered as private to a React component that it’s defined in. Let’s store the current value of the Square in
this.state, and change it when the Square is clicked.
React Function Component
In React, function components are a simpler way to write components that only contain a
render method and don’t have their own state. Instead of defining a class which extends
React.Component, we can write a function that takes
props as input and returns what should be rendered. Function components are less tedious to write than classes, and many components can be expressed this way.
Conditionally Returning Nothing with
In some situations, you won’t want to render anything at all. For example, say you don’t want to show packed items at all. A component must return something. In this case, you can return
isPacked is true, the component will return nothing,
null. Otherwise, it will return JSX to render.
Don’t put numbers on the left side of
&&, use ternary operator instead!
0, then the whole expression gets that value (
0), and React will happily render
0 rather than nothing.
For example, a common mistake is to write code like
messageCount && <p>New messages</p>. It’s easy to assume that it renders nothing when
0, but it really renders the
To fix it, make the left side a boolean:
messageCount > 0 && <p>New messages</p>.