Join Eve Porcello for an in-depth discussion in this video Handling state with ES6 and React.js, part of Learning ECMAScript 6.
Handling State and react is also a little different in ES6.…We'll use the same restaurant component,…and we'll add on some State changes here.…The first thing I want to do is…I want to use my constructor method…to set the state for the restroom.…I'll add the constructor method here on line 8.…Now, inside my constructor method…I'm going to use super, and I'm not going to make any…changes to those properties.…And then I'll use this.state equals an object.…
Now this object is going to use status as the key,…and not open as the status.…So this will be the default for our restaurant.…It'll be set to not open,…and then it'll be up to us to make changes to that.…So we'll do this by adding by a custom…openRestaurant method,…and this openRestaurant method will trigger in a second,…so openRestaurant will use this.setState,…and we will pass in status,…and we will pass in what we want to change this to,…so we wanna change it to open.…
Awesome.…So now we need to trigger that change,…so what I will do to do this…is add a button on line 22.…
- What is ECMAScript?
- Transpiling ECMAScript with Babel and Babel-node
- Using the let and const keywords
- Creating strings with template strings
- Enhancing object literals
- Working with ES6 classes and class inheritance
Skill Level Beginner
Q: The Babel API is out of date. How do I proceed with the course?
A: We are updating the course. In the meantime, you can install the babel-cli package and then install the presets that you need to follow along with the tutorials.