Emanuele Santanche

Installing React Application

Installing React Application

—

by

esantanche
in

The goal

I’m installing React and many other modules needed for my application.

The application will preform drag and drop operations and animations.

It will use Material Design.

What is the application about?

It’s about displaying a list of products or other objects.

Using drag and drop the user will be able to rank the product their own way.

Their ranking will be stored locally so that the user will find it later, when they come to the website again.

The application is work in progress and you see it here: RankIt Application.

Let’s install React

I’ll use a tool built by Facebook developers.

It’s called Create React App and saves you a lot of setup and configuration time.

First I create a folder for my application and give it the right owner.

  1. root@FREEDOMANDCOURAGE:/srv/sites# mkdir rankit.emanuelesantanche.com

  2. root@FREEDOMANDCOURAGE:/srv/sites# chown -R www-data:www-data rankit.emanuelesantanche.com/

The owner is www-data because the web server needs to be able to read and write in this folder.

Now I use the tool create-react-app to create the React application.

  1. root@FREEDOMANDCOURAGE:/srv/sites/rankit.emanuelesantanche.com# npm install -g create-react-app

  2. root@FREEDOMANDCOURAGE:/srv/sites/rankit.emanuelesantanche.com# create-react-app rankitapp

When running the command “create-react-app rankitapp”, I had to stop mysql, php and nginx to make it work because it needed a lot of memory.

The command was eventually successful and this is what it told me:

  1. Success! Created rankitapp at /srv/sites/rankit.emanuelesantanche.com/rankitapp

  2. Inside that directory, you can run several commands:

  3.   npm start

  4.     Starts the development server.

  5.   npm run build

  6.     Bundles the app into static files for production.

  7.   npm test

  8.     Starts the test runner.

  9.   npm run eject

  10.     Removes this tool and copies build dependencies, configuration files

  11.     and scripts into the app directory. If you do this, you can’t go back!

  12. We suggest that you begin by typing:

  13.   cd rankitapp

  14.   npm start

  15. Happy hacking!

React Material Design

This application is supposed to use Material Design.

I’m going to use a library called React Material Design.

You can see it at work here: https://react-md.mlaursen.com/

On that website you find all the components you can use for your application.

I’m going to use Cards a lot.

To use React Material Design, I need to install it.

First of all I install the package react-md.

  1. root@FREEDOMANDCOURAGE:/srv/sites/rankit.emanuelesantanche.com/rankitapp# npm install –save react-md

CSS preprocessor

React Material Design comes with CSS sylesheets, but it uses a CSS preprocessor.

I have to install the preprocessor first.

  1. root@FREEDOMANDCOURAGE:/srv/sites/rankit.emanuelesantanche.com/rankitapp# npm install –save node-sass-chokidar

I have to add a couple of line to the file /srv/sites/rankit.emanuelesantanche.com/rankitapp/package.json.

  1. “build”: “react-scripts build”,

  2.      “test”: “react-scripts test –env=jsdom”,

  3.      “eject”: “react-scripts eject”,

  4. +    “build-css”: “node-sass-chokidar –include-path ./node_modules src/ -o src/”,

  5. +    “watch-css”: “npm run build-css && npm run build-css –watch –recursive”

  6.    },

  7.    “devDependencies”: {

  8.      “babel-plugin-transform-decorators”: “^6.24.1”

The first line, the one with “build-css”, is how CSS files are produced from Scss ones. It’s how the preprocessor converts a Scss file into a standard CSS one.

The second line, “watch-css”, is how the system realises that you changed a Scss file and performs again the conversion to a CSS file.

To test that the precompiler is working we change name to two files.

They are:

* /srv/sites/rankit.emanuelesantanche.com/rankitapp/src/App.css
* /srv/sites/rankit.emanuelesantanche.com/rankitapp/src/index.css

They become App.scss and index.scss respectively.

I can do this change of name because these two files actually contain pure CSS the CSS preprocessor will convert literally.

Now I run the script watch-css described above.

  1. root@FREEDOMANDCOURAGE:/srv/sites/rankit.emanuelesantanche.com/rankitapp# npm run watch-css

This script will create the files App.css and index.css from App.scss and index.scss respectively.

Then I want to prevent css files from being uploaded to my git repository because they will be generated from the scss files.

I add these lines to my .gitignore.

  1. +

  2. +# build artifacts

  3. +src/**/*.css

  4. +

You want to create this file: /srv/sites/rankit.emanuelesantanche.com/rankitapp/src/_globals.scss, and put the following content in it.

  1. @import ‘react-md/src/scss/react-md’;

  2. // Any variable overrides. The following just changes the default theme to use teal and purple.

  3. $md-primary-color: $md-teal-500;

  4. $md-secondary-color: $md-purple-a-400;

By doing this, all the definitions included in React Material Design will be incorporated in our scss and used. We couldn’t use React Material Design if we don’t do this.

The file /srv/sites/rankit.emanuelesantanche.com/rankitapp/src/index.scss needs a couple more lines:

  1. +@import ‘globals’;

  2. +

  3. +@include react-md-everything

  4. +

This step is necessary to actually use React Material Designin our application since the file _globals.scss is used internally, but not invoked in the actual application until we do it explicitly in index.scss.

We want our scss files compiled in real time as we make changes. That’s why we need to fix our packages file (/srv/sites/rankit.emanuelesantanche.com/rankitapp/package.json).

This is what the scripts part of it looks like:

  1. “scripts”: {

  2.     “start-js”: “react-scripts start”,

  3.     “start”: “npm-run-all -p watch-css start-js”,

  4.     “build”: “react-scripts build”,

  5.     “test”: “react-scripts test –env=jsdom”,

  6.     “eject”: “react-scripts eject”,

  7.     “build-css”: “node-sass-chokidar –include-path ./node_modules src/ -o src/”,

  8.     “watch-css”: “npm run build-css && npm run build-css –watch –recursive”

  9.   },

When we run “npm run start”, there will be two processes starting: watch-css and start-js. The first one will process scss file to css ones. The second will process javascript.

For these scripts to work we need to install the package npm-run-all.

  1. root@FREEDOMANDCOURAGE:/srv/sites/rankit.emanuelesantanche.com/rankitapp# npm install –save npm-run-all

Web Font Loader

React Material Design uses some nice fonts, but we need to install Web Font Loader to be able to see them.

  1. root@FREEDOMANDCOURAGE:/srv/sites/rankit.emanuelesantanche.com/rankitapp# npm install –save webfontloader

We have to add these lines to /srv/sites/rankit.emanuelesantanche.com/rankitapp/src/index.js otherwise we won’t use the fonts.

  1. +import WebFontLoader from ‘webfontloader’;

  2. +

  3. +WebFontLoader.load({

  4. +  google: {

  5. +    families: [‘Roboto:300,400,500,700’, ‘Material Icons’],

  6. +  },

  7. +});

More packages to install

It’s simpler to install the other packages we need to do routing, perform animations and drag and drop.

  1. root@FREEDOMANDCOURAGE:/srv/sites/rankit.emanuelesantanche.com/rankitapp# npm install –save react-router-dom

  2. root@FREEDOMANDCOURAGE:/srv/sites/rankit.emanuelesantanche.com/rankitapp# npm install –save react-dnd

  3. root@FREEDOMANDCOURAGE:/srv/sites/rankit.emanuelesantanche.com/rankitapp# npm install –save react-dnd-html5-backend

  4. root@FREEDOMANDCOURAGE:/srv/sites/rankit.emanuelesantanche.com/rankitapp# npm install –save react-motion