This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Importing CSS in React" Lesson
[00:00:00]
>> Brian Holt: So now, we are able to import our CSS files as if they were like JavaScript, which is weird but kind of cool. Yeah, let's go into clientapp.js. So, save this, first of all. Go into clientapp.js. First, we're gonna not use MyTitle anymore. You're welcome to keep it.
[00:00:17] You're welcome to drop it. Up to you, but we will no longer be writing to it. So, we're kind of starting from the beginning again. So in fact, I'm going to do just that. And I'm going to start all over.
>> Brian Holt: Again, this is in client app.js. So, import react from react.
[00:00:37]
>> Brian Holt: Then we're going to import render from react-dom. Now this might look like some wierd syntax to you. This is just saying that the react-dom package exports a render function. I just want that. Now, not only does that make it a little bit more convenient for writing I don't have to say react-dom.render.
[00:01:00] I can just call the render function. But we talked a little bit about how webpack can eliminate debt code. This is saying the only thing I need from react is the render function. Include everything it needs to run that, don't include anything else. So this is giving webpack the opportunity to eliminate a bunch of dead code from the react-dom package for you.
[00:01:20] I think that's pretty great. You can disagree with me, but you're wrong.
>> Brian Holt: Just kidding, that's a really dumb thing to say, okay, so. [LAUGH] Any questions about that? Yeah, that's all those curly braces mean. It's like just give me this particular piece. Okay, and then here we're gonna do that fancy pants CSS import.
[00:01:42] So I'm gonna say, ../public/normalize.css and import ../public/style.css. So now, all of our styles are going to be pulled in. And just so you can see it, first of all, I left you a little note there. If anyone wants to look at my CCS, this is bad CSS. Do not write to your CSS this way.
[00:02:11] So, I felt like if I wrote it in the file, then you'd have to listen to me. That almost never seems to work that way, but whatever. But I wrote it really structurally based so that you don't have to write a bunch of class names cuz that gets really tedious really fast.
[00:02:26] So, as long as you follow my naming conventions and my structuring, all the style just get comes for free. Cuz look at somebody's lectures, like they're just stupid.
>> Brian Holt: Like this one, this is my favorite.
>> Brian Holt: I did that for you, each and every one of you. [LAUGH] Okay, so that's what style.css is.
[00:02:48] Okay, and then we're just going to start building our new app. const App = React.createClass, okay. Render and then return and we are going to do, div class name equals app. So, another point of annoyance for new comers to react and I guess everyone for that matter. It's not class it's class name, right?
[00:03:28] And that's just something you gotta get used to with writing React. Now people starts to question why? It seems like a silly thing to do. Well, class is a JavaScript reserved word, right? So, unfortunately we just can't.
>> Brian Holt: But I will say that it's not without reason that they do it this way.
[00:03:50] The name of the DOM API to manipulate class or read from class is actually className. So that's actually where it comes from
>> Brian Holt: So I'm not making it up, it's still kind of dump though. Okay, div className = 'landing',
>> Brian Holt: Okay, and then we're gonna have a h1 here.
[00:04:16] That's gonna be our brand name. You can call it whatever you want. I called mine svideo for reasons I cannot remember. I remember I wrote this at like three in the morning so that was the best brand name I could come up with at that point in time.
[00:04:30] There was probably whiskey involved. I'm gonna put in input, type equals text Placeholder equals search under your closing slash coz you need it and then an a tag or browse all, okay pretty much all is application of what things that we've already done.
>> Speaker 2: Question.
>> Brian Holt: Yeah.
>> Speaker 2: Any preference of using jsx versus js for the extension?
[00:05:12]
>> Brian Holt: The answer is, I don't really care. The reason why I went with JS for this particular workshop is that's kind of the direction Facebook has gone, as far as I can tell externally. But some people like to make their JSX files have the extension, file extension JSX to like signify this is the file that needs to be compiled.
[00:05:38] I don't care. As long as you like keep it straight I don't think it really matters, okay. Okay, and then we need to put a render call down at the bottom app,
>> Brian Holt: DocumentsgetElementById app, so this might look a little weird to you right here, app. But remember what this gets transpiled to.
[00:06:06] This is just getting compiled to react.createElements, so might as well just write it that way.
>> Brian Holt: Any questions about that?
>> Brian Holt: I'll give you sec to finish writing it down.
>> Speaker 3: Why did you say app is and carrots in the render call? Or is React like, is written like an HTML tag?
[00:06:42]
>> Brian Holt: Because if you remember the way we wrote it previously was React.createElement,
>> Brian Holt: App, right? And then, so we were writing React.createElement there, right? It's like the there's a stamp and then there's an individual stamp, right? So we needed to make an individual stamp, like one instance of that.
[00:07:03] So instead of doing react.create element here, since that's getting transpiled to react.create element anyway, we can just write it like that. Does that make sense? Cool, yeah.
>> Speaker 4: Question about syntax highlighting. If the JSX code, making that look pretty and sublime, is that a different package than the Babel package?
[00:07:25]
>> Brian Holt: Nope it's not, but you need to actually use the Babble package, right? So, I know it's really tiny, I don't know how to make it any bigger but the bottom right here you can see JavaScript with babble in parentheses right? So, you need to make sure that you're not using JavaScript right here, you're using babble JavaScript babble.
[00:07:45] Very key that you do that or else it looks horrible.
>> Speaker 3: And also the color theme you're using in sublime. Might be changing at least the colors run.
>> Brian Holt: Yeah, I use the one the comes with the battle package which is Monachi, something or other. Color scheme, Babel, Monachi Phoenix.
[00:08:04] That's what I'm using. I don't know if it's any better, that just happens to be what I use.
>> Brian Holt: Other questions?
>> Brian Holt: Okay, so save that.
>> Brian Holt: Let's see.
>> Brian Holt: Okay, cool, I'm about to do that. So, we did Web Pack watch, that's fine. So yeah, make sure your Web Pack watch is running.
[00:08:52] So npm run watch. Wait for it to build. It built. We are gonna refresh. I have a path problem, ha, path problems. You probably should see something like this. Some of you might be seeing background images. But we'll fix this momentarily.
>> Brian Holt: Because if you look at your, you should be, inspector.
[00:09:26] Anyway.
>> Brian Holt: So that's should be more or less what you're seeing here. I think in the style.css I messed up the path for this.
>> Brian Holt: Yeah, so if you wanna make this work now, you just have to take off that leading slash and I think that should work now.
[00:09:49] We'll fix it so that won't matter here momentarily anyway. In fact you have to have the slash on, so probably just leave it on. You can also switch the number there if you want. I put one through five, if you want different kinds of backgrounds. But, whatever, okay.
[00:10:14]
>> Brian Holt: Any questions about this so far? Let's go ahead and push a branch. Yes.
>> Speaker 5: My webpack is angry that you used the universal selector in the CSS.
>> Brian Holt: Is it?
>> Speaker 5: Why would that be?
>> Speaker 4: Yeah, Christopher is having the same problem I think.
>> Brian Holt: Yeah, kill your web pack and run it again.
[00:10:33] Cuz that's something I constantly forget to do.
>> Speaker 5: All right, we're happy.
>> Brian Holt: Cool.
>> Speaker 5: Thank you.
>> Brian Holt: Yep. These are problems like constantly happen over and over again. It's like Groundhog's Day with these bugs. But it always still happens.
>> Speaker 4: Jacob's asking you if we're going to be using hot reload today?
[00:10:54]
>> Brian Holt: No.
>> Speaker 4: He's very tired of refreshing.
>> Brian Holt: Well, tough shit, I guess. [LAUGH] Sorry, Jacob. I'm not doing hot module reload because they are in the midst of rewriting and the old one is not worth setting up, and the new one's not done yet, so. How module three is coming.
[00:11:16] But it's still an early early alpha. They told me that the APIs are not near complete. So, hashtag sorry not sorry. [LAUGH]