├── .github └── FUNDING.yml ├── .gitignore ├── .travis.yml ├── README.md ├── package.json ├── src ├── app.js ├── home │ ├── home.js │ └── home.spec.js └── index.html └── tooling ├── karma.config.js └── webpack.config.js /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # Support 'GitHub Sponsors' funding. 2 | github: dwmkerr 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | public 3 | !public/index.html 4 | build/coverage -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "0.12" 4 | before_script: 5 | after_script: 6 | - 'npm install coveralls' 7 | - 'cat ./build/coverage/lcov/lcov.info | ./node_modules/coveralls/bin/coveralls.js' -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-es6-starter 2 | 3 | A simple starter template for a React ES6 web app, companion to [Getting Started with React & ES6](http://www.dwmkerr.com/getting-started-with-react/). 4 | 5 | [![Build Status](https://travis-ci.org/dwmkerr/react-es6-starter.svg?branch=master)](https://travis-ci.org/dwmkerr/react-es6-starter) [![Coverage Status](https://coveralls.io/repos/dwmkerr/react-es6-starter/badge.svg?branch=master&service=github)](https://coveralls.io/github/dwmkerr/react-es6-starter?branch=master) 6 | 7 | This project and article demonstrates: 8 | 9 | 1. How to get started with ES6 code using a combination of Webpack and Babel 10 | 2. How to handle ESX transpilation 11 | 3. A simple method to support unit tests for your application 12 | 4. Code Coverage for ES6 13 | 14 | Check the code out, `npm install` and then `npm start`! 15 | 16 | ```bash 17 | git clone https://github.com/dwmkerr/react-es6-starter.git 18 | cd react-es6-starter 19 | npm install 20 | npm start 21 | ``` 22 | 23 | You can run the tests with: 24 | 25 | ```bash 26 | npm test 27 | ``` 28 | 29 | ## Notes 30 | 31 | **Heroku** 32 | 33 | The repo will deploy to Heroku as-is with no modifitications. 34 | To keep the repository as clean as possible I've left out the `Procfile` 35 | required to run with Heroku locally. However, if you need to do this, just 36 | add a file in the root of the repository named `Procfile` with the contents: 37 | 38 | ``` 39 | web: ./node_modules/.bin/http-server 40 | ``` 41 | 42 | ## Further Reading 43 | 44 | Some useful material: 45 | 46 | *Testing* 47 | 1. [How to easily test React components with Karma and Webpack](http://qiita.com/kimagure/items/f2d8d53504e922fe3c5c) 48 | 2. [How to implement testing and code coverage on React with Karma, Babel and Webpack](https://medium.com/@scbarrus/how-to-get-test-coverage-on-react-with-karma-babel-and-webpack-c9273d805063) 49 | 50 | *General* 51 | 1. https://medium.com/@gunnarlium/es6-code-coverage-with-babel-jspm-karma-jasmine-and-istanbul-2c1918c5bb23 52 | 2. http://kentor.me/posts/testing-react-and-flux-applications-with-karma-and-webpack/ 53 | 3. https://github.com/binarykitchen/gulp-jest-iojs/issues/1 54 | 4. http://www.hammerlab.org/2015/02/14/testing-react-web-apps-with-mocha/ 55 | 56 | ## Potential Improvements 57 | 58 | [ ] Document setting up `test-debug`. 59 | [ ] Support ES6 and sourcemaps in the debug code. 60 | [ ] Build everything to `build` rather than having a `build` and `public` folder. 61 | [ ] Use the Webpack dev server, support live reloading and hot reloading. 62 | [ ] Show some component state in the React code and some component testing. 63 | [ ] Open the browser after `test-debug` starts. 64 | [ ] Show how a `build` command might differ from a `start` command (may be out of scope). 65 | [ ] Use global mutable state for react, leading into the next in the series (React + Redux). 66 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-es6-starter", 3 | "version": "1.0.0", 4 | "description": "Starter project for a very basic React / ES6 web app", 5 | "scripts": { 6 | "start": "webpack-dev-server --config ./tooling/webpack.config.js --inline --quiet", 7 | "webpack": "webpack --config tooling/webpack.config.js", 8 | "test": "karma start ./tooling/karma.config.js", 9 | "test-debug": "karma start ./tooling/karma.config.js --no-single-run --browsers Chrome" 10 | }, 11 | "author": "Dave Kerr", 12 | "license": "MIT", 13 | "repository": { 14 | "type": "git", 15 | "url": "git://github.com/dwmkerr/react-es6-starter.git" 16 | }, 17 | "dependencies": { 18 | "react": "0.x.x", 19 | "babel": "5.x.x", 20 | "babel-loader": "5.x.x", 21 | "webpack": "^1.12.1" 22 | }, 23 | "devDependencies": { 24 | "babel-core": "5.x.x", 25 | "html-webpack-plugin": "^1.6.1", 26 | "isparta": "^3.0.4", 27 | "isparta-instrumenter-loader": "^0.2.1", 28 | "istanbul": "^0.3.19", 29 | "jasmine": "2.x.x", 30 | "jasmine-core": "2.x.x", 31 | "jquery": "^2.1.4", 32 | "karma": "0.x.x", 33 | "karma-chrome-launcher": "^0.2.0", 34 | "karma-coverage": "^0.5.2", 35 | "karma-jasmine": "0.x.x", 36 | "karma-phantomjs-launcher": "0.x.x", 37 | "karma-webpack": "1.x.x", 38 | "phantomjs": "1.x.x" 39 | }, 40 | "engines": { 41 | "node": "0.12.x" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/app.js: -------------------------------------------------------------------------------- 1 | import React from 'react/addons'; 2 | import Home from './home/home'; 3 | 4 | React.render(, document.body); -------------------------------------------------------------------------------- /src/home/home.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default class Home extends React.Component { 4 | render () { 5 | return
6 |

React ES6 Starter

7 |

Welcome to the React ES6 Starter home page!

8 |

This is the companion application to the 9 | Getting Started with React & ES6 article, you can find the code 10 | at github.com/dwmkerr/react-es6-starter.

11 |
; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/home/home.spec.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import $ from 'jquery'; 3 | import Home from './home.js'; 4 | 5 | describe('Home', () => { 6 | 7 | it('should render to the DOM', function() { 8 | 9 | // Create the react component. 10 | var component = React.render(, document.body); 11 | 12 | // Find the DOM element for the created component. 13 | var node = React.findDOMNode(component); 14 | 15 | // Check the DOM looks how we'd expect it to. 16 | expect($(node).children('h1').text()).toEqual("React ES6 Starter"); 17 | 18 | }); 19 | 20 | }); 21 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | React ES6 Starter 6 | 7 | 8 | 9 |
10 |
11 |
12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /tooling/karma.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | 3 | module.exports = function(config) { 4 | config.set({ 5 | browsers: ['PhantomJS'], 6 | files: [ 7 | // We need to polyfill as PhantomJS doesn't support 'bind'. 8 | '../node_modules/babel-core/browser-polyfill.js', 9 | '../src/**/*.spec.js' 10 | ], 11 | frameworks: ['jasmine'], 12 | preprocessors: { 13 | '../src/**/*.spec.js': ['webpack'] 14 | }, 15 | reporters: ['progress', 'coverage'], 16 | singleRun: true, 17 | webpack: { 18 | entry: {}, 19 | module: { 20 | preLoaders: [ 21 | { 22 | test: /\.jsx?$/, 23 | exclude: [ 24 | /node_modules/, 25 | /\.spec\.js/ 26 | ], 27 | loader: 'isparta-instrumenter-loader' 28 | }, 29 | ], 30 | loaders: [ 31 | { 32 | test: /\.jsx?$/, 33 | loader: 'babel-loader', 34 | include: path.resolve(__dirname, '../src') 35 | } 36 | ] 37 | } 38 | }, 39 | webpackServer: { 40 | noInfo: true, 41 | }, 42 | coverageReporter: { 43 | dir: '../build/coverage/', 44 | reporters: [ 45 | { type: 'html', subdir: 'html' }, 46 | { type: 'lcov', subdir: 'lcov' } 47 | ] 48 | } 49 | }); 50 | }; 51 | -------------------------------------------------------------------------------- /tooling/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | 4 | module.exports = { 5 | 6 | // Defines the entrypoint of our application. 7 | entry: path.resolve(__dirname, '../src/app.js'), 8 | 9 | // Bundle to a ./build/public/bundle.js file. 10 | output: { 11 | path: path.resolve(__dirname, '../build/public'), 12 | filename: 'bundle.js' 13 | }, 14 | 15 | // Use babel for anything that is *.js or *.jsx. 16 | module: { 17 | loaders: [ 18 | { 19 | test: /\.jsx?$/, 20 | loader: 'babel-loader', 21 | include: path.resolve(__dirname, '../src') 22 | } 23 | ] 24 | }, 25 | 26 | // Configure the plugins. We copy the index.html 27 | // file to the build folder. 28 | plugins: [ 29 | new HtmlWebpackPlugin({ 30 | template: path.resolve(__dirname, '../src/index.html'), 31 | inject: 'body' // Inject webpack scripts into the body. 32 | }) 33 | ] 34 | }; --------------------------------------------------------------------------------