State is handled slightly differently in ES6 class components. Instead of using getInitialState, use the constructor. Eve demonstrates how to set up the constructor method and sets up initial state. Initial state is set up in the constructor by assigning allSkiDays to this.state. Use the countDays function to filter days and assign accurate counts for different ski day types.
- [Woman] When creating stateful components with ES6,…the syntax is very similar to createClass…but there are a few things to look out for.…I want to refactor this as an ES6 class…and then I will point out differences along the way.…So the first thing we want to do is…import Component from React…and then we will remove the createClass…and instead use class App extends Component.…Now we can get rid of our parentheses here…and just use the braces.…
I'll also remove the closing parentheses off of line 49.…We also need to remove the commas…from between our methods…so I'll get rid of the one on 34,…as well as the one on 29.…There's a different method that we need to add…to our class component here on line 6…and it's called constructor.…So constructor is going to be responsible…for taking in props.…We're going to call our super class…and we're going to add some new state data to our class.…
So instead of using getInitialState…we're actually going to use this.state…and we're going to set this equal to an object…that contains our initial state.…
- Refactoring elements with JSX
- Transpiling with Babel
- Creating components
- Adding component properties and methods
- Displaying child components
- Working with props and state
- Setting up routes
- Nesting routes
- Creating forms
- Understanding the component life cycle
Skill Level Intermediate
Building an App with React.js and MeteorJSwith Emmanuel Henri4h 20m Intermediate
Building a Polling App with Socket IO and React.jswith Alex Banks3h 56m Intermediate
1. What Is React.js?
2. Intro to JSX and Babel
3. React Components
4. Props and State
5. Using the React Router
6. Forms and Refs
7. The Component Lifecycle
Next steps1m 4s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.