Complete Intro to React v2 (feat. Router v4 and Redux) Complete Intro to React v2 (feat. Router v4 and Redux)

Final Q&A: Starter Kits, Organizing Code, & Best Practices

Check out a free preview of the full Complete Intro to React v2 (feat. Router v4 and Redux) course:
The "Final Q&A: Starter Kits, Organizing Code, & Best Practices" Lesson is part of the full, Complete Intro to React v2 (feat. Router v4 and Redux) course featured in this preview video. Here's what you'd learn in this lesson:

Brian concludes his course: The Complete Intro to React. He spends the last few minutes answering a few audience questions on project starter kits, organizing code, and sharing a few last best practices.

Get Unlimited Access Now

Transcript from the "Final Q&A: Starter Kits, Organizing Code, & Best Practices" Lesson

[00:00:00]
>> Speaker 1: Martin's asking what's needed to get the preact to work on the server side.
>> Brian Holt: Just go check out the preact docs.
>> Speaker 1: There was a comment, or a question that flew by and I can't find it anymore.
>> Speaker 3: It's about VOO.
>> Brian Holt: What?
>> Speaker 3: VOO. I mean, you already said your thoughts on VOO.

[00:00:16]
>> Speaker 1: No, it was about what starter kits
>> Brian Holt: I don't use starter kits. I like.
>> Speaker 1: Do you have any recommendations?
>> Brian Holt: Other than create react apps, that's one I probably should have touched on a little bit more.
>> Speaker 1: Yeah.
>> Brian Holt: Creat react app is from the react team.

[00:00:33] And basically, all that tooling that we spent all this time talking about, it takes care of all of that for you. So it takes care of web pack Babel hot module reload, which we didn't do in here. And it just automatically sets that up for you and just auto generates all of it.

[00:00:48] It builds for production, it builds for development. You can run on just Create React App for a long time but it has no configuration. The cool part about create React app is as soon as you're done, I don't know, I guess I can show you. If I say npm, all right,

[00:01:10]
>> Brian Holt: npm install --global create-react app
>> Brian Holt: And then I say create-react-app test. It's going to scaffold up a project for me. Much like Yeoman or the Rails Generator or whatever. It's going to download all of my dependencies, it's gonna set up a basic like hello world. And it should just pop up my browser with my hello, world already working.

[00:01:41] The moment you have grown beyond what Create React app does for you, you run npm run eject. It then ejects all the configuration files, removes itself from the project, and then you're on your own to manage your own configurations. Super slick, it's an amazing way to get started building an App.

[00:01:58] It's a good way to get started, and then, after you have learned all the tools, as well, it's a really good way to just not have to deal with the tools.
>> Speaker 3: It's also a good way to, kind of, take a look at best practices of today.
>> Brian Holt: Like, what the Facebook Team is actually doing.

[00:02:11]
>> Speaker 3: Yeah, exactly. Checking out Yeah. Exactly what they're doing and some of the things, like why they're changing venues. For instance, they're trying to get support for progressive web apps out of the box, stuff like that. But you can always eject from createrep app, take a look at their settings, and put it into your project, too.

[00:02:36]
>> Brian Holt: Yup.
>> Speaker 1: Do you have any suggestions or opinion on using directories to organize your React app?
>> Brian Holt: I'm terrible at organization. And I assert that everyone is terrible at code organization. Actually the react router has some pretty good examples of core organization just like with the really examples.

[00:02:58] So one might consider checking that out.
>> Speaker 3: Yeah that looks great we do npm star.t
>> Brian Holt: cd text npm start.
>> Brian Holt: So there we go. This is all just scuffle that I would format and do anything,
>> Brian Holt: And if you go into this directory, cd test sublime You can see here it has the package.json for you.

[00:03:37] Pretty barebones. Has an app, has a css index. All this stuff for you just built in. Public directory to serve your favicon from. All that stuff, it's just kind of built out for you
>> Brian Holt: Then if you look here, as soon as I run npm run eject, let's just do that for fun.

[00:04:02] Keep in mind run eject is a one way street or one way ticket, right. You can't uneject once you eject So, just be careful about that, This action is permanent, yes.
>> Brian Holt: So now look at everything that it added.
>> Brian Holt: So-
>> Speaker 1: Some folks are also wondering what your thoughts are on React Boilerplate.

[00:04:31]
>> Brian Holt: Yeah, no, Max Stoiber writes that. Super smart guy, so that's another good place to look for best practices. It includes a lot as well. To articulate why I don't typically start with a boiler plate is I think it abstracts away some of the things that you need to understand.

[00:04:50] And it's a good thing to Dip your toe in real quick. Is this something I like or not. But if you like it you really should go back and build something from scratch learning all the different pieces of it. Otherwise you are like I said going to resent your tools and If you resent your tools and they are not useful to you?

[00:05:08] So it pays dividends to know what your tools are doing. So that's why I do that. What is going on with, all right there, okay.
>> Speaker 3: It's still npm-installing.
>> Brian Holt: Yeah.
>> Speaker 3: I love the shirt. I think it's Todd Motto that has the shirt. It's npm-install and chill.

[00:05:30]
>> Brian Holt: Yeah right.
>> Speaker 3: It's in the Netflix font.
>> Brian Holt: The Netflix font.
>> Speaker 1: [LAUGH] That's cool.
>> Speaker 3: npm-install and chill.
>> Brian Holt: So now, if we go back in here, you can see that there's a bunch more stuff in here. Sorry, that's the wrong file. This one. There's a whole config directory now, that there's the m configuration, paths, polifils, webpack config for dev, webpack and fill for prod there's adjust config,

[00:06:02]
>> Brian Holt: Bunch of stuff. So it does a bunch of stuff for you.
>> Speaker 3: And it's also a great way to eject from like we said, and take a look at the settings, and-
>> Brian Holt: Absolutely.
>> Speaker 3: Decide which ones are right for your project and pull them in.
>> Brian Holt: Yep.