Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:22Length:2 hours
Practical react fundamentals 400x277
  • Overview
  • Transcript

2.3 Create a Hello World Component

In the previous lesson, you learned how React gets loaded onto an HTML page, and you were able to display some text. That works, but it typically isn't the way that React apps are constructed. In React, apps are created from building blocks known as "components". Let's convert the Hello World app to a new and better Hello World component.

2.3 Create a Hello World Component

Now, generally speaking this will work, but this is really not the way that you're gonna see react apps built. You're really not just gonna see reactdom.render, and have some random HTML or JSX put in here. You're really gonna use this as en entry point for your application to start to load components. Now components are the fundamental building blocks of react apps. Now think of a component as an HTML element on steroids. So basically what it does, is it takes a lot of functionality. It takes you, it gives you the ability to render some code, some JSX, or ultimately some HTML on the page. But it also allows you to give that some additional functionality. Where you can write JavaScript code to do a bunch of different things, all within that one component in react. So what I wanna show you in this lesson is how to take this general idea, this HelloWorld concept from this kinda of, very rudimentary way that we did it in the previous lesson to kinda get up and running with react and transform this into a react component. So let's see how we actually do that. So to create a react component, all you're gonna do is you're going to create a class. So let's create a class and we'll simply call this HelloWorld, and what makes this a react component is the fact that it extends, react.component. So now that we've done that, we have added a bunch of functionality to this HelloWorld class. It gives it a life of its own. It gives it a life cycle event so we can tie into that, we'll talk about later. It gives it the ability to render itself. What does it actually look like? How do you want this to look like in JSX, and ultimately, HTML form? So really, what we would do in this case, if we wanted to create a HelloWorld component, we would create a function in here called render. And this is going to not take in any parameters. But what it is going to do, is it's going to return and it's going to return open and close parenthesis and within here, I am going to give it some JSX. I am gonna give it some, what looks to be HTML. So let's go ahead and cut this out of here. And we'll go ahead and paste it right in here. And just so that you can see that it's actually different, instead of making this a p tag or a paragraph. Let's go ahead and make this an h1. So now our HelloWorld component, which once again is just a class that extends react.component, has a render function within it that simply has a return statement that returns some JSX. And the reason or the way that we know that this is JSX is actually because it's enclosed in these parenthesis like this. So now I have a valid react component and now I wanna inject that into my Dom in the same place where I had originally that HelloWorld paragraph. And the way that we do that now is I can use this HelloWorld class component as JSX inside or as an element inside of this render function and I can simply do that by saying HelloWorld, just like that. So, just by the fact that I created this HelloWorld class that extended react component now allows me to render this as an element. And as long as I have a render function, just like this, inside of my class, that is going to allow it to know how to render this as an element on the page. So now, if I go ahead and save these changes, and I head back over to my browser, you're gonna see now that HelloWorld is on the page again but once again these are, this is an h1 tag. And of course I can come in here and I can say inspect. And you're gonna see now, if I come down in here that, this is going to be an h1 inside of that route. So now we have figured out the basic concept, the basic building block, that is going to be used to create these react apps which is going to be in these react components. Now over the rest of this course, I'm going to be building several different components that I'm going to put a bunch of different rendering functionality as well as logic inside of them to be able to build up individual components that once you put them all together, they will create this cool little hangman clone game that you can play with your friends and also kinda challenge yourself a little bit with. But I'll get to that a little bit later on. So now we've got the basic building blocks of a react application. Let's start to actually build out our hangmen clone.

Back to the top