Intermediate React, v3 CSS & React

Transcript from the "CSS & React" Lesson

[00:00:00]
>> Let's go talk about CSS. So we're gonna go back to our project page now, we just did the Hooks in Depth. And now we're gonna get into something that I'm actually pretty excited to tell you about, which is TailwindCSS. Let's wax poetic about the history of CSS and React together.

[00:00:22] It has been a journey. In just this course, in the course of teaching six versions of various React courses here with Frontend Masters, I have taught no CSS. I've taught styled-components, I've taught CSS modules, and I've taught Emotion. And now I'm about to teach you TailwindCSS. That is to say, there's many ways to skin this cat.

[00:00:46] [LAUGH] And today I chose this one because this is kind of the direction I see a lot of React developers going. And the other thing is that Emotion really hasn't updated a whole lot since I last taught this course. So if you want to learn about emotion-js, just check out intermediate React V2, and all that stuff is very current.

[00:01:05] So you can still check out Emotion if you'd like to. What do I think about CSS and JavaScript? I don't really think about it. Kind of to answer that, I think there are benefits, I think there are downfalls. And I'm fine if I go on to a project, they're using styled components and it's there, I will happily keep using that.

[00:01:27] If I start a project myself today, I'm probably just gonna use normal CSS cuz that's what I'm used to, and I've done it for so many years. But honestly, I'm really drawn into Tailwind. I did a lot of research into Tailwind to teach this course, and I'm pretty enthused about it, I was able to get a lot done very quickly.

[00:01:45] So the thing I'll say about Tailwind CSS is that, one, this isn't really tied to React all that much. Everything I'm about to tell you, you could probably lift and shift this to Angular or Ember or just plain HTML and CSS, so that's one benefit of it. There's a bit of a starting tax, and mentally to kinda get up to speed of how Tailwind works, because it's very different from writing normal CSS.

[00:02:14] But once you've done it, I think you can go really fast with it. So the thing to say about styled components and Emotion is they have run times, right? So they have something that executes in JavaScript with your React app, which incurs some overhead, right? Even Emotion, which is very fast and style components don't matter.

[00:02:34] They're very fast, they're very small, there's still something, right? They're still two or three kilobytes, they still have JavaScript execution cost, which can get hung up by the main thread. You still have to worry about performance with your CSS. There's just a little bit of overhead which is not zero overhead, right?

[00:02:53] Tailwind has no execution layer, it is just a style sheet. So that is a benefit, right? You've offloaded everything to the CSS rendering engine, which is very, very fast and very performant, and has been rendering CSS for a lot longer than most of us have been writing code.

[00:03:10] I'm not gonna say all of us, but at least me, it's been doing it a lot longer than I've been writing code. So with that in mind, all you have to do with TailwindCSS is you don't have to import any JavaScript or anything like that. You're just gonna add CSS classes, that's it.

[00:03:26] It's just adding CSS classes to get things to look the way that you want them. So you and I are going to re-skin the entire adopt me pet app from the Complete Intro to React V6 with just writing classes, and not writing any CSS whatsoever. We're actually going to delete the style-sheet.

[00:03:47] So this will be fun or it'll be terrible, and it's up to you to decide how you feel about it. This is a highly opinionated thing, and you might hate it, and that's totally okay. But I want you to understand why you hate it or love it for that matter.

[00:04:03] So I want you to come here, and I want you to just copy and paste this. Well, first of all, we're gonna be doing it with the project that we built in Complete Intro to React V6. So you can see here, I have a copy of it, this is literally that 12 portals and refs.

[00:04:20] If you look at the project here, let's just open it, so you can see it. There it is. Starting from this one here, portals and refs, so I just have a clean copy of this. I'm gonna run bpm install like the rest of you, and then we're gonna install some more dependencies.

[00:04:39] We're gonna start getting into the project. So I've done that here, that's exactly what this project is. Just a bit of a code tour for you, there's babel, there's eslint, there's prettier, there's parcel, we're using parcel as the bundler here, react, react-dom and react-router-dom. Pretty bare bones React project in that respect.

[00:05:05] There's prettier, eslint, babel, modify some of these here in just a second, and then several React files here. So I'm gonna go ahead and run npm install. It's gonna install all of our dependencies here. It'll take a second cuz parcel in particular has a lot of dependencies. We are using parcel 1.12.3, which does have some critical vulnerabilities.

[00:05:39] So just be aware that you can expect to see these, it's fine. We're not sending this out to production, it's not a big deal. That's just the last version that worked with this course. By the time that you see this, there might be a newer version that might work better.

[00:05:53] But for now let's just stick to 1.12.3, I know it works with that version, okay? So if you look here in your package.json, you have several scripts that we can run. The one that we're gonna run right now is this one dev, that's gonna start out our dev process.

[00:06:11] So we're gonna do npm run dev, and that's gonna build our project. It's gonna run a local host server for us on 1, 2, 3, 4. So you can see here, this is our project. It's got a location, we can search for dogs only, or let's look for rabbits.

[00:06:33] You can see here, it'll switch what breeds are coming in via an API, always looked just to dogs. There's a theme selector which changes all the buttons on the site. That's kind of the tour of the website. This is my puppy, Luna, she's adorable. Okay, so we're gonna be working with TailwindCSS.

[00:06:54] And like I was alluding to earlier, we're not gonna actually write any CSS ourselves. We're just going to be adding CSS classes to various different components. And that's going to style our application for us without writing any CSS. This might feel a little weird and gross to some of you, but just stick with me.

[00:07:12] And once you kinda get over that initial hump of [SOUND], then hopefully we get to the point of mm-hm. I don't know, that's what I'm going for here is that trajectory from gross to maybe this is okay. We'll see how much I succeed.