Complete Introduction to React (feat. Redux and React Router) Modularizing the Code

Transcript from the "Modularizing the Code" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Brian Holt: I don't know about you, but I find interacting or writing my code inside script tags a little gross, because it is. So what we're gonna do is we're actually gonna pull this out into a separate script file right now. So you're free to just cut all of this if you want.

[00:00:22] And then we're going to create a new folder. So I'm just gonna do it here, New Folder. Call it JS.
>> Brian Holt: And then inside JS here, I'm gonna make a new file. I'm gonna call it ClientApp.js.
>> Brian Holt: It's gonna put everything in there.
>> Brian Holt: As just a quick aside, I use Sublime, so I'm gonna show people that are using Sublime just a little useful trick.

[00:00:59] Unfortunately I don't know useful tricks for any other editor. If you Shift+Command+P and you can say install package up here, right, if you have package control, which if you're using Sublime, you should really be using package control. And then you wanna install install the babel package. I already have it installed so I'll just show you what it looks like.

[00:01:26]
>> Brian Holt: This one right here, syntax definitions for EX6 JavaScript with React JSX extensions. Go ahead and install that one, and your syntax highlighting is gonna be way better throughout all of today. So, if you're using them, I've heard it's a real pain in the butt to get it to play nicely with JSX and ES6, so good luck.

[00:01:45] And I believe that there is a babel package for Adam that also works just as well.
>> Brian Holt: Okay.
>> Brian Holt: And everything will still work if you don't have that, it's just that your syntax highlighting might look a little weird sometimes. Okay, so now we've put all this inside of ClientApp.js.

[00:02:12]
>> Brian Holt: And we created the JS directory, we put in ClientApp.js,
>> Brian Holt: And back here, we're going to delete all that. And where it was, we're just gonna put now another source here. src="js/ClientApp.js"
>> Brian Holt: Okay.
>> Brian Holt: So now, hopefully, if we refresh again. It still works still works, right, it still works the way we expect it to.

[00:02:52]
>> Speaker 2: Question.
>> Brian Holt: Yeah.
>> Speaker 2: Is there a reason you put the JS folder outside the public directory?
>> Brian Holt: The reason is eventually we're going to be serving things in the public directory and we're gonna be storing all of our source in the JS directory. So things in JS will not necessarily be served later.

[00:03:10] That's a good question, and another aside I'll say is that this is not necessarily a great workshop for code organization. So definitely don't take this as gospel as the way to organize all of your code. I find that I'm ultimately always dissatisfied with the way I organize code.

[00:03:25] Like as soon as I get far enough down the road, it's like I'm an idiot, right, and so I just embrace the oblivion, I guess. [LAUGH]