Essetial React
Class Components
Component functions are fairly limited in their functionality. They take arguments and then render out some type of React element using those arguments. We can also define component with a class. While under the hood these class components are also still functions, they give our components a lot of special powers that we will learn about through the rest of this course. Let’s define this greeting component as a class. We’re going to extend here React’s base class, which is just Component. Once we’ve done that, every component needs to have a render method, and that will be exactly like we did in our function version. We’re going to return an h1 with React {props.name} and h1. Now we run into a little something here where don’t actually get props as an argument. Those are going to be on the class, so we’ll use this. But apart from that, it works exactly like our function version. Now, that component’s mostly done, but I do have some other things in mind. I’d like to make a clap counter next. Let’s define that now. We have a class called ClapCounter. It extends the base React component, and that has to have a render method, which returns a DIV that says ClapCounter, just so we know it’s there.
- Overview
- Project setup
- ReactDOM.render and React.createElement
- JSX
- Functional components
- Props
- Class Components
- onClick and other events
- Component initial state
- setState - object form
- setState - functional form
- Conditional rendering in JSX
- this.props.children
- Fetching pokeapi data
- componentDidMount
- setState and fetch
- Lists with Array.map()
- componentWillReceiveProps
- Component props
- Render props
- Separation of Concerns with components
- Higher-order components
- defaultProps
- Render prop actions
- Summary