Task Tracker - Part 1 - Basics + Router

October 11, 2018

This will be a three, potentially four, part series that will touch various aspects of the React framework as we build a very simple Task Tracker. In addition to the React piece later on we will also explore a basic RESTful API written in PHP.

The first thing you will want to do is install NodeJS, which includes NPM.  These are important for running our React site locally and installing NPM packages that we will be using.

Installing NodeJS is really easy, just go to nodejs.org and download the NodeJS package that you want to use and run the downloaded program. 

Now that we have the necessary things installed to proceed, it is time to setup our project.

First thing to do is to open your command prompt (if you’re on Windows) and navigate to the directory you want your project directory to reside in.  Once you are there, type the following.

npx create-react-app my-app

You can then start your React app doing the following:

cd my-app
npm start

This will open your React app inside your default browser. Any saves you make magically refresh the browser page. Pretty neat.

So now you have created your React app and started it!  That rotating logo is neat, but if you are lik me, you are probably looking at the file structure in your editor and wondering what the heck are all these directories and files and how do I dive into creating my first app.

The "node_modules" directory can be ignored, so can the "public" directory for the most part.  Remember we are working in a development environment, so for instance the "index.html" file doesn't contain any references really to your app until it is compiled, which is when the React JavaScript is added to the file.  You can see that if you look at the source code of your app in the browser.

So our focus is primarily going to be on the "src" directory, as this is the directory that we will be doing our work in.  We can work on a cleaner file structure later, but for now it isn't important.

App.css
App.js
App.test.js
index.css
index.js
logo.swg
serviceWork.js

When the React app compiles “index.html” references “index.js”, so let’s peek into this file:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

We can see that this file is referencing the “<div id=”root”></div>” tag in the “index.html” file with the “document.getElementById(‘root’)” code.  And then rendering “App” from “App.js”

<div className="App">
  <header className="App-header">
    <img src={logo} className="App-logo" alt="logo" />
    <p>
      Edit <code>src/App.js</code> and save to reload 2.
    </p>
    <a
      className="App-link"
      href="https://reactjs.org"
      target="_blank"
      rel="noopener noreferrer"
    >
      Learn React
    </a>
  </header>
</div>

And thus, we get what is included in “App.js” outputted to our browser window.  Go ahead and mess around with the HTML code and as you save your changes your browser should refresh automatically. Fun.  Let that moment of triumph hit you, then let the feeling of, great, now I want to show different screens and components take over.  With that lets move on.

Let’s make something simple

On the React website their idea of simple app was to build a complete mini-game.  I don’t know about you but I like projects that build on each other, starting really basic and becoming more complex instead of just diving.

This tutorial is going to focus on switching pages using a router.  My next tutorial will go into user registration and sign-in, so we can track who is roaming the app.  Then I will build further upon that tutorial to add additional functionality, allowing us to slowly build out a very basic but working app.

Understanding Components

Your React app is going to be made up of “components”.  For instance, “App.js” above is a component.  If you use Facebook you can get an understanding of how the page is broken into components, the “Wall” is a component and each “post” on the wall is a sub-component.  The menus are components, etc.  Each piece is self-contained and can be individually updated as needed.

What do we need to start?

We are going to be building a task manager, so to start I just want to build out the various components without any behind the scenes logic and set them up in a way that we can just move between the components logically with basic HTML links.  The goal here is just to let us get a bit comfortable with how things are routed.

I like to draw a conceptual overview of what I want to build before I start.  These drawings in a way act as my development doc when I start, they allow me to brainstorm the flow of the site/app and jot down notes on what I want to have happen when certain pages are hit.  Yes, I use a lot of notepads 😊

React Router

The first thing we are going to want to load up is “React-Router”, this will allow us to switch between “pages”.  Unfortunately, it isn’t something the is part of the core React library, so we must use NPM to install it using the following command from our “my-app” directory:

npm install --save react-router-dom

Notice how I included “-dom” at the end of “react-router” that is because I am developing for the browser and it is suggested by the developers of React Router to do that, if you were building a native application you should use “react-router-native”.  These files will load into the “node_modules” directory.

If you want to visit the React Router website, it is: https://reacttraining.com/react-router

Components

The next thing we are going to want to do is setup our components.  For this app we are going to want the following components:

signin.js
register.js
dashboard.js
task.js
header.js
dashboardTask.js

We are actually going to create these components in a new directory under “src” called “components”.

So use your favorite editor, to create the following files:

signin.js

import React, { Component } from 'react';

class Signin extends Component {
    render() {
        return (
            <div>
                <p>Signin Component</p>
                <p>
                    <a href="/register">Register</a><br/>
                    <a href="/dashboard">Dashboard</a>
                </p>
            </div>
        );
    }
}

export default Signin;

register.js

import React, { Component } from 'react';

class Register extends Component {
    render() {
        return (
            <div>
                <p>Register Component</p>
                <p>
                    <a href="/signin">Sign-In</a>
                </p>
            </div>
        );
    }
}

export default Register;

task.js

import React, { Component } from 'react';

class Task extends Component {
    render() {
        return (
            <div>Task Component</div>
        );
    }
}

export default Task;

header.js

import React, { Component } from 'react';

class Header extends Component {
    render() {
        return (
            <div>Header Component</div>
        );
    }
}

export default Header;

dashboardTask.js

import React, { Component } from 'react';

class DashboardTask extends Component {
    render() {
        return (
            <div>DashboardTask Component</div>
    );
    }
}

export default DashboardTask;

Router + App.js Modifications

Now that we have our components, it is time to make our modifications to the existing app in order to include them.

First lets setup a router file, we will call it “routes” and place it into the “src” directory, here is the code we will include inside it:

import React from 'react';
import {BrowserRouter,  Route,  Switch} from 'react-router-dom';

import Signin from '././components/Signin/Signin';
import Register from '././components/Register/Register';
import Dashboard from '././components/Dashboard/Dashboard';
import Task from '././components/Task/Task';
import NotFound from '././components/NotFound/NotFound';


const Routes = () => (
    <BrowserRouter >
        <Switch>
            <Route exact path="/" component={Signin}/>
            <Route path="/register" component={Register}/>
            <Route path="/dashboard" component={Dashboard}/>
            <Route path="/task" component={Task}/>
            <Route path="*" component={NotFound}/>
        </Switch>
    </BrowserRouter>
);

export default Routes;

I think it speaks for itself, we import the different components, then we setup routes to each of those components.  You can easily add additional components to the router by following exactly what we did above.

Now that we have our router, lets update “App.js” so that our app will actually use the router.

import React, { Component } from 'react';

import Routes from './routes';

class App extends Component {

    constructor(){
        super();
        this.state={
            appName: "Banana",
            home: false
        }
    }

    render() {
        return (
                <Routes />
        );
    }

}

export default App;

As you can see we made some changes, though we could have left the logo and css file I decided to just remove them and add the a references to the “routes.js” file.  I’ve also updated what is rendered so that the routes are utilized.

Note that though I am simple including a call to “<Routes />” I could just as easily include other HTML here as well that would be used globally.

Conclusion

So that concludes this initial tutorial.  You should now have a feel for React, with the ability to setup a router and move from page to page.

In my next tutorial we are going to add Bootstrap as our UI and add a method of holding on to session data to get us ready for our user management system.