FREELessons: 14Length: 1.6 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 Creating Components

Components are the building blocks of React applications. You'll learn how to write them in this lesson. It's easy—they're functions!

2.2 Creating Components

Components are the building blocks of React applications. So whenever you build an application, you're going to spend your time building components. And we have already used a component. What looks like just a simple paragraph element from HTML, is actually a paragraph component in React. So behind the scenes, React is seeing this paragraph component, and it is rendering it as, well, a paragraph element. There's really not a whole lot of complexity to a paragraph. But that also kinda begs the question, what exactly is a component? Well, the purpose of a component is to describe how something is rendered or how it behaves within the application. That might sound a little simplistic, especially with our little paragraph here, because while that just simply displays content. But remember that we are building web applications, and we are using JavaScript. And over the many, many years of building these applications, we know how to build rich user experiences. In fact, what we see on screen, Visual Studio Code is for all intents and purposes, a web application. It's written with HTML, CSS, and JavaScript because it is a node application. So I want you to think of components as functions, because we can write components as functions. So we can write our own component called Hello, World. And all we have to do is essentially describe how we want this component to look and behave. So to start, we could just simply output some text, Hello, World. I mean, that is describing something. I guess our content. It's really nothing more than content. But when it comes to then using our component, well, we use it like any other element. We have created essentially an element called HelloWorld. And remember that this is XML, so we need to either close it with a closing tag or we can use the self-closing syntax. Either way, we'll get the same result. So if we go to the browser, and refresh, well, it doesn't look like anything changed. However, if we take a look at the output. So let's inspect and let's see. Here's our application. We have our div element, but there's nothing inside of it except text. There's no other P elements or anything like that. So we could go back to our code, and we could change this so that instead of just text, we will also use a React component, an h1 element. So all of your typical HTML elements are usable, and they are React components. So now, I am returning JSX. It looks kind of weird, and I get that. But remember, this is JavaScript and XML. So we are mixing XML with JavaScript, and this is perfectly valid. If we save this, go to the browser, refresh the page. Of course, we can visually see that we are now outputting our content with an h1. But if we look at the resulting HTML, we can verify that right there. So it looks wrong, and especially, if you've been spending many years with the idea of separating HTML, CSS, and JavaScript, it looks very wrong. But I assure you, this is perfectly fine in React and really other frameworks like React, like Vues, Belt, Alpine JS, a bunch of other things. We are mixing markup with our functionality, and it's really easy to maintain. All right, so we have this HelloWorld function, and we are simply returning some content here. But remember, this is just a normal function. One thing that we usually do is pass data to a function, and we can do just that. Except we aren't really passing parameters or anything like that, the terminology in React are called props. And the way that we do that are through attributes to our components element. So here, we have our HelloWorld element if we wanted to specify a name so that we could be a little bit dynamic here. And we could say, Hello, and then whatever name was specified. Well, we are essentially passing a prop called name. It's going to have a value of Jeremy, and we can access that from inside of our HelloWorld function. Now, the way that we do this, however, is with something called props. This is the value that is passed as the first argument to our components function. And so, therefore, whenever we say, Hello, then we can say, But if we do just this, we are going to see Hello,, because React can't really tell the difference between what is supposed to be regular content or regular text and then JavaScript. So what we have to do then is use some special syntax, simply, curly braces. And anything inside of the curly braces are going to be treated as JavaScript. So we have a JavaScript expression here. So let's just take a moment and look at our markup. So we have our components. We have the opening tag and the closing tag. It's an h1 component. We have just normal text. And then we have the curly braces. And anything inside of the curly braces is treated as JavaScript. So behind the scenes, React is going to see that this is, it's going to evaluate that expression. And so then it's going to give us the value of our name, prop. So let's refresh Hello, Jeremy. And of course, if we change this to any other name, we are going to see the same thing inside of the browser. Now, one thing you may see people do is destructuring the props so that it's a lot easier to work with. So that inside of the function, we no longer have to just say props dot and then whatever property we want to access. Now, we can destructure props so that we can directly use name. Once again, we will see the same result in the browser. So for right now, I want you to think of components as functions. Just like functions, a components can accept data. We call that data props. And they are included as the first argument to our component. It's called, well, props, you can call it really whatever you want, because since we are defining that function, we have control over the parameter name, but the convention is props. So the props are passed to the function. We usually destructure our props to make it a little easier to work with. The function needs to return content. That content can be just a simple string, it can be another component like what we have done using the h1 component. And if we need to evaluate any JavaScript inside of just normal text, we use curly braces around that expression. And so, now that you know how to create and work with components, in the next lesson, we are going to just start building our Hangman application. And we will start with the application component.

Back to the top