diff --git a/.eslintrc b/.eslintrc index ee012e7..0b2a408 100644 --- a/.eslintrc +++ b/.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"] } } diff --git a/gulpfile.babel.js b/gulpfile.babel.js index 9718922..cfdc4a8 100644 --- a/gulpfile.babel.js +++ b/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,12 +74,12 @@ 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)); @@ -87,17 +87,17 @@ gulp.task('browserify', () => { 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)); }); @@ -105,7 +105,7 @@ 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()); }); diff --git a/package.json b/package.json index 70b661e..a1e2fc2 100644 --- a/package.json +++ b/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", diff --git a/src/Index.js b/src/Index.js index 7ac8658..b8f3051 100644 --- a/src/Index.js +++ b/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( ( - - + + ), document.getElementById('content') ); diff --git a/src/components/About.js b/src/components/About.js index 31f2e2e..d273cff 100644 --- a/src/components/About.js +++ b/src/components/About.js @@ -1,13 +1,13 @@ import React from 'react'; -export default React.createClass({ - render() { - return ( -
-

About

-

React Starterify aims to give you a good starting point for your projects.

-

If you're looking for a minimal ES6 (ES2015) React JS starter with nice shallow rendering test examples, this is probably for you.

-
- ); - } -}); +const About = () => ( +
+

About

+

React Starterify aims to give you a good starting point for your projects.

+

If you're looking for a minimal ES6 (ES2015) React JS starter + with nice shallow rendering test examples, this is probably for you.

+
+); + +export default About; + diff --git a/src/components/App.js b/src/components/App.js index d1056e3..9a6134a 100644 --- a/src/components/App.js +++ b/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 }) => ( +
+
+

React Starterify {version}

+ About + Powered by +
+
+ {children || 'Welcome to React Starterify'} +
+
+); - return ( -
-
-

React Starterify {version}

- About - Powered by -
-
- {this.props.children || 'Welcome to React Starterify'} -
-
- ) - } -}); +App.propTypes = { children: React.PropTypes.object }; + +export default App; diff --git a/src/components/Powered-by.js b/src/components/Powered-by.js index b0ee733..96acf43 100644 --- a/src/components/Powered-by.js +++ b/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) =>
  • {dep}
    • ); - let devDeps = Object.keys(packageJSON.devDependencies).map((dep, i) =>
  • {dep}
    • ); +const PoweredBy = () => { + const deps = Object.keys(dependencies) + .map((dep, i) =>
  • {dep}
    • ); + const devDeps = Object.keys(devDependencies) + .map((dep, i) =>
  • {dep}
    • ); - return ( -
    -

    Powered by

    - deps status  - dev deps status - -
    - ); - } -}); + return ( +
    +

    Powered by

    + + deps status + +   + + dev deps status + + +
    + ); +}; + +export default PoweredBy; diff --git a/test/components/About-test.js b/test/components/About-test.js index ad74cc8..8307ebc 100644 --- a/test/components/About-test.js +++ b/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,

    About

    )); +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'); +}); diff --git a/test/components/App-test.js b/test/components/App-test.js index e9db692..1fcf0f6 100644 --- a/test/components/App-test.js +++ b/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,

    React Starterify {version}

    )); +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 =

    React Starterify {version}

    ; + const target = app.props.children[0].props.children[0]; + t.ok(isEqual(target.props.children, h1.props.children)); }); diff --git a/test/components/Powered-by-test.js b/test/components/Powered-by-test.js index 5645f16..bd76585 100644 --- a/test/components/Powered-by-test.js +++ b/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); });