Check out a free preview of the full Complete Intro to React v2 (feat. Router v4 and Redux) course:
The "Organizing Code in React Components" 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 spends a few minutes talking about how he organizes his code in a React component. He typically starts with the propTypes then includes the lifecycle methods, custom functions, and finally the render() method.

Get Unlimited Access Now

Transcript from the "Organizing Code in React Components" Lesson

[00:00:00]
>> Brian Holt: The way that I personally organize my React components, this is kind of like Brian Holt, the way I do things. It's not necessarily gospel, but I found it to be a common pattern to arrive at. As I always have propTypes first, 100% of the time, first thing in the component is propTypes.

[00:00:20] This just lets people coming in know, here are the props you're gonna be dealing with. Second thing is getInitialState. Here's the state that you're gonna be dealing with. Then we haven't done any life-cycle methods yet. We're about to within the next, I don't know, half-hour or so. But life-cycle methods would be next.

[00:00:39] After that is all the functions that I wrote, right? So like the handleSearchTerm, that's just a method that I wrote for my convenience. And then the very last thing that I put on there is render.
>> Brian Holt: So that's the way I organize my React components. There's no reason you have to do it that way, but I just find that to be a very readable way to organize my code.

[00:01:05]
>> Brian Holt: Yeah?
>> Speaker 2: They're asking to see cleanapp.js, clientapp.js again.
>> Brian Holt: Any other questions before I move on?
>> Speaker 2: Another question, which method do you prefer for handling secured routes, React router or higher order component?
>> Brian Holt: So secure route being the sense that you probably need to be authenticated.

[00:01:34] There's a bunch of ways you can handle that, and I think higher order components is definitely an easier way to handle that. That's the way I'd typically choose to. A higher order component, just to recap, I think I briefly mentioned it yesterday, but I'll say again, is BrowerRouter itself has no display.

[00:01:51] It doesn't exactly show you anything. What it is, it's a component that encapsulates behavior, right? It's a router, right? And so it's considered a higher order component in a sense that it's supposed to wrap other components in it, and views behavior on whatever it encapsulates. So we encapsulate our app with BrowserRouter and it basically says, okay, now you have routing behavior.

[00:02:13] Now go make your markup and do whatever behavior you were meant to use from the higher order component, right? So you can do the same sort of thing with like Match, right. You could wrap this in a component that only matches when someone is securely authenticated to whatever route they're supposed to be going to.

[00:02:31] And I won't show that today because no one likes doing Auth. I don't like doing Auth. But there's another front end masters course on that, so you should watch that