Components: React Tutorial

Colt Steele
A free video tutorial from Colt Steele
Developer and Bootcamp Instructor
4.7 instructor rating • 11 courses • 1,044,581 students

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 past 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 how many pieces 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 nice pretty bow on them, give them a name, make it a component so they typically combine something, you see HTML, NCIS 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 the second one and you can see there's stuff being displayed. HTML, NCIS and some information here. The stars, you hover, they change that 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 e-mail access 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 in 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 dot 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, 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 Hooke's. 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 access, 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 the 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, you know, 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's 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 like this, even larger. And then we have to add this closing at the end. This looks like HTML. It's not a demo. We're going to learn a lot about what it is. It's called jousts. The entire next section is about joysticks. One of the really cool things about react is that we can write each HTML looking code instead of JavaScript. This is a just 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 esveld 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 or we didn't make it, but we're using a single tiny reusable piece of information. We can make a couple different stars. Let's do one that's pink, let's do one that is magenta and one that is purple or indigo is 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 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 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 star says 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 I hope you can see 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 H2 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? 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 Jessica'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, 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. OK, so I'm going to stop here for now. There's 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. You know, make your own little Forkin 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, Rubinoff.