Join Eve Porcello for an in-depth discussion in this video Creating components with createClass(), part of React.js Essential Training.
- [Instructor] When we look at a user interface…designed with React, we can think of it…as just being an organized collection of components.…The purpose of each component is to display data.…Let's create a component called SkiDayCount…that will display the number of days that we ski.…I've created a new directory here called Components…inside of our source folder.…Inside of this folder is a new file called skidaycount.js.…I also want to mention that we've created…a style sheets folder here.…
Here, you'll find all of the different SCSS files…that we'll need for our application.…We'll like to these, but you don't need to worry…about creating these from scratch.…Awesome!…In our SkiDayCount, we're going to import,…React, from, react.…We then are going to also import from our style sheet,…so stylesheets/ui.scss.…Perfect!…The first way that I'm going to create a react component,…the first way that you can create a react component,…is using Create Class.…
I'm going to go ahead…and create a constant called SkiDayCount,…and we'll set it equal to React.createClass.…
- 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 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.