Check out a free preview of the full Complete Intro to React v2 (feat. Router v4 and Redux) course:
The "Separating the Client and Server Code" 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:

In order for Universal Rendering to work, the application must be able to run both from the server-side or client-side. Brian spends a few minutes separate the client and server aspects of the application. The core logic of the application will now reside in an App.js file.

Get Unlimited Access Now

Transcript from the "Separating the Client and Server Code" Lesson

[00:00:00]
>> Brian Holt: So, what we're gonna do is we're gonna create a new file and we're going to put it in, not in our JS directory but in the complete intro-to-react directory. And it's going to be called server.js.
>> Brian Holt: Okay. We'll come back to that in just a second, but that's what we'll need.

[00:00:28] But in the interim, we're going to create another file. This is going to be called app.js.
>> Brian Holt: And we're gonna put that inside of the .js directory.
>> Brian Holt: So, the reason we created app is we're gonna move most of the code out of client app and put that into app.js.

[00:00:53] App.js is going to be run both on the server and on the client. The client app is only going to be around in the browser. Why is that? Well, this render right here, this is actually what puts it on the DOM. If you try and call the render inside of node, it's gonna blow up because the DOM is not there.

[00:01:12] So we need to separate browser concerns from universal concerns. When I say universal, I mean happens both on the client and on the server, okay? So, what we're going to do here, is we're basically going to copy and paste almost all of this to app. The only difference is, I think, what's down here instead of render down here we're going to say, export default App.

[00:01:47]
>> Brian Holt: And also, we don't need anything from React DOM in here as well. So, you can delete those imports as well.
>> Brian Holt: So, React DOM, delete this import right here.
>> Brian Holt: Also, for fun, notice this has no state. This is a really good place where we could just make this a stateless functional component.

[00:02:24]
>> Brian Holt: There's no necessary burning reason to.
>> Brian Holt: Let's see. You just fix it. Reinvent.
>> Brian Holt: No. Don't do that. You don't know how to do that. [LAUGH]
>> Brian Holt: There we go.
>> Brian Holt: Right? I think, it's a good idea. You don't have to if you don't want to, but less things going on.

[00:02:56] So, I think it's a good idea. So, we'll do it. Okay. So, now go back to client app.js. Delete everything in there. And we're just going to import React from 'react'.
>> Brian Holt: Import { render } from 'react-dom'. Import
>> Brian Holt: Yeah, I forgot to do that, too, so we'll do that momentarily, as well.

[00:03:35] import { BrowserRouter } from 'react-router' and import App from './App', okay? And then, here, we're going to render BrowserRouter><App./><BrowserRouter>, document.getElementByID
>> Brian Holt: App, okay. So, we have to go back to app and take out the browser router as well, because that's also a browser concern. That's gonna interact with like window.location and you don't want that to try and happen in the node environment.

[00:04:32]
>> Brian Holt: So, save that, go back to app and take out browser router.
>> Brian Holt: Yep, so.
>> Brian Holt: Yeah, one last thing we're gonna do,
>> Brian Holt: Is go to your index .HTML
>> Brian Holt: And here we have React has not yet rendered. There's a million and a half ways you can do this, I'm just choosing one way to do this, but it actually makes no difference.

[00:05:24] We need some way to template our React string onto this HTML. I'm gonna do it with low dash is template, but you can do it any way that you want to.
>> Brian Holt: So, this is the way that you do low dash templating, it's not particularly interesting, it's just effective.

[00:05:46] So, if you wanna do handle bars, if you wanna just make your own string, if you just literally want to do string concatenation, these are all fine. This is just one that works really well for me.
>> Brian Holt: Okay?
>> Speaker 2: About the EJS loader.
>> Brian Holt: What's that?
>> Speaker 2: EJS loader?

[00:06:09]
>> Brian Holt: Yeah, there's a.
>> Speaker 2: J2.
>> Brian Holt: The one that webpack will take care of all of it, right? Yeah, no, that's probably even better. But a little bit more configuration.