React Workshop — Job Board, Part 2

In the previous part of the workshop, we created a React application using Turbo 360’s command line interface and scaffolding tools, learned how to work with components, and began adding content and styling to our page. In Part 2, we will learn how to use containers, and add the ability to post and retrieve jobs to and from the Turbo 360 Datastore.

To view a video version of this workshop, click HERE.

Adding a Container

We want to separate our job list into its own Container, so create a container like so:

$ cd src/components/containers
$ touch Jobs.js
$ cd ../../..

Create a very simple container component, just to ensure it works:

Then open up src/components/contains/index.js. We want to use this file to export the Jobs container instead of the Users container. This step isn’t exactly necessary, but it makes it way easier to manage your project when you have to export multiple containers.

Now, go back to Feed.js and include the new jobs container. Cut all of the other list code from the file as well:

Next, we have to restart webpack. This is because it only watches the files that were available when webpack started, and we’ve created a new file. Stop it using CTRL+C, then run it again:

$ webpack -w

Make sure the devserver is running, then reload localhost:3000. If your page looks like the following, then your container is working properly:

Now we want to actually add our job list into the Jobs.js container. Don’t forget to move the styling over as well. Jobs.js should now look like:

And your webpage should look the same as it did earlier:

Now our project architecture is well-designed.

Retrieving Backend Data

Next we want to create a REST API which allows you to create and retrieve jobs. This will allow us to render jobs dynamically, rather than statically adding them into our JSX code. This means that we are going to move away from our React code for a bit and work with the Node/Express backend.

Posting Jobs

Open routes/api.js. This where we are going to create our API endpoints. Create a POST handler which will allow us the receive data from an HTML form on the frontend. For now, we are just going to send the data back exactly as we receive it, just to ensure our route is working.

Next, we need to create an HTML form where we can submit jobs to the backend. We do this in our views directory, so create a new view like so:

$ cd views
$ touch addjob.mustache
$ cd ..

Notice that this is not a React component. It is an entirely new page. Add the following simple form, and note that we no longer need to import the bundle scripts at the bottom of the page:

Now, we need a way to access this new view. Open routes/index.js and create a new route handler for this page. We also remove the example routes that are included in this file by default:

Now ensure the devserver is running, and navigate to localhost:3000/addjob. You should see the simple form we just created:

Next, we need to tell the form where and how it should direct its data. We also add the container class to the body tag to give it some padding.

If you fill out the form, you should see the data we just submitted being returned directly from our backend route.

The next step is to actually save this data somewhere. We are going to do this with the Turbo Datastore, which is free to use with all Turbo projects. Add the following code into api.js:

What we’re doing here is sending the data from our form to the ‘job’ collection of our Turbo Datastore by passing it req.body. The ‘.then’ designates what should happen if this is successful, while the ‘.catch’ designates what should happen when there’s an error, which we are going to fill in soon. For now, submit the form again, and you should see something like this:

This new information, such as “timestamp” and “id” are coming from the Turbo Datastore. If you go to your admin dashboard in turbo and click on the datastore for this project, you will see that the data you just submitted via the HTML form has been persisted to the datastore under the ‘JOB’ collection:

Next, add some code to handle an error when persisting to the datastore:

Then add a few fake, but realistic jobs to the database using the HTML form. You can check the Turbo Datastore again to ensure that they were persisted successfully:

Fetching Jobs

Next, we add a handler for getting jobs. For now, just return the data in JSON format using ‘turbo.fetch’:

If you navigate to localhost:3000/job, you should see all of the jobs you just created:

Now we have the ability to create new jobs and fetch jobs from our database. In the next part of the tutorial, we will begin to display jobs on the front end with React.