Installing React Application

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. (...)# npm install -g create-react-app

  2. (...)# 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;

(...)

(full article: Installing React Application)