Check out a free preview of the full Complete Intro to React, v7 course:
The "App Component" Lesson is part of the full, Complete Intro to React, v7 course featured in this preview video. Here's what you'd learn in this lesson:

Brian demonstrates building a simple "Hello World" React app using a reusable App component to render text on the DOM. React wants to rerender itself frequently; render functions should be fast by keeping them pure.

Get Unlimited Access Now

Transcript from the "App Component" Lesson

[00:00:00]
>> Okay, so go back to your index html here, where it says write code here. We're gonna say, const App = arrow function, this is the ligature I was talking to you about. So if you see some weird combined symbols that's what this is. So this is actually an equal sign and a angle bracket put together and my font combines them into one glyph, right?

[00:00:27] So that's what a code ligature is. And that's covered in like the intro section or the introduction part of the course if you wanna figure out how to enable that. So we're gonna make this function called App and we're gonna say return react dot create element. We're gonna make a div, this data is gonna have no additional parameters into, so we're just gonna pass an empty object here.

[00:00:57] And then we're gonna say react.create element. With an h1 here, again, no per additional parameters and we're going to put just Some Texas has adopt me, And an exclamation point like that, yeah, no, no semicolon there. So, from there, we're gonna go underneath here I'm gonna say, ReactDom.render, react.createElements.

[00:01:30] We're gonna pass this app function that we just created. And then, after that we're gonna say document.get element by ID Route, make this a bit smaller so you can see a bit better. All right, So this we basically just made the hello world of react here. And let's talk about what we actually did.

[00:02:05] We created a component called App or like a class of components right. In my analogy like to imagine this as basically you have forged like a rubber stamp then you can go just make as many apps as you possibly want right. So you can create as many instances of that class that you want too.

[00:02:24] If you want to use object oriented programming lingo which I do not so I will not be referring to that further. But the idea here is now I have a reusable component called app that every time I say hey give me an app it's going to give you a div with an h1 inside of it.

[00:02:39] And that h1 is gonna say adopt me right, so what do we expect to do? CreateElement basically creates a new instance of something. So in this case, we're creating an instance of a div, and then here, we're creating an instance of an h1, right? And I can have an arbitrary amount of those, notice here I'm using createElement again with app.

[00:03:00] So I'm basically creating an instance of the app like I'm creating a div here, I'm creating an app here. And that's what the kind of the power of react is, is that it allows me to create these reusable components and I can mix and match them with basically HTML elements.

[00:03:14] So at the end of the day what do I expect to see when I go look over at the browser now? I expect to see a div with an h1 inside of it and inside of that h1 is going to say adopt me right. Here I'm just telling it where do you wanna put it?

[00:03:31] And I'm putting it here in the document dot get element by the root, which is going to be putting it right there. It's gonna blow away not rendered and we should see a div with an h1 inside of it says adopt me, so let's see if we are correct.

[00:03:46] So we do. And it's just styling it with a CSS right so it's making a background image and then hiding the text. We can see here inside of route a see a div with an h1 that says adopt me now you might be thinking that's neat. Could have done that with a lot less JavaScript with just some HTML, we'll get there, right?

[00:04:12] But this is just like the hello world of creating something with React. And notice here we don't have anything else besides the libraries and a little bit of code here. There's no build step, there's nothing it's just raw react here. Now I'm gonna say no one writes react like this.

[00:04:30] I like the very beginning of react there were some people like this is the way and we should all do it this way. And they were wrong and they all change their mind, right? Everyone writes it with JSX, which we'll get to here in a little bit, but there was a hot second of rebellion, it was invoked to be cool.

[00:04:45] This app is a component we made and it's just a function, right? So if you wanna make a component function, just make sure that it's returning the result of React dot Create Element. That's kind of like the contract Have something here, right? And this is basically just a render function so that whenever you run app, it's gonna give you back markup, that's the contract there.

[00:05:05] These render functions have to be fast, right because react wants to rerender itself very frequently. Whenever you change something about your React app, it's gonna rerender it. So you don't wanna put really expensive slow calls inside of your render statements. You wanna do that outside of your render statement and then use results inside of your animals.

[00:05:23] We'll talk about that when we get there but just I want you to stick in your brain right now is like these functions have to be fast, right? Into the functional programming Lingo, they need to be pure that they need to have like no side effects. So you don't wanna do something like say like lead counter equals zero.

[00:05:39] You can don't have to follow this along, you can say counter plus plus here. This would be a side effect, right because it's keeping track of state outside of the render function, right? So this counter would be going up every time that it renders, this is something that you don't wanna do, right?

[00:05:55] You want to keep all the effects inside of the same that'll make more sense as we go along. But just keep that in mind is like I don't wanna be messing with ambient state whenever I'm in a render function there's different places for that. There's two types of components class components and function components we'll talk about class components later in the class.

[00:06:16] This is a function component, so what's the point is empty object. You can also put null here let me triple check to see that that is actually true. But I'm pretty sure you can just put a null there and it will be just as happy, you can put a null there.

[00:06:31] This is where you put if you wanna give it a class name or you wanna give it an ID. So if I wanted let's say I wanted this h1 here to be called the brand right, what I do is I go here here to the h1 and I would say ID brand.

[00:06:50] Now if we come back over here and we render it, notice that I have the id brand here. So it's whatever stuff you wanna be passed into that child component, right. Or you can put class name there or something like that. Notice here with the credo an app here I omitted everything it's because it has no children.

[00:07:10] But you absolutely could say no here or object and we'll get into that here in just a second but you can also pass stuff into that as well. But if you don't have anything to pass and it has no children and it has doesn't have any properties to it, you can just leave them out there optional.

[00:07:28] Or if you want the computer science term for its variablarity which just means it has a different amount of parameters you can pass to it. Another example that came up while I was writing this course, is that because people get confused about like. What's the difference between app here as a function, an app here being rendered as an instance.

[00:07:47] The analogy that came to my head is, this is like creating like a new type of car, right? So if I'm Honda, this is like me creating civic as a line of cars, right? And then here, this is like the factory producing one civic, right, so you have one civic car or the civic as the line of cars, right.

[00:08:06] This is creating a new line of cars, this is creating one individual instance of that. To take the analogy even further, you can actually pass parameters into it so you can have different options on your car, right. Different options on your civic the same kind of idea here was that a helpful analogy?

[00:08:22] All right, I felt really smart when I thought of it so I was gonna test it out.
>> Specify it's the React DOM dot render that's making that instance of the car.
>> It's actually the createElements, which is like-
>> Is it?
>> And then the ReactDom that renders basically take what this produces and just barf it onto the DOM.

[00:08:44]
>> Okay.
>> Yeah, this is actually, what's actually taking whatever your tree you created and rendering that out to the DOM. So you can basically say, const myRenderedApp And then here, you'd be saying myRenderedApp, right? So this is actually what's stamping out, this is what's creating the popping it out of the factory, right?

[00:09:08] And this is what's actually like putting it onto the road, I guess, would be the best part of that analogy. So you're gonna call react DOM dot render exactly once in your app. Back, you technically could call it more but let's say exactly once because I've never had to do and I've written a lot of React.

[00:09:24] It's possible to do it different times, but you're gonna call react dot Create Element 1000s, 10000s of times. Hammer that point because it's confusing, so feels confusing because it is. So heads up here, react DOM dot render they're changing how this works in React 18 it's going to be called Create route.

[00:09:45] It's going to work basically the same, but if you're moving on to react 18 just be aware that the, shape of that call is gonna change a little bit. And you have to do it to opt in to like the new performance stuff that they're doing.