React and Flux Environment Setup
It did not came to me as easy to start a react project and setting up an environment. This is why I decided to write this blog. The idea here is not to delve deep into react concepts, but instead to help setting up the stadium to play the match. This would come easy to seasoned front end developers but still difficult for one starting react. I would demonstrate how to setup the environment where you have the necessary ingredients to focus on react concept than struggling with the environment.First: Have Node installed
Choose your editor
- VSCode
- Webstorm (not free)
- Sublime
- Atom
.editorconfig
# editorconfig.org root = true [*] indent_style = tab indent_size = 2 end_of_line = lf charset = utf-8 trim_trailing_whitespace = true insert_final_newline = true [*.md] trim_trailing_whitespace = false
Package.json
{ "name": "starter", "version": "1.0.0", "description": "React Kickstart", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "Manish", "license": "MIT", "dependencies": { "bootstrap": "^3.3.5", "browserify": "^11.0.1", "flux": "^2.0.3", "gulp": "^3.9.0", "gulp-concat": "^2.6.0", "gulp-connect": "^2.2.0", "gulp-eslint": "^0.15.0", "gulp-open": "^1.0.0", "jquery": "^2.1.4", "lodash": "^3.10.0", "object-assign": "^3.0.0", "react": "^0.13.3", "react-router": "^0.13.3", "reactify": "^1.1.1", "toastr": "^2.1.0", "vinyl-source-stream": "^1.1.0" }, "devDependencies": { "gulp-livereload": "^3.8.1" } }
NPM Install
npm install
P.S. Assuming Node.js is installed globally on your machine.This will install all the framework defined in package.json in your project folder inside node_module. Voila!!! Your project is now setup with the required frameworks. The dependencies are required for production release, while devDependencies are only required for your development environment. Following are the quick description and link for each library mentioned in package.json.
Framework | Description |
---|---|
Bootstrap | For responsive design. |
Browserify | Browserify lets you require('modules') in the browser |
Flux | Flux is an architecture that Facebook uses internally when working with React. It is not a framework or a library. It is simply a new kind of architecture that complements React and the concept of Unidirectional Data Flow. |
Gulp | Used to automate the build. |
Gulp-concat | Simply to concat files. |
Gulp-connect | Gulp plugin to run a webserver (with LiveReload). |
Gulp-eslint | For linting your codebase (Verify Code Quality) |
Gulp-open | Open files and URLs with gulp. |
Jquery | JavaScript framework required by bootstrap |
Lodash | Lodash is a toolkit of Javascript functions that provides clean, performant methods for manipulating objects and collections. |
Object-assign | For merging objects. Used by gulp. |
React | React is a declarative, efficient, and flexible JavaScript library for building user interfaces. |
React-router | Delivers navigation elegance to React. |
Toastr | toastr is a Javascript library for Gnome / Growl type non-blocking notifications. |
Vinyl-source-stream | Used to manage streams in gulp. |
Gulp-livereload | Hot reload and refresh. |
Project Structure explained
pakage.json
, eslint.config.json
and gulpfile.js
resides at the root folder. The “dist” folder is meant for distribution. It is empty in the beginning. The gulp tasks minifies, bundles and copies files in the “dist” folder. Node_modules are the framework that gets installed when “npm install” is executed from the command prompt. 
Automation and Build with Gulpfile.json
Configuration: This section mainly provides gulp with necessary input to define its behavior while automation and execution."use strict"; var gulp = require('gulp'); var connect = require('gulp-connect'); //Runs a local dev server var open = require('gulp-open'); //Open URL in a web browser var livereload = require('gulp-livereload'); var browserify = require('browserify'); // Bundles JS var reactify = require('reactify'); // Transforms React JSX to JS var source = require('vinyl-source-stream'); // Use conventional text streams with Gulp var concat = require('gulp-concat'); //Concatenates files var lint = require('gulp-eslint'); //Lint JS files, including JSX
The following two tasks defines how gulp would run the build after compilation.var config = { port:9005, devBaseUrl:'http://localhost', paths:{ html: './src/*.html', js:'./src/**/*.js', images: './src/images/*', css: [ 'node_modules/bootstrap/dist/css/bootstrap.min.css', 'node_modules/bootstrap/dist/css/bootstrap-theme.min.css', 'node_modules/toastr/toastr.scss' ], dist: './dist', mainJs: './src/main.js' } }
Html Task – The following task informs gulp to copy source html files to destination and watch for changes during execution. If the source file is changed this task will be automatically called and the browser will be refreshed automatically through “livereload” plugin installed. The livereload plugin is available for chrome as an extension.//Start local development server gulp.task('connect', function(){ connect.server({ root:['dist'], port:config.port, base:config.devBaseUrl, liverreload: true }); }); gulp.task('open', ['connect'], function(){ gulp.src('dist/index.html') .pipe(open({ uri: config.devBaseUrl + ':' + config.port + '/' })); });
JS Task – The following task transforms the React-JS to JavaScript, minifies and bundles all JavaScript to bundle.js. It then copies the bundle.js to “dist/scripts” folder. It further watches and loads the files when changes occur.gulp.task('html', function() { gulp.src(config.paths.html) .pipe(gulp.dest(config.paths.dist)) .pipe(connect.reload()) .pipe(livereload()); });
CSS Task – Bundles and minifies the CSS file(s) and copies to the “dist/css” folder.gulp.task('js', function() { browserify(config.paths.mainJs) .transform(reactify) .bundle() .on('error', console.error.bind(console)) .pipe(source('bundle.js')) .pipe(gulp.dest(config.paths.dist + '/scripts')) .pipe(connect.reload()) .pipe(livereload()); });
Images Task – Copies source images to the “dist/images” folder.gulp.task('css', function() { gulp.src(config.paths.css) .pipe(concat('bundle.css')) .pipe(gulp.dest(config.paths.dist + '/css')) .pipe(connect.reload()) .pipe(livereload()); });
Lint Task – This task helps gulp to verifying code quality according to the rules defined in eslint.config.json.// Migrates images to dist folder // Note that I could even optimize my images here gulp.task('images', function () { gulp.src(config.paths.images) .pipe(gulp.dest(config.paths.dist + '/images')) .pipe(connect.reload()); //publish favicon gulp.src('./src/favicon.ico') .pipe(gulp.dest(config.paths.dist)); });
Watch Task – Once the build is executed in Dev Server, this task informs gulp to keep it hot and watch for any changes. If the changes are made, gulp will execute the task to recompile and refresh the content.gulp.task('lint', function() { return gulp.src(config.paths.js) .pipe(lint({config: 'eslint.config.json'})) .pipe(lint.format()); });
Combined Default Task – The “default” task is the entry point for gulp that calls all sub-task in sequence defined.gulp.task('watch', function() { livereload.listen(); gulp.watch(config.paths.html, ['html']); gulp.watch(config.paths.js, ['js', 'lint']); });
gulp.task('default', ['html', 'js', 'css', 'images', 'lint', 'open', 'watch']);
Eslint.config.json
{ "root": true, "ecmaFeatures": { "jsx": true }, "env": { "browser": true, "node": true, "jquery": true }, "rules": { "quotes": 0, "no-trailing-spaces": 0, "eol-last": 0, "no-unused-vars": 0, "no-underscore-dangle": 0, "no-alert": 0, "no-lone-blocks": 0 }, "globals": { "jQuery": true, "$": true } }
The Hello World of ReactJS
Index.html – The SPA (Single Page Application)

main.js – This is the entry point of ReactJS

homepage.js – A react component

Where to go from here !!
Now you can jump start, concentrating on ReactJS and its features.
Enjoy!!
Manish