Check out a free preview of the full Complete Intro to React, v3 (feat. Redux, Router & Flow) course:
The "Final Q&A and Wrapping Up" Lesson is part of the full, Complete Intro to React, v3 (feat. Redux, Router & Flow) course featured in this preview video. Here's what you'd learn in this lesson:

Brian answers questions from students and wraps up Complete Introduction to React.

Get Unlimited Access Now

Transcript from the "Final Q&A and Wrapping Up" Lesson

[00:00:00]
>> Brian Holt: So b3/31 that is the last one. So 30 is using react, 31 is using preact. You all can go to check those out if you are feeling so inclined. Go ahead and add inferno and substitute inferno, that is what I was gonna try, I was gonna try real quick if could just switch out, I haven't tried this recently, so it might or might not work.

[00:00:23] Let's just doing preact. Preact doesn't have all of the APIs so I don't know, like, react routers using, I don't know what, like, the redact reduct stuff, like, all those bindings are using, so this might not work, but let's try. Yarn build.
>> Brian Holt: It'll probably build, might not be super happy about it though.

[00:00:53] Yeah, no, see we're stuck in loading hell. So doesn't work, so for now we have to use compact. The way you would eventually fix that, compat is a crutch. It's a good way to like get to using preact, and then what you wanna do is you wanna go strip out the function calls that preact doesn't have.

[00:01:09] And then eventually you can go from the 8 kilobyte library to the 3 kilobyte library, which is even better.
>> Speaker 2: Greg is asking if you have used any JavaScript end testing libraries?
>> Brian Holt: The answer is, I hope you can see like the sadness in my eyes cuz yes, I have.

[00:01:29] [LAUGH] It's important, right? Something like Selenium, Selenium test. You can kind of verify the things that are working. It's important to have the happy path, right? Log in and sign up, and all this different process that are key. They're just so flaky, right? How much time have I spent just messing around with the flaky Selenium test.

[00:01:52] The answer is way too much. There's nothing like Protractor. Protractor's really cool for angular. React doesn't have anything like that, unfortunately.
>> Speaker 2: Well actually in Kent Dodds' testing JavaScript applications course, well it's not out yet, but it will be out on front of masters slash courses soon. You can watch the replay, but he uses the cypress.io

[00:02:19]
>> Brian Holt: I dont know anything about that.
>> Speaker 2: And it's pretty new but he shows how awesome it is and how he loves it and stuff and its way better than solenium.
>> Brian Holt: I have a great amount of fun just like messing around, treading my bundles even smaller, it's like a game to me.

[00:02:34]
>> Speaker 2: I can see that.
>> Speaker 3: Have you used rollup at all?
>> Brian Holt: Rollup is also a really cool packager. It really pushed webpack hard and that's why webpack 2 is as cool as it is, is cuz Rollup like came in and says like no screw you I'm gonna do tree shaking, right?

[00:02:51] That was kinda their thing.
>> Brian Holt: And actually so the way the tree shaking works with webpack 2 is it doesn't actually remove the code itself. It basically outputs the code in such a way that it's unreachable. And then uglify 2, which is the new version of uglify, I guess uglify 3 is about to come out.

[00:03:12] Uglify 2 is smart enough to say this code is never reachable and it just pulls that stuff out. So that's what Rollup was really great for. Roll up is still really great and important. It's great for libraries right? So you want to build your libraries like react. React is built with Rollup and it outputs it in such a way that it's consumable by Web Pack and it's much better that way.

[00:03:37] So I typically recommend use Web Pack for your applications and use Roll Up for your libraries.
>> Brian Holt: That's a good question. Roll Up is really cool. It's a little bit more difficult to wrangle in my opinion, but I think that might be just cuz I have Stockholm syndrome from wrangling so much with webpack so.

[00:04:03] Any other questions?
>> Speaker 2: How do you fell about SASS versus style components and how would you use it in this application?
>> Brian Holt: SaaS is too powerful in my opinion. I don't need a touring complete scripting language on top of my CSS, personal opinion. I think SaaS script is too much.

[00:04:27] To the points that, I remember at Reddit, we had this little bit of SaaS script that generated a bunch of classes that we used, and it just ballooned our CSS files for no good reason. Now, you rightfully can point out, that's your fault. It is my fault, right, but it gives me tools for things that I don't need to do, right?

[00:04:47] So I appreciate some of the things. Like, nesting can be nice. Hand selectors can be nice, but if I have five layers deep and I'm using mix ins, it's too much indirection for me for css. So, I like using post css and including things like auto prefixer. Maybe a couple of extra plugins for nesting and like, that's it.

[00:05:11] Like the least powerful styling rules that I can have, and then, I like to import it as css modules. So, that's my go to of how to deal with css. Style components is really cool. As you can see we messed up our navigating without javascript. Because it does have a run time associated with it and that also kind of sucks, a little bit, right?

[00:05:33] So I might be a little bit more on the Glamour train right now, but I know Max. And I know they're working on getting up to the same speed that Glamour is, and so, it's coming. It's definitely coming.
>> Speaker 2: And where in your config, or whatever, would you add Sass, or PostCSS?

[00:05:51]
>> Brian Holt: There's a couple places to do it, but it would be here inside of your modules. So you'd do something like, I'm making this up so go validate it, but it would be, you'd have a test that would say, basically this here, right?
>> Brian Holt: But instead of being this, it would be like .scss, right?

[00:06:17] Then you would say loader like sass-loader I think is what it is. I'm assuming that's what it's called.
>> Brian Holt: And then you'd have to have one as well on here called style-loader. I can't remember which one comes first. It's important which one it is but let's just assume it comes second.

[00:06:37] What this is going to do is it's going to be able to read your SaSS, and it's also going to be injected into your app. And then I can go into my spinner, and then I can say import spinner, or it would just be import spinner.scss. This equally applies to Sylus or LESS just so you know, or just plain CSS.

[00:07:02] And I've come back to web pack config, and then I'd have to have a plugin in here for style extraction, it's like web pack dot-
>> Speaker 2: I think if you just google SASS web pack-
>> Brian Holt: Yeah, but you have to have something that will pull out the SaaS file and then it's gonna output it in a separate CSS so you can load it separately, but that's the general gist of how to do it.

[00:07:29]
>> Brian Holt: Actually I show you in version two so if you're super interested it's in Version two.
>> Speaker 2: Well thus concludes Version three of React.
>> Brian Holt: Yeah, thank you so much for coming. It was a real pleasure to talk to you all about one of the things I'm pretty passionate about.

[00:07:43] I think React is a really great library and I just think this is a really good way to build large scalable architecture. So I hope you can at least take pieces and parts of this out and bring it in to your workflow. It's okay if there's parts that you don't like, don't include those parts, but it's a puzzle, you get to put together your own puzzle.

[00:08:00] So cool, yeah, thanks.
>> Group: [APPLAUSE]
>> Speaker 2: The last thing I had to ask is do you have any recommendations for further reading. Further people to follow, things to look at in the React community that you're Actually pretty excited about.
>> Brian Holt: I get a lot of my information from twitter, which is a great source of news.

[00:08:30] That's a joke. It can be daunting at times. So the react core team are all super nice, approachable people. So, that's definitely one thing I would suggest is like add soprano. I think that's been out [INAUDIBLE]. They're all super interesting. I think the graph ql relay story is really interesting to follow as well.

[00:08:51] That fits nice, that's a nice puzzle piece to fit with React and like Lee Byron and the team that runs that, they're all really great. I think Jason Miller and Dominic Gannaway, who do Preact and Inferno, respectively, are both amazing, interesting people to follow. The CSS and JS story is really heating up, and I think we're going to see a lot of innovation over the next year about that.

[00:09:17] So Watch Glamor, watch Glamorous, watch Styled Components. Aphrodite is not going away any time soon, and CSS modules in general. I think that story's going to continue to evolve and get better and more interesting. The webpack team was always pushing the envelope as well as the babel team.

[00:09:37] They're definitely two projects that need help so if you can either contribute or give money to I think that's worthy to do as well, same with the Preact Project.
>> Brian Holt: The React doc's really good, I think that's a really good place to look as well.
>> Brian Holt: Yeah that's what I got off the top of my head.

[00:10:03]
>> Speaker 2: Perfect all right thank you. Well until next time.
>> Brian Holt: Yeah until version four.
>> Group: [LAUGH]
>> Brian Holt: [LAUGH]