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.
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.
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.
root@FREEDOMANDCOURAGE:/srv/sites# mkdir rankit.emanuelesantanche.com
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.
(...)# npm install -g create-react-app
(...)# 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:
Success! Created rankitapp at /srv/sites/rankit.emanuelesantanche.com/rankitapp
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd rankitapp
npm start
Happy hacking!
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.
root@FREEDOMANDCOURAGE:/srv/sites/rankit.emanuelesantanche.com/rankitapp# npm install --save react-md
React Material Design comes with CSS sylesheets, but it uses a CSS preprocessor.
I have to install the preprocessor first.
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.
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
+ "build-css": "node-sass-chokidar --include-path ./node_modules src/ -o src/",
+ "watch-css": "npm run build-css && npm run build-css --watch --recursive"
},
"devDependencies": {
"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.
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.
+
+# build artifacts
+src/**/*.css
+
You want to create this file: /srv/sites/rankit.emanuelesantanche.com/rankitapp/src/_globals.scss, and put the following content in it.
@import 'react-md/src/scss/react-md';
// Any variable overrides. The following just changes the default theme to use teal and purple.
$md-primary-color: $md-teal-500;
$md-secondary-color: $md-purple-a-400;
(...)
(full article: Installing React Application)