This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Refactoring the App Component" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Brian Holt: So let's go back to ClientApp.jsx which is where we are right now. And let's go ahead and get rid of MyTitle up here and change these to const as well cuz we're doing.
>> Brian Holt: Yeah, six now. Did not mean to do that.
>> Brian Holt: Okay. And where my first component to be app instead.
[00:00:42] And now we're going to put in some markup. So you can get rid of all the my tile stuff in here, the first thing, this bothers a lot of people. It bothers me a little bit too to be honest. So you can say class equals app container. So class isn't gonna to work because class is a reserved word in JavaScript.
[00:01:04] So unfortunately you have to use something else so that its class name works the same way. You put spaces in the same way, right? I've had to blah, whatever, right? But it must be class name. Just so you know that does actually have basis in reality. So if I come back in here just to show you, and I say,
[00:01:30]
>> Brian Holt: var x equals, in fact, I think I still have it in here. Yeah, getElementById app, make that bit bigger so you can see it. And I say X.class name. That's actually what the DOM calls it internally if you're using the API. Right now doesn't have a class it doesn't matter.
[00:01:47] Right. But just so you know they're not making that up that's actually is already what it is called. I recognize it as different from class but hopefully will a little bit forgiving and you just get used to it as well so. There you go. Use class name everywhere.
[00:02:02] You'll put class sometimes and you'll forget like I do and you'll just have to remember it later. But anyway that's the big disclaimer I give there because people get upset about it. Okay, class name equals home dash info.
>> Brian Holt: And here we're going to put in h1 and says, class name equals title and I called our App S video because that's what I thought of when I was trying to think of a name of an App.
[00:02:42] It's a terrible name. You can call your app service whatever you want. I just called mine S video. So here we gonna put an input. className=search. type=text. placeholder=search. All this should look really familiar to you because that's a valid HTML input, right? So you can write at the same way, that's okay.
[00:03:12] Other than className, right? But that's the one asterisk there. Okay, and we're gonna put a button here as well. button className = browse-all.
>> Brian Holt: Or Browse All, okay. Close and div, close and div, render app, cool! That should work. That should be enough right there.
>> Brian Holt: Okay.
>> Brian Holt: So,
[00:03:50]
>> Brian Holt: Let's go ahead and give that a shot and see what it looks like. Once everyone looks like they finished.
>> Brian Holt: Just a bunch of divs, some H1, some input, and a button. Let's go ahead and do NPM run build on this now and NPM run build.
>> Brian Holt: And should could get a bundle output.
[00:04:26] Did we get get any weird errors that they wanna talk about?
>> Brian Holt: Okay, let's go see if it works. So let's refresh and you should get something that looks like that. It's pretty cool, right? You just built a little reacting point but you get this nice landing page from Windows your font probably isn't cool cuz I think I used a Mac exclusive font.
[00:04:57] But yeah. Also there's a couple of backgrounds on there. So if you go to the style.css. This is just for fun. There's one through five. So if you do one refresh, there's a couple of them they're all free clip art so.
>> Speaker 2: Somebody is asking about why is it taking so long to run Webpack now?
[00:05:20] Is that because of all the Babel loaders?
>> Brian Holt: Its Babel. Yeah. Babel takes a long time to run. And we're running it through a lot of transformations. Babel takes a long time to run. But we're going to mitigate that here momentarily. I told you this workshop is all about running up against the pain points then refactoring to get away from the pain points.
[00:05:37] So we're gonna introduce some complexity but it's actually gonna get us away from the pain point and we'll do that momentarily. Mark H is saying that I get app is not defined I'm gonna go ahead and guess that your problem is that one of these two did not get changed either line four or line 14.
[00:06:00] And that will probably probably fix you hopefully anyone else? Don't be shy.
>> Speaker 3: I was getting no render method found on the return component
>> Brian Holt: No render method found.
>> Speaker 3: I may have forgotten to find render.
>> Brian Holt: Is this a function up here and is it?
>> Speaker 3: Curly brackets.
[00:06:24]
>> Speaker 4: Look at reactor.rendered do you have it as a jsx thing or do you have it as just a method?
>> Speaker 3: It was an issue, I had curly brackets instead of parentheses.
>> Brian Holt: Yep, that makes all the difference cuz then nothing's getting returned. Good call, anyone else?
>> Brian Holt: Feeling good about it?
[00:06:51]
>> Brian Holt: All right, looks like most people in chat are getting it too.
>> Brian Holt: Looks like Ivory got this error that's,
>> Brian Holt: JSX value should be either an expression or a quoted JSX on line nine. Maybe you don't have matching quotes that might be an issue.
>> Brian Holt: So one of the things with JSX that especially if your syntax howlings working correctly right now, say I did this, notice everything after my H1 here looks really weird now, it's cuz I have a mismatched quote.
[00:07:32] That's an easy way to find something is look for the moment where your syntax highlighting starts looking really weird, that will help a bunch. Okay, cool. Another one that you'll see is something like that. That one's a little harder to see but just make sure you are doing opening and closing tags correctly.
[00:07:56] But notice that changing it down there made my syntax howling down here break.
>> Brian Holt: So there are some tricks like, if you get your syntax highlighting working that helps you debug what you're doing.