Adding React

If you like to see the final version of this project you can get the repo from github

In the first part of this series we successfully installed Keystone JS and created our first data models.

So far so good but if a non-admin comes to our site, all they see is an error message. Let’s deal with that.

If you check the Keystone documentation you will see that they use Jade for templates, but we will do things a little bit differently. As stated in the title we will use React instead.

But before we jump to the fun part we will need to set a route for our app. Keystone runs on top of Express Js, if you are not aware how routing in Express work jump to the following link

Even if you never dealt with Express there is no need to worry, setting routes is pretty straightforward. First, let’s register our route in Keystone. In our Keystone configuration in the root folder we will add the following:

keystone.set('routes', require('./server/routes'));

This points to a file that we haven’t created so let’s do this. In our server folder, we will go to the routes subfolder and create a new index.js file and will add the following:

Now if we spin up our Keystone app from the terminal, when we go to http://localhost:3000/index.html we should see Hello World written on the page.

I know what you are thinking. That’s all great but how does React fit in all this?

OK let’s get some React magic into the mix. For this part, we will switch to ES6. Since ES6 is still not fully supported in Node and most Browsers we will use Babel and Webpack to compile it to ES5.

OK back to work let’s install Babel and Webpack. In your terminal make sure you are in the project root folder and then run:

npm install babel-core babel-loader babel-preset-env babel-preset-react webpack webpack-cli -D

Now we need a webpack.config.js file in our root, where, that’s right, will store our Webpack configuration

To make use of this in our package.json we will add a compile script that will get all our code from the client folder and bundle it into a single file that will be stored in `server/public/js/` folder. Go to your package.json file and in the script section add the following:

"scripts": { "start": "node index.js", "compile": "webpack --config webpack.config.js", "test": "test" },

And finally we will need to point our server to the bundle.js file so then we can load it in the browser. To accomplish that we will need to go to our Keystone configuration and update it like this:

While we are here we also added a path to the img folder where our recipe images will be stored.

Now we have everything that we need to start writing some React.

But before that, we need to actually install React to our project

npm install react react-dom

Great we have added React to our dependencies so lets quickly build a simple functional component that will give you an idea how the information from the Keystone back end will be presented. I will assume that you have some working React knowledge so I wont dive too much in to what the code does since this is not the goal of this tutorial.

In the client folder create index.jsx file and add:

Cool now lets compile this by opening your terminal, navigate to the project root folder and run

npm run compile

Now if you look in `./server/public/js/` folder there should be a bundle.js file.

Let’s import that file in the static HTML on our route, we wrote earlier and also get rid of the `Hello World` statement.

And now lets run the start script in the terminal

npm start

And if we go to index.html in the browser, there should be something like this

Yum, those ramen noodles do look tasty

Nice job, but unfortunately this is all static mark up. There is no real connection between our back and front end. We can add as many recipes as we wish in the admin panel but once we get to our index page nothing will change.

Don’t panic, this all will be fixed in the final part of this tutorial where we will add Redux to glue everything together.