Components: React Tutorial

A free video tutorial from Colt Steele
Developer and Bootcamp Instructor
Rating: 4.7 out of 1Instructor rating
20 courses
1,305,087 students
Introducing Components!

Learn more from the full course

The Modern React Bootcamp (Hooks, Context, NextJS, Router)

Just published! Follow the same curriculum I teach my students in SF. 10+ projects including one HUGE application!

38:47:08 of on-demand video • Updated March 2021

React Hooks! (My favorite part of React!)
The new Context API
State management w/ useReducer + use Context (Redux Lite)
The basics of React (props, state, etc)
Master React Router
Build tons of projects, each with a beautiful interface
React State Management Patterns
Drag & Drop With React
Writing dynamically styled components w/ JSS
Common React Router Patterns
Work with tons of libraries and tools
Integrate UI libraries like Material UI and Bootstrap into your React apps
React Design Patterns and Strategies
Learn the ins and outs of JSS!
Learn how to easily use React to build responsive apps
Add complex animations to React projects
Debug and Fix buggy React code
Optimize React components
Integrate React with APIs
Learn the basics of Webpack in a free mini-course!
DOM events in React
Forms and complex validations in React
Using Context API w/ Hooks
English [Auto]
All right. So let's talk more about components and then we'll also work with a couple of existing components and play around with them, tweak some values and just see what happens. So as we've talked about, components are the main building block of React. Really React exists to help you make components and then also have those components communicate, pass data, pass information and methods between one another. If we go to the React documentation, there is this nice little paragraph, really just a sentence that I like components let you split the UI into independent reusable pieces and think about each piece in isolation. So to be honest, one of the hardest parts of React is figuring out what to make a component. If you take a large application, how many pieces do you break it down into? We'll talk more about that. We'll talk more about patterns. But the idea is to take some application or even just a piece of functionality and break it down into individual reusable pieces. Wrap them up, put a nice pretty bow on them, give them a name, make it a component. So they typically combine something. You see HTML, CSS with some JavaScript logic. So for example, the first component we're going to take a look at is a rating component, a star rating component. I have it open in a separate window. So this right here is one star rating component. This is a second one. And you can see there's stuff being displayed, HTML, CSS and some information here. The stars you hover, they change, the color changes. But also when I click, we are triggering some code. There's some logic to display solid and smiling emoji or fantastic in a fire emoji. Terrible and a vomit emoji. So there is stuff that we see HTML, CSS and JavaScript combined into a single wrapped up component. So we're going to come back to this in just a moment. But first, I want to show you what I'll call a pseudo component. So this is not real react. This is just plain JavaScript for a dog component. So it's a dumb example, but the idea is that we have a class called dog and each dog component, each instance is going to have a name and a color and it also knows how to render itself into HTML. It knows what to display or what to return when render is called. In this example, it's very simple a paragraph tag with this name, so with the name of the dog added inside. So we could have five dogs that could each have a different name, a different color. We're not using color right now, but then when we render each one of them to the page, we'll see a different paragraph tag. So that's a very simple example. And again, this isn't real react, but it kind of illustrates the idea. We take some data, some JavaScript information and logic, and then we also tell the component what it should render, what it should look like on the screen. Quick note not all components are class based. So I wrote here components are classes that know how to render themselves into HTML. We'll also learn about function components. We spend a lot of time with them when we talk about hooks, but I'm going to make a separate video in this section talking about the differences between the two types of components. I don't want you to get too bogged down at this point with syntax. I just want to talk about the main idea around components. So if you go to this demo, this is a website called Code Sandbox, really great resource. It's similar to Code Pen, but in some ways it's better. Code Pen is great for discovering front end stuff, HTML, CSS, JavaScript, animations or I don't know, layouts, that sort of thing. Code sandbox is made to mimic your local environment, so it uses NPM. You can add actual packages. It doesn't really matter at this point if you've never seen it before, but this link is included in the description and you can edit things. You can play around and just tweak it and see what happens. So on the right side of the screen is our website running. This is a React application and to make it easier, what I've done is clicked right here, which pops it out into its own window. So that way I can close this window here and now I can zoom in. So if you're following along, if you prefer to keep it in one window, that's fine. So we have three files, three JavaScript files, one called Index, one called Star. This is its own component, and then another component called rating. So don't worry about the syntax, don't worry about the actual code, just worry about how these pieces fit together. So we have our first most basic component, which is called Star, and it represents a single individual star. This is one star component. So what I'm going to do right now is go to my index JS, which is right here and there's something called APP. This is actually a component as well. So there is an app component that's the entire page here. Then there is a component called rating which contains multiple star components. So if you want to follow along and play around, we can comment this out. Or delete it. And what we're going to do is define our first star component. And it looks like this star as if it was an HTML tag. Make this even larger and then we have to add this closing slash at the end. This looks like HTML. It's not HTML. We're going to learn a lot about what it is. It's called JS x. The entire next section is about JS X. One of the really cool things about React is that we can write HTML looking code instead of JavaScript. This is a JS file, so this makes a star, but each star has a couple of things it needs to know about. It needs to have a color. So what color should our star be? If you want to pass that in, it looks like this. So let's go with pink. There we go. And if we take a look now, you can see there's a pink star. There's another piece of information we can pass into our star, which is called is filled. Now, this is a true or false a boolean. So we can just add is filled at like just like this. We don't have to set it to anything. And you can see our star is now filled in. So already we've made this tiny we didn't make it, but we're using a single, tiny, reusable piece of information. We can make a couple of different stars. Let's do one. That's pink. Let's do one that is magenta and one that is purple or indigo. Let's do that and we'll have them all be filled. There we go. Three stars. Let's make the middle one not filled so we can just delete that, make sure we still have that slash there. And now we have three different components each one an instance of our star component. So we don't have to worry about what the star component looks like, what the code looks like. You can take a look if you'd like, but that's not the point right now. In addition, there is some logic behind the scenes. If I click, I get an alert. It's a very basic logic, but it's some JavaScript running when I click on a star. So now let's take a step up. The next component is the rating component. So a rating component is built using star components. So this is really the main idea of react small pieces, but they don't exist in isolation. Each piece often is going to render or use other smaller pieces. So the rating component, which looks like this, if you want to take a look, don't be overwhelmed. We haven't talked about any of this. It's not terribly long, but there's a good amount of logic in here. You can see we're defining the different meanings. So a zero star is no rating. A five star is fantastic. We have different colors. So we have I think this starts as red. And then as you start to rate better and better, it goes up to a golden color. We have some information about the value of the rating. We have some code that runs when you hover, some other code that runs when you click. But the most important part is right here. Here we are using a star component inside of the rating file. The rating component we are relying on the star component, which I just showed you. Now, there's a lot of information we're passing in. Don't worry about any of this. But what I hope you can see is that we have these two components that are interacting. We have the rating component, which is using the star component. So let's go back to our index. And below these three individual stars, we can add some just plain old HTML like an H two tag that says rating component. And below that we can add in a rating component. Just like this. And then each rating wants to have an initial number. So how many stars does it begin at? Let's go with two. You might be wondering, what are these curly braces? We will get to that. But for now, just follow this. It's part of J. X's syntax. So let's see what we get. Take a look. Here is our rating component. And it's now changed. But if I go back, let's change it to be four stars and then see what we get. You can see it's initialized to have four out of five stars, but then I can change it. Let's go to two stars or five stars. So each star here is an individual star component. There are five of them. And the rating component does more than just display five stars. It connects them in a way. It figures out what color they should be. It figures out what happens when you click. If I click on this star, it knows I'm rating two stars, but if I click on this one, it knows I'm rating five stars anyway. So I don't want to get too bogged down here. But at this point we've seen two individual components. If you want to, you can play around with rating. Add a couple more. Let's do a zero star rating to start. And there we go. We have this one here and then our zero star rating here. Okay. So I'm going to stop here for now. There is a lot that we saw here, but hopefully you get this at least a taste for what React is like. Of course we have a ton to cover, but I'm going to show you in the next video is a more complex, larger example. We're not going to look at code. We're just going to look at the components that it consists of, or at least some of them, just so you can get a sense of what really how granular components can be in a larger application. So if you do want to play around with this, go ahead, make your own little fork and tweak things. But just remember, this code is at this point, if you've never seen React, this is supposed to be terrifying. It's really more just about the relationship. All right. Moving on.