React.js Tutorial Part 1
This blog post is more than 1 year old and could be out of date!
Welcome to my tutorial on how to get a website up and running using React.js and Node.js. I am expecting this to be a multipart tutorial as we go through building a job board for my local Node.js Meetup Group, though I am not sure how long these tutorials will last. I hope you enjoy them and if so feel free to share them! You can follow along with my progression on my jobs.nodedc.com github repo
Getting Started with Express
In this tutorial I am going to assume you have Node.js installed since it is becomming standard in so many of today's build processes. If you do not have it installed, check out this article.
The first thing we are going to do is set up a standard express app. This is easy do to through
express-generator using the following command:
$ npm install express-generator -g
Once installed, we are going to create a basic express app. To generate this express app, we run the following command:
With the output of
express-generator we can see that we are well on our way to what we need from Express. This is a bit overkill, but with a few small changes, we should have a working express app which will then run (eventually) our API and serve our React site.
Let's start up this generated site and see what we get. Below is the image that you should see in your browser (at http://localhost:3000) if you are following along.
I then recommend going through the generated code and cleaning it up a little bit. We will not need the
user routes so I just deleted them. I also expanded on the
package.json some to add a description and keywords as well as changed the version to something more reasonable.
react-tools node package. You can do that by the following command:
$ npm install react-tools --save-dev
We add the
--save-dev flag to make sure the
react-tools package is saved as a development requirement in our
** Note: ** You could also install
react-tools globlally if you'd like.
Next we want to download React 0.12.2, extract, and move
react-0.12.2/build/react.min.js to our
express-generator is Jade. It is a bit difficult to comprehend at first (and
express-generator allows you to substitute either EJS or Handlebars if you are more comfortable with those), but I find it super simplistic!
react.min.js to our templates, we just append it to the bottom of our
views/layout.jade file as below:
DEBUG=jobs.nodedc.com ./bin/www we should see our starting screen again, but now it's React.js ready. Now our templates should be ready for our React Components!
Adding a React.js Component
Now that we have our express app running react.js, we can now start the process of writing our react application. In this part of the tutorial, we are only going to do a basic "Hello World" component, but next time we will start developing the components we need for our job board. So first, let's create our component.
The first thing we want to do is create the
div needed for react. In the
views/index.jade file, add a div with an
id of "example". With jade, your
index.jade file should look like this:
extends layout block content #example
Next we want to create a simple react.js component in our
helloworld.jsx. This component should look like:
React.render( <h1>Hello, world from React.js!</h1>, document.getElementById('example') );
Because we are using the
views/layout.jade file to the following:
And run the
react-tools package to compile our component with the following command:
Remember to use the
-x flag as we used the extension
.jsx for our jsx code. Now running the express server again we should see:
There we have it. A pretty simple Hello World app with React.js and Express.js. Next we will clean up this process with some automation help from gulp and start building react.js components to help us with our NodeDC job board!