abiodun0/gulpfile.js

## gulpfile.js
"use strict";

var gulp = require('gulp');
var connect = require('gulp-connect'); // Runs a local dev server
var open = require('gulp-open');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var concat = require('gulp-concat');
var eslint = require('gulp-eslint');
var babelify = require('babelify');
var reactify = require('reactify');
var gutil = require('gulp-util');


var config = {
    port: 2001,
    devBaseUrl: 'http://localhost',
    paths: {
        html: './src/*.html',
        js: './src/**/*.js',
        img: './src/img/*',
        css: [
            'node_modules/bootstrap/dist/css/bootstrap.min.css',
            'node_modules/bootstrap/dist/css/bootstrap.theme-min.css',

        ],
        dist: './dist',
        mainJs: './src/main.js'
    }

}
gulp.task('connect', function() {
    connect.server({
        root: ['dist'],
        port: config.port,
        base: config.devBaseUrl,
        livereload: true
    })
});

gulp.task('open', ['connect'], function() {
    gulp.src('dist/index.html').pipe(open('', {
        url: config.devBaseUrl + ':' + config.port + '/'
    }));
});

gulp.task('html', function() {
    gulp.src(config.paths.html)
        .pipe(gulp.dest(config.paths.dist))
        .pipe(connect.reload());
});

gulp.task('js', function() {
    browserify({
        entries: config.paths.mainJs,
        debug: true
    })
        .transform(babelify,{presets: ["es2015", "react"]})
        .bundle()
        .on('error',gutil.log)
        .pipe(source('bundle.js'))
        .pipe(gulp.dest(config.paths.dist + '/scripts'))
        .pipe(connect.reload());
});

gulp.task('lint', function() {

    return gulp.src(config.paths.js)
        .pipe(eslint({
            config: 'eslint.config.json'
        }))
        .pipe(eslint.format());

});
gulp.task('images', function() {
    gulp.src(config.paths.img)
        .pipe(gulp.dest(config.paths.dist + '/img'))
        .pipe(connect.reload());
})

gulp.task('css', function() {
    gulp.src(config.paths.css)
        .pipe(concat('bundle.css'))
        .pipe(gulp.dest(config.paths.dist + '/css'));
})
gulp.task('watch', function() {
    gulp.watch(config.paths.html, ['html']);
    gulp.watch(config.paths.js, ['js', 'lint']);
});

gulp.task('default', ['html', 'open','js', 'css', 'images', 'lint', 'watch']);

## index.html
<!DOCTYPE html>
<html>
<head>
    <title>Our title</title>

    <link rel="stylesheet" type="text/css" href="css/bundle.css">
</head>

<body>
<div id="app"></div>
<script type="text/javascript" src="scripts/bundle.js"></script>
</body>
</html>

## main.js
import React from 'react'
import { render } from 'react-dom'
import { Router, Route, Link } from 'react-router'

const App = (props) =>{
  return(<div>This is awesome</div>);
}


const About = (props) => {
  return(<div>this app is awesome</div>);
}

  }})
// etc. this app works

const Users = (props) => {
    return (
      <div>
        <h1>Users</h1>
        <div className="master">
          <ul>
            {/* use Link to route around the app  still having errors here found a way for it to webpack*/}
            {this.state.users.map(user => (
              <li key={user.id}><Link to={`/user/${user.id}`}>{user.name}</Link></li>
            ))}
          </ul>
        </div>
        <div className="detail">
          {this.props.children}
        </div>
      </div>
    );
  }

class User extends React.Component {
  componentDidMount(){
    this.setState({
      // route components are rendered with useful information, like URL params
      user: findUserById(this.props.params.userId)
    })
  },

  render() {
    return (
      <div>
        <h2>{this.state.user.name}</h2>
        {/* etc. */}
      </div>
    )
  }
})

// Declarative route configuration (could also load this config lazily
// instead, all you really need is a single root route, you don't need to
// colocate the entire config).
render((
  <Router>
    <Route path="/" component={App}>
      <Route path="about" component={About}/>
      <Route path="users" component={Users}>
        <Route path="/user/:userId" component={User}/>
      </Route>
      <Route path="*" component={App}/>
    </Route>
  </Router>
), document.getElementById('app'))

## package.json
{
  "name": "react-es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/andela-ashuaib/react-es6.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/andela-ashuaib/react-es6/issues"
  },
  "homepage": "https://github.com/andela-ashuaib/react-es6#readme",
  "devDependencies": {
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-react": "^6.3.13",
    "babelify": "^7.2.0",
    "bootstrap": "^3.3.6",
    "browserify": "^12.0.1",
    "flux": "^2.1.1",
    "gulp": "^3.9.0",
    "gulp-babel": "^6.1.1",
    "gulp-concat": "^2.6.0",
    "gulp-connect": "^2.2.0",
    "gulp-eslint": "^1.1.1",
    "gulp-open": "^1.0.0",
    "gulp-util": "^3.0.7",
    "history": "^1.13.1",
    "jquery": "^2.1.4",
    "lodash": "^3.10.1",
    "react-dom": "^0.14.3",
    "react-router": "^1.0.0",
    "reactify": "^1.1.1",
    "vinyl-source-stream": "^1.1.0"
  },
  "dependencies": {
    "react": "^0.14.3"
  }
}

## webpack.config.js
module.exports = {
  entry: './src/main.js',
  output: {
    path: './public',
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      loader: 'babel',
      exclude: /(node_modules|bower_components)/,
      query: {
        presets: ['es2015', 'react']
      }

    }, {
      test: /\.css$/, // Only .css files
      loader: 'style!css' // Run both loaders
    },
    // LESS
    {
      test: /\.less$/,
      loader: 'style!css!less'
    },

    // SASS
    {
      test: /\.scss$/,
      loader: 'style!css!sass'
    }, {
      test: /\.(png|jpg)$/,
      loader: 'url?limit=25000'
    },

    // Needed for the css-loader if you're using bootstrap-webpack(https://github.com/bline/bootstrap-webpack)
    // loads bootstrap's css.
    {test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff"},
    {test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff"},
    {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream"},
    {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
    {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml"}
  ]
  }
};
	"use strict";

	var gulp = require('gulp');
	var connect = require('gulp-connect'); // Runs a local dev server
	var open = require('gulp-open');
	var browserify = require('browserify');
	var source = require('vinyl-source-stream');
	var concat = require('gulp-concat');
	var eslint = require('gulp-eslint');
	var babelify = require('babelify');
	var reactify = require('reactify');
	var gutil = require('gulp-util');


	var config = {
	port: 2001,
	devBaseUrl: 'http://localhost',
	paths: {
	html: './src/*.html',
	js: './src/*/.js',
	img: './src/img/*',
	css: [
	'node_modules/bootstrap/dist/css/bootstrap.min.css',
	'node_modules/bootstrap/dist/css/bootstrap.theme-min.css',

	],
	dist: './dist',
	mainJs: './src/main.js'
	}

	}
	gulp.task('connect', function() {
	connect.server({
	root: ['dist'],
	port: config.port,
	base: config.devBaseUrl,
	livereload: true
	})
	});

	gulp.task('open', ['connect'], function() {
	gulp.src('dist/index.html').pipe(open('', {
	url: config.devBaseUrl + ':' + config.port + '/'
	}));
	});

	gulp.task('html', function() {
	gulp.src(config.paths.html)
	.pipe(gulp.dest(config.paths.dist))
	.pipe(connect.reload());
	});

	gulp.task('js', function() {
	browserify({
	entries: config.paths.mainJs,
	debug: true
	})
	.transform(babelify,{presets: ["es2015", "react"]})
	.bundle()
	.on('error',gutil.log)
	.pipe(source('bundle.js'))
	.pipe(gulp.dest(config.paths.dist + '/scripts'))
	.pipe(connect.reload());
	});

	gulp.task('lint', function() {

	return gulp.src(config.paths.js)
	.pipe(eslint({
	config: 'eslint.config.json'
	}))
	.pipe(eslint.format());

	});
	gulp.task('images', function() {
	gulp.src(config.paths.img)
	.pipe(gulp.dest(config.paths.dist + '/img'))
	.pipe(connect.reload());
	})

	gulp.task('css', function() {
	gulp.src(config.paths.css)
	.pipe(concat('bundle.css'))
	.pipe(gulp.dest(config.paths.dist + '/css'));
	})
	gulp.task('watch', function() {
	gulp.watch(config.paths.html, ['html']);
	gulp.watch(config.paths.js, ['js', 'lint']);
	});

	gulp.task('default', ['html', 'open','js', 'css', 'images', 'lint', 'watch']);
	<!DOCTYPE html>
	<html>
	<head>
	<title>Our title</title>

	<link rel="stylesheet" type="text/css" href="css/bundle.css">
	</head>

	<body>
	<div id="app"></div>
	<script type="text/javascript" src="scripts/bundle.js"></script>
	</body>
	</html>
	import React from 'react'
	import { render } from 'react-dom'
	import { Router, Route, Link } from 'react-router'

	const App = (props) =>{
	return(<div>This is awesome</div>);
	}



	const About = (props) => {
	return(<div>this app is awesome</div>);
	}

	}})
	// etc. this app works

	const Users = (props) => {
	return (
	<div>
	<h1>Users</h1>
	<div className="master">
	<ul>
	{/* use Link to route around the app still having errors here found a way for it to webpack*/}
	{this.state.users.map(user => (
	<li key={user.id}><Link to={`/user/${user.id}`}>{user.name}</Link></li>
	))}
	</ul>
	</div>
	<div className="detail">
	{this.props.children}
	</div>
	</div>
	);
	}

	class User extends React.Component {
	componentDidMount(){
	this.setState({
	// route components are rendered with useful information, like URL params
	user: findUserById(this.props.params.userId)
	})
	},

	render() {
	return (
	<div>
	<h2>{this.state.user.name}</h2>
	{/* etc. */}
	</div>
	)
	}
	})

	// Declarative route configuration (could also load this config lazily
	// instead, all you really need is a single root route, you don't need to
	// colocate the entire config).
	render((
	<Router>
	<Route path="/" component={App}>
	<Route path="about" component={About}/>
	<Route path="users" component={Users}>
	<Route path="/user/:userId" component={User}/>
	</Route>
	<Route path="*" component={App}/>
	</Route>
	</Router>
	), document.getElementById('app'))
	{
	"name": "react-es6",
	"version": "1.0.0",
	"description": "",
	"main": "index.js",
	"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1"
	},
	"repository": {
	"type": "git",
	"url": "git+https://github.com/andela-ashuaib/react-es6.git"
	},
	"author": "",
	"license": "ISC",
	"bugs": {
	"url": "https://github.com/andela-ashuaib/react-es6/issues"
	},
	"homepage": "https://github.com/andela-ashuaib/react-es6#readme",
	"devDependencies": {
	"babel-preset-es2015": "^6.1.18",
	"babel-preset-react": "^6.3.13",
	"babelify": "^7.2.0",
	"bootstrap": "^3.3.6",
	"browserify": "^12.0.1",
	"flux": "^2.1.1",
	"gulp": "^3.9.0",
	"gulp-babel": "^6.1.1",
	"gulp-concat": "^2.6.0",
	"gulp-connect": "^2.2.0",
	"gulp-eslint": "^1.1.1",
	"gulp-open": "^1.0.0",
	"gulp-util": "^3.0.7",
	"history": "^1.13.1",
	"jquery": "^2.1.4",
	"lodash": "^3.10.1",
	"react-dom": "^0.14.3",
	"react-router": "^1.0.0",
	"reactify": "^1.1.1",
	"vinyl-source-stream": "^1.1.0"
	},
	"dependencies": {
	"react": "^0.14.3"
	}
	}
	module.exports = {
	entry: './src/main.js',
	output: {
	path: './public',
	filename: 'bundle.js'
	},
	module: {
	loaders: [{
	test: /\.jsx?$/,
	loader: 'babel',
	exclude: /(node_modules\|bower_components)/,
	query: {
	presets: ['es2015', 'react']
	}

	}, {
	test: /\.css$/, // Only .css files
	loader: 'style!css' // Run both loaders
	},
	// LESS
	{
	test: /\.less$/,
	loader: 'style!css!less'
	},

	// SASS
	{
	test: /\.scss$/,
	loader: 'style!css!sass'
	}, {
	test: /\.(png\|jpg)$/,
	loader: 'url?limit=25000'
	},

	// Needed for the css-loader if you're using bootstrap-webpack(https://github.com/bline/bootstrap-webpack)
	// loads bootstrap's css.
	{test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff"},
	{test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff"},
	{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream"},
	{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
	{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml"}
	]
	}
	};