Essetial React
Project setup
First thing’s first, we are going to be using a web browser. Everything that we do in this course is going to happen in this browser. I’m using Firefox. You can use any browser, any modern browser, that you want. Second thing, this course is going to be using React version 16.2.0, so everything you learn here will likely work in 16, but if you’re watching this and run version 17 or 18, things might have changed significantly. We’ll be doing all of our work on a site called codesandbox.io. If you login like I am here, you can save your progress. Not let’s kick things off by making a new sandbox with React. This will setup everything that we need to have a React app. Now, CodeSandbox sets up a Create React app style template for us, so that’s going to be setting up all of the things that we don’t really want to set up on our own just to get started learning React stuff. So there’s a lot of things here that you might be kind of curious about, and you’re free to explore that, but don’t worry. If you don’t understand parts of it, you don’t have to to get working in React. What we’re going to do all happens in this file, so you can just hide that and never think about it again. Now finally, before we hit the road we’re going to do one last thing. I want you to select all of this and delete it. I’ll teach you everything that you need to know in the next few lessons.
- 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