Merge pull request #36 from Granze/airbnb-lint

Airbnb lint

.eslintrc

@@ -1,28 +1,6 @@
 {
-  "parser": "babel-eslint",
-  "plugins": [
-    "react"
-  ],
-  "ecmaFeatures": {
-    "modules": true,
-    "jsx": true
-  },
-  "env": {
-    "browser": true,
-    "es6": true,
-    "node": true,
-    "mocha": true
-  },
+  "extends": "airbnb",
   "rules": {
-    "quotes": [
-      2,
-      "single"
-    ],
-    "eqeqeq": [
-      2,
-      "smart"
-    ],
-    "keyword-spacing": 2,
-    "no-console": 1
+    "comma-dangle": [2, "never"]
   }
 }

gulpfile.babel.js

@@ -25,7 +25,7 @@ import ghPages from 'gulp-gh-pages';
 
 const paths = {
   bundle: 'app.js',
-  srcJsx: 'src/Index.js',
+  entry: 'src/Index.js',
   srcCss: 'src/**/*.scss',
   srcImg: 'src/images/**',
   srcLint: ['src/**/*.js', 'test/**/*.js'],
@@ -36,7 +36,7 @@ const paths = {
 };
 
 const customOpts = {
-  entries: [paths.srcJsx],
+  entries: [paths.entry],
   debug: true
 };
 
@@ -55,17 +55,17 @@ gulp.task('browserSync', () => {
 });
 
 gulp.task('watchify', () => {
-  let bundler = watchify(browserify(opts));
+  const bundler = watchify(browserify(opts));
 
   function rebundle() {
     return bundler.bundle()
       .on('error', notify.onError())
       .pipe(source(paths.bundle))
       .pipe(buffer())
-      .pipe(sourcemaps.init({loadMaps: true}))
+      .pipe(sourcemaps.init({ loadMaps: true }))
       .pipe(sourcemaps.write('.'))
       .pipe(gulp.dest(paths.distJs))
-      .pipe(reload({stream: true}));
+      .pipe(reload({ stream: true }));
   }
 
   bundler.transform(babelify)
@@ -74,38 +74,38 @@ gulp.task('watchify', () => {
 });
 
 gulp.task('browserify', () => {
-  browserify(paths.srcJsx, {debug: true})
+  browserify(paths.entry, { debug: true })
   .transform(babelify)
   .bundle()
   .pipe(source(paths.bundle))
   .pipe(buffer())
-  .pipe(sourcemaps.init({loadMaps: true}))
+  .pipe(sourcemaps.init({ loadMaps: true }))
   .pipe(uglify())
   .pipe(sourcemaps.write('.'))
   .pipe(gulp.dest(paths.distJs));
 });
 
 gulp.task('styles', () => {
   gulp.src(paths.srcCss)
-  .pipe(rename({extname: ".css"}))
+  .pipe(rename({ extname: '.css' }))
   .pipe(sourcemaps.init())
   .pipe(postcss([vars, extend, nested, autoprefixer, cssnano]))
   .pipe(sourcemaps.write('.'))
   .pipe(gulp.dest(paths.dist))
-  .pipe(reload({stream: true}));
+  .pipe(reload({ stream: true }));
 });
 
 gulp.task('htmlReplace', () => {
   gulp.src('index.html')
-  .pipe(htmlReplace({css: 'styles/main.css', js: 'js/app.js'}))
+  .pipe(htmlReplace({ css: 'styles/main.css', js: 'js/app.js' }))
   .pipe(gulp.dest(paths.dist));
 });
 
 gulp.task('images', () => {
   gulp.src(paths.srcImg)
     .pipe(imagemin({
       progressive: true,
-      svgoPlugins: [{removeViewBox: false}],
+      svgoPlugins: [{ removeViewBox: false }],
       use: [pngquant()]
     }))
     .pipe(gulp.dest(paths.distImg));
@@ -119,11 +119,11 @@ gulp.task('lint', () => {
 
 gulp.task('watchTask', () => {
   gulp.watch(paths.srcCss, ['styles']);
-  gulp.watch(paths.srcJsx, ['lint']);
+  gulp.watch(paths.srcLint, ['lint']);
 });
 
-gulp.task('deploy', function() {
-  return gulp.src(paths.distDeploy)
+gulp.task('deploy', () => {
+  gulp.src(paths.distDeploy)
     .pipe(ghPages());
 });
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-starterify",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "description": "React JS application skeleton using Browserify and other awesome tools",
   "main": "app.js",
   "repository": {
@@ -56,7 +56,9 @@
     "browser-sync": "^2.9.1",
     "browserify": "^13.0.0",
     "cssnano": "^3.0.0",
-    "eslint-plugin-react": "^4.1.0",
+    "eslint": "^2.3.0",
+    "eslint-config-airbnb": "^6.1.0",
+    "eslint-plugin-react": "^4.2.1",
     "gulp": "^3.9.0",
     "gulp-eslint": "^2.0.0",
     "gulp-gh-pages": "^0.5.4",
@@ -68,7 +70,7 @@
     "gulp-sourcemaps": "^1.5.2",
     "gulp-uglify": "^1.4.0",
     "imagemin-pngquant": "^4.2.0",
-    "lodash": "^4.0.0",
+    "lodash": "^4.6.0",
     "postcss-nested": "^1.0.0",
     "postcss-simple-extend": "^1.0.0",
     "postcss-simple-vars": "^1.0.0",

src/Index.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import {render} from 'react-dom';
-import {Router, Route, hashHistory} from 'react-router';
+import { render } from 'react-dom';
+import { Router, Route, hashHistory } from 'react-router';
 import App from './components/App';
 import PoweredBy from './components/Powered-by';
 import About from './components/About';
@@ -10,8 +10,8 @@ window.React = React;
 render(
   (<Router history={hashHistory}>
     <Route path="/" component={App}>
-      <Route path="/about" component={About}/>
-      <Route path="/poweredby" component={PoweredBy}/>
+      <Route path="/about" component={About} />
+      <Route path="/poweredby" component={PoweredBy} />
     </Route>
   </Router>), document.getElementById('content')
 );

src/components/About.js

@@ -1,13 +1,13 @@
 import React from 'react';
 
-export default React.createClass({
-  render() {
-    return (
-      <div>
-        <h2>About</h2>
-        <p>React Starterify aims to give you a good starting point for your projects.</p>
-        <p>If you're looking for a minimal ES6 (ES2015) React JS starter with nice shallow rendering test examples, this is probably for you.</p>
-      </div>
-    );
-  }
-});
+const About = () => (
+  <div>
+    <h2>About</h2>
+    <p>React Starterify aims to give you a good starting point for your projects.</p>
+    <p>If you're looking for a minimal ES6 (ES2015) React JS starter
+      with nice shallow rendering test examples, this is probably for you.</p>
+  </div>
+);
+
+export default About;
+

src/components/App.js

@@ -1,26 +1,20 @@
 import React from 'react';
-import {Link}  from 'react-router';
-import packageJSON from '../../package.json';
+import { Link } from 'react-router';
+import { version } from '../../package.json';
 
-export default React.createClass({
-  returnSomething(something) {
-    //this is only for testing purposes. Check /test/components/App-test.js
-    return something;
-  },
-  render() {
-    const version = packageJSON.version;
+const App = ({ children }) => (
+  <div>
+    <header>
+      <h1>React Starterify {version}</h1>
+      <Link to="/about">About</Link>
+      <Link to="/poweredby">Powered by</Link>
+    </header>
+    <section>
+      {children || 'Welcome to React Starterify'}
+    </section>
+  </div>
+);
 
-    return (
-      <div>
-        <header>
-          <h1>React Starterify {version}</h1>
-          <Link to="/about">About</Link>
-          <Link to="/poweredby">Powered by</Link>
-        </header>
-        <section>
-          {this.props.children || 'Welcome to React Starterify'}
-        </section>
-      </div>
-    )
-  }
-});
+App.propTypes = { children: React.PropTypes.object };
+
+export default App;

src/components/Powered-by.js

@@ -1,20 +1,27 @@
 import React from 'react';
-import packageJSON from '../../package.json';
+import { dependencies, devDependencies } from '../../package.json';
 
-export default React.createClass({
-  render() {
-    let deps = Object.keys(packageJSON.dependencies).map((dep, i) => <li key={i}>{dep}</li>);
-    let devDeps = Object.keys(packageJSON.devDependencies).map((dep, i) => <li key={i + 10}>{dep}</li>);
+const PoweredBy = () => {
+  const deps = Object.keys(dependencies)
+    .map((dep, i) => <li key={i}>{dep}</li>);
+  const devDeps = Object.keys(devDependencies)
+    .map((dep, i) => <li key={i + 10}>{dep}</li>);
 
-    return (
-      <div>
-        <h2>Powered by</h2>
-        <a href="https://david-dm.org/granze/react-starterify"><img src="https://david-dm.org/granze/react-starterify/status.svg" alt="deps status"/></a>&nbsp;
-        <a href="https://david-dm.org/granze/react-starterify#info=devDependencies"><img src="https://david-dm.org/granze/react-starterify/dev-status.svg" alt="dev deps status"/></a>
-        <ul>
-          {[...deps, ...devDeps]}
-        </ul>
-      </div>
-    );
-  }
-});
+  return (
+    <div>
+      <h2>Powered by</h2>
+      <a href="https://david-dm.org/granze/react-starterify">
+        <img src="https://david-dm.org/granze/react-starterify/status.svg" alt="deps status" />
+      </a>
+      &nbsp;
+      <a href="https://david-dm.org/granze/react-starterify#info=devDependencies">
+        <img src="https://david-dm.org/granze/react-starterify/dev-status.svg" alt="dev deps status" />
+      </a>
+      <ul>
+        {[...deps, ...devDeps]}
+      </ul>
+    </div>
+  );
+};
+
+export default PoweredBy;

test/components/About-test.js

@@ -1,5 +1,4 @@
 import test from 'ava';
-import { find } from 'lodash';
 import React from 'react';
 import TestUtils from 'react-addons-test-utils';
 import About from '../../src/components/About';
@@ -12,7 +11,10 @@ test('should have a div as container', t => {
   t.is(about.type, 'div');
 });
 
-test('should have an h2 tag containing the text "About"', t => {
-  t.ok(find(about.props.children, <h2>About</h2>));
+test('should contains an H2', t => {
+  t.is(about.props.children[0].type, 'h2');
 });
 
+test('should have an h2 tag containing the text "About"', t => {
+  t.is(about.props.children[0].props.children, 'About');
+});

test/components/App-test.js

@@ -1,5 +1,5 @@
 import test from 'ava';
-import { find } from 'lodash';
+import { isEqual } from 'lodash';
 import React from 'react';
 import TestUtils from 'react-addons-test-utils';
 import App from '../../src/components/App';
@@ -13,14 +13,12 @@ test('should have a div as container', t => {
   t.is(app.type, 'div');
 });
 
-test('should have a version number that match the package.json version property', t => {
-  let h1 = app.props.children[0].props.children;
-
-  t.ok(find(h1, <h1>React Starterify {version}</h1>));
+test('should contains an H1', t => {
+  t.is(app.props.children[0].props.children[0].type, 'h1');
 });
 
-test('should return something', t => {
-  let returnSomething = App.prototype.returnSomething('hello!');
-
-  t.is(returnSomething, 'hello!');
+test('should display the title and the version number', t => {
+  const h1 = <h1>React Starterify {version}</h1>;
+  const target = app.props.children[0].props.children[0];
+  t.ok(isEqual(target.props.children, h1.props.children));
 });

test/components/Powered-by-test.js

@@ -13,16 +13,16 @@ test('should have a div as container', t => {
 });
 
 test('should render the deps list and "react" should be present', t => {
-  let ul = poweredBy.props.children.filter(c => c.type === 'ul');
-  let li = ul[0].props.children[1].props.children;
+  const ul = poweredBy.props.children.filter(c => c.type === 'ul');
+  const li = ul[0].props.children[1].props.children;
 
   t.is(li, 'react');
 });
 
 test('should display all the dependencies and dev dependencies', t => {
-  let ul = poweredBy.props.children.filter(c => c.type === 'ul');
-  let renderedDeps = ul[0].props.children.length;
-  let npmDeps = Object.keys(dependencies).length + Object.keys(devDependencies).length;
+  const ul = poweredBy.props.children.filter(c => c.type === 'ul');
+  const renderedDeps = ul[0].props.children.length;
+  const npmDeps = Object.keys(dependencies).length + Object.keys(devDependencies).length;
 
   t.is(renderedDeps, npmDeps);
 });