Eve demonstrates how to create your first official component. When you look at a user interface designed with React, you can think of it as just being an organized collection of components. The purpose of each component is to display data. Learn how to create a SkiDayCount component using React.createClass.
- [Narrator] 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 "Ski Day Count" that will display the number of days that we ski. I've created a new directory here called "components" inside of our source folder. And 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, and here you'll find all of the different SCSS files that we'll need for our application.
So we'll link to these, but you don't need to worry about creating these from scratch. Awesome. So in our ski day count we're going to import "React" from 'react'. We then are going to also import from our style sheets. So "stylesheets/ui.scss." Perfect. Now 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.
So, I'm going to go ahead and create a constant called "SkiDayCount," and we'll set it equal to "React.createClass." "React.createClass" is going to take in an object, and then every one of our react components is going to render something. So, we'll add this render method. Now, inside of the render method we're going to return some html-like elements. So we're going to use jsx here to create a div.
Now, our first div is going to have a class name of "SkiDayCount." And then inside of this div we are going to create three separate divs. So, our first div is going to be responsible for displaying the total number of days. So, we'll give this a class name of "total days." Now, these class names are going to refer to existing classes in our scss files. Cool. So let's go ahead and create a span here inside of total days.
And this is going to display the total number of days, of course, which we'll just hard code as five days. Next, let's create another div. This second div is going to be responsible for displaying the number of powder days. So these are very important days. We want to catalogue all of the snowiest days that we have. So, inside we will hard code another span and display two days.
Because not every day can be a powder day. And then we're going to go ahead and give our final div here another class name of "backcountry days." And inside of this div, we will add another span, and say that this is one hiking day. So, we've created a component using "react.createclass." And then, we need to render this over in our index file. So, in the "index.js" file, this is responsible for doing all of our rendering.
And instead of rendering this div, we are going to render the ski day count. Now, I need to do a couple more things here. So, we want to import the ski day count. So we'll say import, Ski Day Count, from... Components... ski day count. I also want to do this. I'm going to say window.react equals react.
So sometimes we'll have some errors pop up where it says, "React is not defined." Adding react to the window will deal with this problem. Now, the final thing I want to do here is, instead of just using the "const," I'm going to say, export const "SkiDayCount" so that I can import in index.js. So let's take a look at this in our browser. We've already run npm start, so it's running our webpack dev server. And this is displaying that we have five days, two days of powder, and one hiking day.
And if we open up our react developer tools, we should see that we have the ski day count being rendered with all of our divs inside of it. Awesome. We've successfully created and mounted our first component.
- 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