Complete Intro to React, v2 (feat. Router v4 and Redux) Configuring CSS Imports

[00:00:00]
>> Brian: Thus far has pretty much just been like a hack around intro to React. That's just kinda showing you the different use cases and kinda like the basic gist of like what React is and kinda building some toys. What we're gonna do now is we're actually going to, together, build an app over the next couple, lots of hours until the end of our workshop.

[00:00:24] And we're just gonna build like a very basic Netflix experience. Little did you know, this is actually just a 16 hour advertisement for Netflix, jokes on you. [LAUGH] But yeah, we're just gonna build like a really basic app. It's gonna have a router. It's gonna have couple different pages, it's gonna do Ajax request, we're gonna over some pretty common use cases for what your app might do.

[00:00:49] And then you can take out pieces, put pieces back in whatever your app requires. And I think that's one of the cool parts about React as opposed to something maybe more complete like Ember like once you're in Ember, like I have only awesome things to say about Ember.

[00:01:06] It's a great framework that does a lot of amazing things and especially if you're drawing within the lines Ember, like if you are within the happy path of Ember, you can write Ember way faster than you can write React. Like no doubt in my mind you can do more with less code.

[00:01:22] What I kind of tend more towards React is, I often want to draw outside the lines, right? I want to do different crazy things, and I wanna do things my way. And I wanna switch this module up, for this other module, right? Like that kind of flexibility to do with what's good with my app and React is definitely more towards that kind of mindset.

[00:01:42] And so I dare say, it's kind of, it has maybe a higher barrier to entry. I don't know if I would say higher barrier to entry, but configuring React is gonna be a lot more difficult than something like Ember which is gonna be pretty out of the box, especially with EmberCLI which is fantastic.

[00:01:58] So, I say all this to say that I'm going to introduce you to a bunch of different modules as we go through. Like React Router, Redux, Redux Thunk, all these different libraries that I'm going to give a lot of emphasis that this is just one way to build an app, right?

[00:02:16] This is a pretty good way, I'm gonna assert it's a pretty common way. But if you don't like some piece of this, like say you're not a big fan of react router, right. You can swap that out for director, and that's totally fine. Like React kind of lends itself to that sort of swapping and plugging this module, and taking this module out and putting this other one in.

[00:02:38] Whereas, Ember's kind of more like, here is your entire framework, now go forth and make something really, really cool. So they're just different methodologies, they're different trains of thought, and I assert that they're both very valid ways to think about solving problems. Okay, so let me make sure I just touch on everything I want to.

[00:03:02]
>> Brian: One thing is I have predone all of your CSS, because who the hell wants to write CSS, not this guy. [LAUGH] It's just not something I enjoy a lot, so, if you just follow my naming conventions, and the structure of my markup all the style comes for free.

[00:03:20] But that being said here, I'd like to just drop that there are cool things out there, like Radium and Aphrodite. There's libraries for doing your CSS in JavaScript, and kind of melding that together with React so you have everything all together. In one place, we're not gonna do that today because I don't really wanna touch on styling today, that something that you can definitely go and explore on your own time.

[00:03:44] We're gonna do some CSS imports which is kinda of a cool thing, and there is some really really cool things that you can do with this, actually let's go ahead it first and then I'll kind of explain to you why I think this is cool. So go back to Webpack config real quick.

[00:04:02]
>> Brian: Also I just wanted to mention I believe yeah, we are on v2-4, if you need to catch up on branch.
>> Brian: Okay, so we have these rules right here in our webpack.config and what we're gonna do now is we're gonna add another rule. And doesn't really matter which order cuz in this particular case it doesn't matter which order they run in.

[00:04:24] So I'm just gonna put it after, put another object, and we're gonna say hey,
>> Brian: I'm gonna say test.
>> Brian: And if it says, if you see a .css path, then your going to use something called the style loader
>> Brian: And say use,
>> Brian: So what we're gonna do here is, if it passes CSS, we want you to use all of these loaders.

[00:05:03] So you can actually pass multiple build steps in here, that's something you need to do. In this particular case we do. We need to use both the style loader, and we need to use the CSS loader. But let's say we're using les or sass or something like that.

[00:05:18] You can also have that build step around here too. I just didn't because I didn't want to. So first I'm gonna say, first thing you do is you're gonna run style loader. Then after style-loader, you're gonna run another loader but I need to pass in some configs, so I have to give it a whole object instead of just a string.

[00:05:37] And the loader is going to be called css-loader and then options,
>> Brian: And url: false. Okay so does that make sense why I need to pass an object here because I want to config? Style loader needs no configuration it just works as default so I'm just gonna include that one, but the second one I need to put this URL false configuration in, so let's chitchat a second about style verses CSS loader.

[00:06:06] I'm probably going to be mixing these up just a tiny bit because often it If you're gonna include the CSS letter, you have to include the style loader that's just a given. And I believe style loader is actually what's going to inject your styles into your bundle.js, right?

[00:06:21] So we're gonna have our separate CSS file and we're going to bundle our CSS into our bundle.js. And so, we're not actually going to include any css files whatsoever, and it's all going to come with bundle. Now, someone might get uncomfortable with that for good reasons, because then you have to wait for your JavaScript to load before your styles load, typically not a good idea.

[00:06:42] But this is a workshop, so who gives a shit, right I don't anyway.
>> [LAUGH]
>> Speaker 2: More of a general question from. Do you use styles inside react.js components at Netflix?
>> Brian: No we have a last set built out of style sheet than we include that. And that's just cuz that's the way we've always done it.

[00:07:07] So there are really cool things you can do with Webpack, like you can actually have it build out like, critical CSS, in line that, like there's a myriad of things you can do with styles here, that are totally advanced use cases, so I'm going to again plug Ken's workshop about Webpack, I'm sure he covers a lot of that cool stuff.

[00:07:24]
>> Speaker 2: He does.
>> Brian: Awesome. And I, like I am not an expert on it. That's the other thing. As you can see, writing css is not my favorite thing, partially because I'm not good at it and I don't like things that I'm not good at. That's Brian Holt character flaw, to my therapists our there.

[00:07:42] Anyway, so css-loader, that's what's going on here. css-loader actually makes it so webpack can read CSS, that it can understand CSS, that's why we need that. Then the options url: false, this is just a really personal preference that bugs me about the css-loader. If you have a path in there to include this image, It's actually gonna try and inline that image, too into your bundle.

[00:08:06] So now your images, your CSS, and your JavaScript and your markup are all bundled into that bundle.js. I don't know why I draw the line at image, but I certainly do. [LAUGH] So I didn't like that. So that's why that url false is there. That just means don't inline my images.

[00:08:21] Dear God, don't inline them.