Another way to create a component besides createClass is to use ES6 class syntax. ES6 classes were introduced to offer a new way to build objects like classes. Eve refactors the SkiDayCount component as an ES6 class. We also destructure properties which isn't class specific but makes components more readable.
So instead of using create class,…we're going to use class SkiDayCount…extends React.Component.…Awesome.…So since we're using class syntax,…we also do not need the opening parentheses here…and the closing one on line 37.…Some more punctuation we can get rid of…is the comma on line 7 and the comma on line 10.…All of our methods don't need to be…separated by commas anymore when we're using class syntax.…
So let me give this a save and check it out in our browser,…and we should see that everything…is working as we expect it to,…no big changes have happened to our interface at all.…We're just using a slightly different syntax to describe it.…
- 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
Q: This course was updated on 09/19/2017. What changed?
A: The following topics were updated: setting up Chrome tools for React, inspecting React sites, Babel static transpiling with babel-cli, loading JSON with webpack, adding CSS to webpack build, and creating components with createClass(). In addition, a new video was added that covers migrating to webpack 3.
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.