Components: React Tutorial

Colt Steele
A free video tutorial from Colt Steele
Developer and Bootcamp Instructor
4.7 instructor rating • 10 courses • 972,174 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'd like components like 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 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 H2 MLC assess 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 each team LMT assess 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 pretty amount to assess and JavaScript combined into a single wrapped up component. So we're gonna 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 each team out. 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 dog 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 each team l will also learn about function components which we spend a lot of time with them when we talk about hooks but I'm gonna 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 Web site 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. Each team MLC assessed 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 Web site running. This is a react application and make it easier. What I've done is click right here which pops it out into its own window so that way I can close this window here and now I can zoom it. 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 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 gonna do right now is go to my index J.S. which is right here and there is 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 round 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 HD female tag. Make this even larger. And then we have to add this closing slash at the end. This looks like HMO its not HMO. We're gonna learn a lot about what it is it's called J.S. X the entire next section is about J.S. X one of the really cool things about react is that we can write each team out looking code instead of JavaScript. This is a J S 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 it 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. Well 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. 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 HD him all 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 that 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 ust 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 wanna 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 fork in and tweak things but just remember this code is at this point if you never seen react. This is supposed to be terrifying. It's really more just about the relationship. All right. Moving on.