Join Carl Peaslee for an in-depth discussion in this video Getting set up, part of React: Lifecycles.
- [Instructor] To get set up for this video, you should make sure you're using Google Chrome. That's because we're occasionally going to be using React Developer Tools in Chrome. You can see we've already added it to Chrome, but had we not, there's just a button here where you can add it. And you shouldn't even need to reset your browser. There are two more dependencies that we're going to want to have global access to here on the command line. The first one is create-react-app. You should have noted npm already installed on your computer. To give us access to create-react-app, we're going to say npm intall -g create-react-app.
This is what we'll be using to generate our starter project. The other thing we want to have access to is Yarn, which you actually can install with npm. If you're not familiar with Yarn, know that it's essentially just an updated version of npm that has some new functionality. But if you're having difficulty installing Yarn or perhaps you have a Windows computer that doesn't support Yarn, don't worry, you can continue to use npm and I'll give parallel directions about how you might just use npm instead of Yarn.
But for right now, I'm going to install Yarn on my computer. Now we have the two dependencies installed globally that we're going to need going forward, create-react-app and Yarn.
Carl Peaslee helps you build a number of small reusable components that will be useful in future projects. Along the way, he discusses the syntax and uses of lifecycle methods, how state affects React lifecycles and your apps, and how to set static display name, default props, and initial state. Plus, learn how to gather performance data and improve performance by minimizing component updates.
- Overview of React lifecycles
- Initial state
- Default props
- Mounting: componentWillMount, componentDidMount, and render
- Updating: shouldComponentUpdate, componentWillUpdate, and componentDidUpdate
- Controlling component updates
- Using react-addons-perf to get performance data