React Workshop — Job Board, Part 1

In this workshop, we create a simple job board app. In order to follow along, you will need to create an account on Turbo 360. We start with static data rendered on basic React components then integrate a simple REST API for fetching real data. We then create a few fake jobs which are persisted to the Turbo Datastore and render those jobs on the React frontend. This project does NOT use Redux and is a good starting place for those completely new to React but have some experience with basic web development (HTML/CSS, JS, jQuery etc).

In Part 1 of this workshop, we create a React project using Turbo 360’s scaffold, learn about components, and start building our job board website. In order to follow along with this

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

Getting Started

Ensure you have Node version 6 or higher.

$ node -v

We need to make a few global installations before starting a Turbo project, so run the following commands:

$ sudo npm i -g gulp
$ sudo npm i -g webpack
$ sudo npm i -g turbo-cli

If you already have turbo-cli installed, you can run the installation command again to update it to the latest version. The CLI is what allows us to connect to Turbo’s live environment.

In Terminal, navigate to where you do your programming — for this tutorial’s purposes, that will be the desktop.

$ cd ~/Desktop

Create a new Turbo project by running the following command:

$ turbo new job-search --react

The ‘- -react’ flag tells this command to generate a React/Redux project with a Node/Express backend. For this project we won’t be using Redux, but Turbo does provide it in its scaffolding options. Run the following commands:

$ cd job-search
$ npm install

This will install all of the dependencies required for the project to run.

Go back to the Turbo website and create a new Vertex app called “job-search”. Copy the APP ID from the right side of the window. This unique ID allows us to connect our local source code to the project we just created on Turbo by running the following command:

$ turbo app PASTE_APP_ID_HERE

Run Turbo’s devserver:

$ turbo devserver

Use your browser to navigate to localhost:3000. If you see the following Turbo application, then everything is working properly so far.

To stop the devserver, press CTRL+C on your keyboard.

Next, deploy your project to Turbo’s staging environment. If this is your first time working with Turbo 360, first connect to your Turbo account:

$ turbo login

And enter the same credentials you used to create your Turbo account. Then, deploy the project to Turbo’s staging environment:

$ turbo deploy

Deployment usually takes about 1–2 minutes. When it is finished, you will see something like:

DEPLOY COMPLETE: http://YOUR_STAGING_URL.turbo360-vertex.com

This is the link to your project hosted on Turbo’s staging environment. Open this page in your browser, and you should see the same page as earlier.

Run the devserver again, and open your project in your preferred text editor.

Project Architecture

This project follows a standard Node/Express architecture, and has React integrated by default. When you look at the application in your browser (on localhost:3000 or the staging environment), you are seeing the file views/index.mustache (Mustache is a templating engine that allows us to inject data dynamically into HTML files). Open this file, and you’ll see that the expected content isn’t there. This is because the data is being injected via React. React uses client-side rendering, which means that the visual content of the page is injected after the initial page load. In this case, and in most cases, the react code is injected into the div with the id ‘root’.

The React source code is coming from the src directory, with the index.js file being the entry point. Open the file, and you will see that on line 5 we are importating we are rendering a component with the name ‘Intro’. On line 18, we tell the root div to render this component. Components are blocks of HTML that can be reused throughout a React project. Now, open this component and you will be able to see the code that is rendered on our site.

Building Our Application

First, we change src/index.js to display a simple title for our website, and remove the Intro component. We also remove the provider tags, as they are used for Redux which is outside the scope of this workshop:

If you run the devserver and reload localhost:3000, there will be no change. This is because we need to re-compile our React code to commit the changes. To redefine our bundle, which is included on lines 12 and 13 of views/index.mustache, we use a tool called webpack. Open another terminal instance or tab and navigate to the root directory of the project and run the following command:

$ webpack

Then, with the devserver running, refresh the page. You will now see the changes we made.

Creating Components

While our code up to this point is valid React, it isn’t exactly good React. We want to create a new component that loads a feed of job postings. Run the following commands:

$ cd src
$ cd components
$ touch Feed.js
cd ../..

Open your new file and add the following code:

Then go back into index.js and import and render the new Feed component. If you reload the app right now, the Feed won’t show because we need to recompile using webpack. In order to avoid running the webpack command every time we make a change, we run it with a watch flag:

$ webpack -w

This tells webpack to watch our files and recompile whenever it detects changes. Now check the project and you should see the updated component:

Next, we add a list of a few sample jobs to this component:

Since we have webpack watching our files, you should be able to refresh the page and see the changes without manually recompiling:

Styling a Component

Next, we add some styling to Feed.js:

Notice that while this looks like HTML code, some things are a bit different than what you might be used to. That is because this is JSX code. When using JSX, the keyword “class” is reserved, so we have to use “className”. The syntax for styling is different as well, as it uses double curly braces and commas in place of semicolons. Reload the page and you should see the new styling we added:

Now that we know our styling is working correctly, we want to actually place it in a separate JSON ‘style’ object, then call that object from each div that should have that styling. We also add a margin to the bottom of each list item:

Notice that the style syntax uses single curly braces instead of double now. If this is working correctly, your page should now look like:

Now we are going to change the page layout by using Bootstrap. First, we put our job list in a Bootstrap class called “col-md-8”. This means that our list will be 8 units wide out of a total 12 units available (this is part of Bootstrap’s grid system). Then we add another empty column with a width of 4 units next to it, which will eventually be used for a signup form.

Our page looks pretty much the same at this point, except our list is not as wide as it was previously:

Thanks for following along up to this point. In Part 2 of the tutorial, we are going to move our job list into its own container, and continue with the rest of the site.