Task Tracker - Part 2 - UI and Storing Data

October 17, 2018

Welcome back to my tutorial series regarding React. In the first part I went over setting up our React project, creating the components we will be using for this series and getting the router working. Now this article is going to be focused on a few of the things that I would consider minor, but also important. For instance, the UI is minor, we are quite capable of creating some ugly websites that focus purely on functionality. But I like a clean interface, I also like Bootstrap, so that is what I intend to utilize, you can change things up for whatever UI framework you like to use. React also allows you to compile CSS when you build your app, and I’ll go over that as well. The other item I want to hit is passing variables. Again, it is rather minor on one hand, but important on the other hand. So, before we get into registering users and managing sessions, I thought it would be useful to cover variables.

I’m all for utilizing free frameworks, well not all frameworks, but some of them.  In this case I like using Bootstrap. Now there are actually a few different ways we can integrate Bootstrap.

CDN Route

The first is to just include the CDN files in the “index.html” file under the “public” directory.

Simply put the CSS files into the <head> section of the file and places the JS files right before the </body> tag.  That’s it!

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

  </body>
</html>

Dependency Route

This was another method we could have used since we utilized the CLI to create our project with “create-react-app”.  With this method we’d have to use NPM to install Bootstrap:

npm install bootstrap

Once it was installed, then we’d have to update our “App.js” file to import the CSS like such:

Import ‘bootstrap/dist/css/boostrap.min.css’;

import 'bootstrap/dist/css/bootstrap.min.css';

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import registerServiceWorker from './registerServiceWorker';



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

registerServiceWorker();

That code goes at the top, however before we can use the JavaScript components we’d need to also install JQuery and Popper:

npm install jquery popper.js

And of course, we’ll have to make additional updates to our “App.js” file, right under the Bootstrap CSS import:

Import $ from ‘jquery’;
Import Popper from ‘popper.js’;
Import ‘bootstrap/dist/js/bootstrap.bundle.min’;

import 'bootstrap/dist/css/bootstrap.min.css';

import $ from 'jquery';

import Popper from 'popper.js';

import 'bootstrap/dist/js/bootstrap.bundle.min';

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import registerServiceWorker from './registerServiceWorker';



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

registerServiceWorker();

Reach Bootstrap Package Route

The last method is to use NPM packages that recompiled Bootstrap components to specifically work with React. Here are some of those packages:

React-bootstrap (https://react-bootstrap.github.io/)

Reactstrap (https://reactstrap.github.io/)

I went with the third option and installed “react-bootstrap” as I wanted to use Bootstrap modals without having to reinvent the wheel of making it work.

Session variables

Regardless of how a website or application is written, it is important as we all know to be able to make session data available.  In the end you have two methods, one is cookies and the other is local storage.  For our example we are going to utilize local storage to hold our session data.  Please note that even though we are using it for holding our session data, you can utilize local storage for many things.

The first thing we need to do is add the ability to use Local Storage to our app, lets turn to NPM again.

npm install --save local-storage

Now we can set variables as easily as this:

localStorage.setItem(‘key_name’,’key_value’);

And we can then get those variables with this:

let value = localStorage.getItem(‘key_name’);

Let’s continue and utilize these Local Storage functions…

Restricting router components

Since we are now passing variables we can test some router restrictions based on those variables.  This will be important as we don’t want users that are not signed-in to be able to access certain pages.

We will be adding access restrictions to the “Dashboard” and “Task” components.  I will also be adding restrictions if you are already signed-in on the “Signin” and “Register” components.  This should force us to only be able to touch pages that we are supposed to be on.

Conclusion

Great another tutorial down.  I know these weren’t hugely interesting topics, but they are important.  Join me in my next tutorial which will add interactive forms to our task manager that will communicate with a backend RESTful API.