Use JSX as an Express templating engine with react-engine

[00:00] Hey, guys, in this video, we are going to take a look at React Engine which is a library from PayPal. They've got a pretty wordy description here, but fundamentally it allows us to use JSX as our Express template engine.

[00:12] To get started, we're going to npm and install React Engine. We're also going to install something called "Node-JSX" which allows us to require JSX files in node. Once that's installed, we're going to go out and setup our Express application. We're going to call that server.js. We'll go ahead and get started here.

[00:33] We are going to require node-JSX. We're going to tuck under that .install that's going to let us require JSX files throughout our application. We're going to setup Express or we're going to require Express. We're going to go ahead and require what we're going to call the renderer, but we're requiring React Engine. We're going to set our app to Express.

[00:59] We're going to create our view engine with React Engine by calling render.server.create. We're going to go ahead and set that Engine by calling up that Engine, pass in .JSX and pass in our Engine. We're going to go ahead and set our views. This is all pretty standard right here.

[01:24] You would do the exact same thing with something like Jade, or EJS or whatever you might be using. We're just going to have to a directory called "Public," another directory in there called "Views." We're going to go ahead and set JSX as our view engine. If you've used Jade or something like that, right here, you'd normally type Jade or whatever or type in JSX.

[01:47] We're also going to set this custom view. This is where the real magic happens. We're going to call renderer.expressview. That's our special magic sauce that we're getting from React Engine to be able to create these types of views.

[01:59] We're going to setup a path for our static files that we might need. We're not really going to use this in this tutorial but we'll certainly need it later. That's going to be dirname and /public so that we can get towards CSS and Static JS and things of that nature. We're going to go ahead and setup our first couple routes.

[02:22] The empty one is going to go to a function called "Index." We're also going to have this one that has a parameter of message also goes to Index. We're going to go ahead and set our Express app to listen on Port 4000. Let's go ahead and create this index function.

[02:37] It's going to take in a request and a response. This is the beauty of it. We don't have to fudge around with any special templating languages outside of JSX. We're just saying res.RenderIndex which is going to be our JSX file. We're going to pass in title as a prop to that file. We're going to say if we've got the param of message, otherwise use Home for that prop of title.

[03:04] Let's go ahead and create our public views directory and we're going to create a JSX file called "Page." This is going to be our prop HTML file. Here, we're going to require React. We're just going to start building up this component which is going to be called "Page." In our "Return," we're going to lay out a full HTML Page. There's our HTML tag. We're dropping a Head so we can bring in a title for some SEO. Here, we'll just pass in this props.title.

[03:39] We need to create a body tag. Inside of the body tag, we're just going to interpolate this.props.children. Anything that gets passed into this component will just be passed in right there. [inaudible] page.

[03:52] We're going to create our actual index view. In the file, we're going to call that Index.JSX. Here, we're going to, of course, require React. We'll also require our page component, require Page.JSX.

[04:12] We go ahead and create our Index component called "Index." In the return of that, of course, we're going to wrap everything in our Page Component. That should be a capital P. Got to enclose that guy.

[04:30] Inside of this, for right now, we're just going to return...Oh, I'm sorry, we're going to let it inherit the props so that we can drop that into the Title tag of the HTML page. Inside of this this.props.children, we're just going to drop in an H1 within our HTML this.props.title. We'll go ahead and export our Index Component.

[04:52] Back here on the server, we are looking pretty good. Let's go ahead and run node man Server.JS. We'll try this out in the browser. Load this guy up. Cool, we've got our home page.

[05:07] If we pass in a message parameter, we'll say Egghead, everything looks to be working. We'll pass in SEO awesome. That's available on our Title Tag and we're rendering React HTML. Everything seems to be working.