├── .gitignore ├── examples ├── arrow-functions │ ├── b.example │ ├── c.example │ ├── a.example │ ├── d.example │ └── index.jsx ├── destructuring │ ├── f.example │ ├── d.example │ ├── b.example │ ├── e.example │ ├── a.example │ ├── c.example │ └── index.jsx ├── spread-operator │ ├── a.example │ ├── c.example │ ├── b.example │ └── index.jsx ├── object-literals │ ├── a.example │ └── index.jsx ├── generators │ ├── c.example │ ├── b.example │ ├── a.example │ ├── e.example │ ├── d.example │ └── index.jsx ├── variables │ └── index.jsx ├── classes │ ├── a.example │ ├── c.example │ ├── b.example │ └── index.jsx └── concise-methods │ ├── a.example │ └── index.jsx ├── README.md ├── code.jsx ├── styles └── guide.styl ├── webpack.config.minified.js ├── webpack.config.js ├── components ├── container.jsx ├── footer.jsx └── sidebar.jsx ├── example-list.js ├── index.html ├── package.json ├── img └── formidable-logo.svg └── index.jsx /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | assets 3 | -------------------------------------------------------------------------------- /examples/arrow-functions/b.example: -------------------------------------------------------------------------------- 1 | const a = 2; 2 | 3 | const multiply = num => num * a; 4 | 5 | console.log(multiply(3)) -------------------------------------------------------------------------------- /examples/destructuring/f.example: -------------------------------------------------------------------------------- 1 | const foo = {a: "1", b: "2", c: "3"}; 2 | const {a, ...others} = foo; 3 | 4 | console.log(others); -------------------------------------------------------------------------------- /examples/spread-operator/a.example: -------------------------------------------------------------------------------- 1 | const numbers = [1, 2, 3, 4]; 2 | 3 | const moreNumbers = [...numbers, 5, 6]; 4 | 5 | console.log(moreNumbers); -------------------------------------------------------------------------------- /examples/arrow-functions/c.example: -------------------------------------------------------------------------------- 1 | const numbers = [1, 2, 3, 4]; 2 | const doubled = numbers.map(number => number * 2); 3 | 4 | console.log(doubled); -------------------------------------------------------------------------------- /examples/arrow-functions/a.example: -------------------------------------------------------------------------------- 1 | const a = 2; 2 | 3 | const multiply = function (num) { 4 | return num * a; 5 | }.bind(this); 6 | 7 | console.log(multiply(3)) -------------------------------------------------------------------------------- /examples/object-literals/a.example: -------------------------------------------------------------------------------- 1 | const foo = "foo"; 2 | const bar = function () { 3 | return "bar"; 4 | }; 5 | 6 | const a = {foo, bar}; 7 | 8 | console.log(a); -------------------------------------------------------------------------------- /examples/generators/c.example: -------------------------------------------------------------------------------- 1 | const foo = function* (x) { 2 | yield x; 3 | } 4 | 5 | const bar = foo(3); 6 | 7 | console.log(bar.next()); 8 | 9 | console.log(bar.next()); -------------------------------------------------------------------------------- /examples/spread-operator/c.example: -------------------------------------------------------------------------------- 1 | const foo = new Set().add(1).add(2); 2 | 3 | console.log(...foo); 4 | 5 | const bar = new Map().set("a", 1).set("b", 2); 6 | 7 | console.log(...bar); -------------------------------------------------------------------------------- /examples/destructuring/d.example: -------------------------------------------------------------------------------- 1 | const foo = {a: [{b: "2"}, {c: ["3", "4"]}]}; 2 | 3 | const {a: [{b: x}, {c: [y, z] }] } = foo; 4 | 5 | console.log(x) 6 | console.log(y) 7 | console.log(z) -------------------------------------------------------------------------------- /examples/generators/b.example: -------------------------------------------------------------------------------- 1 | const foo = function* () { 2 | console.log("here"); 3 | } 4 | 5 | // No console output here 6 | const bar = foo(); 7 | 8 | // outputs "here" 9 | bar.next(); -------------------------------------------------------------------------------- /examples/arrow-functions/d.example: -------------------------------------------------------------------------------- 1 | const numbers = [1, 2, 3, 4]; 2 | const cubed = numbers.map(number => { 3 | const squared = number * number; 4 | 5 | return squared * number; 6 | }); 7 | 8 | console.log(cubed); -------------------------------------------------------------------------------- /examples/destructuring/b.example: -------------------------------------------------------------------------------- 1 | const foo = {a: "1", b: "2", c: "3"}; 2 | const {a, c} = foo; 3 | 4 | console.log(a + c); 5 | 6 | // Assign a new variable name 7 | const {b: baz} = foo; 8 | 9 | console.log(baz); -------------------------------------------------------------------------------- /examples/destructuring/e.example: -------------------------------------------------------------------------------- 1 | const foo = [1, 2, 3, 4, 5]; 2 | 3 | const [a, b, ...cde] = foo; 4 | 5 | console.log(cde); 6 | 7 | // Can be used in other patterns 8 | const [w, , ...[, ,z]] = foo; 9 | 10 | console.log(z); -------------------------------------------------------------------------------- /examples/generators/a.example: -------------------------------------------------------------------------------- 1 | const foo = function* () { 2 | console.log("foo"); 3 | } 4 | 5 | // No console output here 6 | const bar = foo(); 7 | 8 | // bar is now an instance of the generator and the console.log has never been run. -------------------------------------------------------------------------------- /examples/destructuring/a.example: -------------------------------------------------------------------------------- 1 | const foo = ["one", "two", "three"]; 2 | 3 | const [a, b, c] = foo; 4 | 5 | console.log(a + b + c); 6 | 7 | const [x, ,z] = foo; 8 | 9 | console.log(x + z); 10 | 11 | const [, y] = foo; 12 | 13 | console.log(y); -------------------------------------------------------------------------------- /examples/generators/e.example: -------------------------------------------------------------------------------- 1 | const foo = function* (x) { 2 | yield x + 1; 3 | yield x + 2; 4 | yield x + 3; 5 | 6 | // Any return statement here would be ignored by the for..of loop 7 | } 8 | 9 | for (let y of foo(6)) { 10 | console.log(y); 11 | } -------------------------------------------------------------------------------- /examples/spread-operator/b.example: -------------------------------------------------------------------------------- 1 | const foo = function (a, b, c) { 2 | console.log("a:", a); 3 | console.log("b:", b); 4 | console.log("c:", c); 5 | } 6 | 7 | const bar = [1, 2, 3]; 8 | 9 | foo(...bar); 10 | 11 | const baz = [5,6]; 12 | 13 | foo(4, ...baz); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # es6-interactive-guide 2 | An interactive guide to ES6 3 | 4 | [live site](http://projects.formidablelabs.com/es6-interactive-guide/) 5 | 6 | Running the page locally: 7 | ``` 8 | npm install 9 | webpack // add --watch if you like 10 | // open index.html in browser 11 | ``` -------------------------------------------------------------------------------- /examples/generators/d.example: -------------------------------------------------------------------------------- 1 | const foo = function* (x) { 2 | const y = x + (yield x); 3 | 4 | yield y; 5 | } 6 | 7 | const bar = foo(5); 8 | 9 | console.log(bar.next().value) // outputs from 'yield x' 10 | 11 | console.log(bar.next(8).value) //outputs 'yield y' of ' + ' -------------------------------------------------------------------------------- /examples/variables/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react/addons'; 2 | import Playground from 'component-playground'; 3 | import Code from '../../code.jsx'; 4 | 5 | export default React.createClass({ 6 | render() { 7 | return ( 8 |
9 |
10 | ); 11 | } 12 | }); 13 | -------------------------------------------------------------------------------- /examples/classes/a.example: -------------------------------------------------------------------------------- 1 | // class declaration 2 | class Rectangle { 3 | constructor(height, width) { 4 | this.height = height; 5 | this.width = width; 6 | } 7 | } 8 | 9 | // class expression (unnamed) 10 | var Square = class { 11 | constructor(width) { 12 | this.width = width; 13 | } 14 | }; -------------------------------------------------------------------------------- /examples/concise-methods/a.example: -------------------------------------------------------------------------------- 1 | const foo = function () { 2 | return "foo" 3 | }; 4 | 5 | const a = "a"; 6 | 7 | const obj = { 8 | foo, 9 | a, 10 | getTitle() { 11 | return `The title is ${this.a}`; 12 | } 13 | }; 14 | 15 | console.log(obj.foo()); 16 | console.log(obj.a); 17 | console.log(obj.getTitle()); 18 | -------------------------------------------------------------------------------- /code.jsx: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import React from 'react/addons'; 4 | 5 | const styles = { 6 | background: '#E8EDF2', 7 | fontSize: 15, 8 | fontFamily: 'Consolas, Liberation Mono, monospace', 9 | padding: '3px 3px 2px' 10 | }; 11 | 12 | export default React.createClass({ 13 | render() { 14 | return {this.props.children} 15 | } 16 | }); 17 | -------------------------------------------------------------------------------- /examples/destructuring/c.example: -------------------------------------------------------------------------------- 1 | let foo = {a: "1", b: "2", c: "3"}; 2 | 3 | const computed = "d"; 4 | 5 | foo[computed] = "4"; 6 | 7 | // Destructure computed property 8 | const {[computed]: bar} = foo; 9 | 10 | console.log(bar); 11 | 12 | const baz = {w: {x: "5", y: "6"}}; 13 | 14 | // Notice the overloaded ":" for nesting 15 | const {w: {x: z}} = baz; 16 | 17 | console.log(z); -------------------------------------------------------------------------------- /styles/guide.styl: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | } 4 | 5 | .container { 6 | position: relative; 7 | width: 1024px; 8 | margin: 0 auto; 9 | padding: 0 40px; 10 | } 11 | 12 | .inline-code-sample { 13 | margin: 0; 14 | border: 1px solid #ddd; 15 | background-color: #f8f8f8; 16 | border-radius: 3px; 17 | padding: 2px; 18 | font-family: Consolas, Courier, monospace; 19 | font-size: 16px; 20 | } 21 | 22 | @media (max-width: 1200px) { 23 | .container { 24 | width: auto; 25 | } 26 | } -------------------------------------------------------------------------------- /examples/concise-methods/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react/addons'; 2 | import Playground from 'component-playground'; 3 | import Code from '../../code.jsx'; 4 | import a from 'raw!./a.example'; 5 | 6 | export default React.createClass({ 7 | render() { 8 | return ( 9 |
10 |

In object literals and classes we can condense render: function () {"{}"} to render() {}

11 | 12 |
13 | ); 14 | } 15 | }); 16 | -------------------------------------------------------------------------------- /webpack.config.minified.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'); 2 | var _ = require('lodash'); 3 | 4 | module.exports = _.merge({}, require('./webpack.config.js'), { 5 | plugins: [ 6 | new webpack.optimize.DedupePlugin(), 7 | new webpack.optimize.UglifyJsPlugin({ 8 | compress: { 9 | warnings: false 10 | } 11 | }), 12 | new webpack.DefinePlugin({ 13 | "process.env": { 14 | // Signal production mode for React JS and other libs. 15 | NODE_ENV: JSON.stringify("production") 16 | } 17 | }) 18 | ] 19 | }); 20 | -------------------------------------------------------------------------------- /examples/classes/c.example: -------------------------------------------------------------------------------- 1 | class Rectangle { 2 | constructor(width, height) { 3 | this.width = width; 4 | this.height = height; 5 | } 6 | 7 | ['perimeter']() { 8 | return (this.width * 2) + (this.height * 2); 9 | } 10 | 11 | get ['area']() { 12 | return this.width * this.height; 13 | } 14 | 15 | * dimensions() { 16 | yield this.width; 17 | yield this.height; 18 | } 19 | } 20 | 21 | const r = new Rectangle(3, 5); 22 | 23 | console.log(r.perimeter()); 24 | 25 | console.log(r.area); 26 | 27 | for (let x of r.dimensions()) { 28 | console.log(x); 29 | } -------------------------------------------------------------------------------- /examples/object-literals/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react/addons'; 2 | import Playground from 'component-playground'; 3 | import Code from '../../code.jsx'; 4 | import a from 'raw!./a.example'; 5 | 6 | export default React.createClass({ 7 | render() { 8 | return ( 9 |
10 |

11 | Object literals have gotten a new shorthand notation. 12 | {"{name: name, title: title}"} can be condensed to {"{name, title}"} 13 |

14 | 15 |
16 | ); 17 | } 18 | }); 19 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = { 4 | cache: true, 5 | debug: false, 6 | devtool: false, 7 | entry: { 8 | bundle: 'index.jsx' 9 | }, 10 | output: { 11 | path: 'assets', 12 | publicPath: 'assets', 13 | filename: 'bundle.js' 14 | }, 15 | module: { 16 | loaders: [{ 17 | test: /\.js(x)?$/, 18 | exclude: [/node_modules/], 19 | loader: 'babel-loader?stage=1' 20 | }, { 21 | test: /\.css$/, 22 | loader: "style-loader!css-loader" 23 | } 24 | ] 25 | }, 26 | resolve: { 27 | root: [__dirname], 28 | modulesDirectories: ['node_modules', 'src'], 29 | extensions: ['','.js','.jsx'] 30 | } 31 | }; 32 | -------------------------------------------------------------------------------- /examples/classes/b.example: -------------------------------------------------------------------------------- 1 | class Rectangle { 2 | constructor(height, width) { 3 | this.height = height; 4 | this.width = width; 5 | } 6 | 7 | get color() { 8 | return this._color; 9 | } 10 | 11 | set color(c) { 12 | this._color = c; 13 | } 14 | 15 | // Read only property 16 | get dimensions() { 17 | return `height: ${this.height}, width: ${this.width}`; 18 | } 19 | 20 | static area(rectangle) { 21 | return rectangle.width * rectangle.height; 22 | } 23 | } 24 | 25 | class Square extends Rectangle { 26 | constructor(width) { 27 | super(width, width); 28 | } 29 | } 30 | 31 | const s = new Square(10); 32 | 33 | console.log(s.width); 34 | 35 | console.log(s.dimensions); 36 | 37 | console.log(Rectangle.area(s)); 38 | -------------------------------------------------------------------------------- /components/container.jsx: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import React from 'react/addons'; 4 | import Radium from 'radium'; 5 | 6 | var styles = { 7 | paddingRight: 16, 8 | paddingLeft: 16, 9 | maxWidth: 1024, 10 | 11 | '@media (min-width: 500px)': { 12 | paddingRight: 32, 13 | paddingLeft: 32 14 | }, 15 | 16 | '@media (min-width: 800px)': { 17 | paddingRight: 48, 18 | paddingLeft: 48 19 | }, 20 | 21 | '@media (min-width: 1024px)': { 22 | paddingRight: 80, 23 | paddingLeft: 80 24 | } 25 | }; 26 | 27 | export default React.createClass(Radium.wrap({ 28 | render() { 29 | return ( 30 |
31 | {this.props.children} 32 |
33 | ); 34 | } 35 | })); 36 | -------------------------------------------------------------------------------- /example-list.js: -------------------------------------------------------------------------------- 1 | import Arrow from "./examples/arrow-functions/index.jsx"; 2 | import Classes from "./examples/classes/index.jsx"; 3 | import ConciseMethods from "./examples/concise-methods/index.jsx"; 4 | import Destructuring from "./examples/destructuring/index.jsx"; 5 | import Generators from "./examples/generators/index.jsx"; 6 | import ObjectLiterals from "./examples/object-literals/index.jsx"; 7 | import SpreadOperator from "./examples/spread-operator/index.jsx"; 8 | 9 | export default [{ 10 | name: "Arrow functions", 11 | example: Arrow 12 | }, { 13 | name: "Classes", 14 | example: Classes 15 | }, { 16 | name: "Concise methods", 17 | example: ConciseMethods 18 | }, { 19 | name: "Destructuring", 20 | example: Destructuring 21 | }, { 22 | name: "Generators", 23 | example: Generators 24 | }, { 25 | name: "Object literals", 26 | example: ObjectLiterals 27 | }, { 28 | name: "Spread operator", 29 | example: SpreadOperator 30 | }]; 31 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ES6 Interactive Guide 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /examples/spread-operator/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react/addons'; 2 | import Playground from 'component-playground'; 3 | import Code from '../../code.jsx'; 4 | import a from 'raw!./a.example'; 5 | import b from 'raw!./b.example'; 6 | import c from 'raw!./c.example'; 7 | 8 | export default React.createClass({ 9 | render() { 10 | return ( 11 |
12 |

13 | The spread operator ... takes an iterable and expands it into the individual elements. 14 | The spread operator looks identical to the rest operator but instead performs the opposite action. 15 | 16 |

17 |

18 | This is most useful for dealing with cases like apply where you want to pass an iterable as its components. 19 | In fact, apply is no longer needed to pass an array as arguments. 20 | 21 |

22 |

23 | Spread syntax works with any iterable object, including arrays and instances of Map and Set. 24 | 25 |

26 |
27 | ); 28 | } 29 | }); 30 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "es6-interactive-guide", 3 | "version": "0.0.1", 4 | "description": "An interactive guide to ES6", 5 | "main": "index.jsx", 6 | "directories": { 7 | "example": "examples" 8 | }, 9 | "dependencies": { 10 | "babel-core": "^5.2.16", 11 | "babel-loader": "^5.0.0", 12 | "component-playground": "^0.0.13", 13 | "css-loader": "^0.12.0", 14 | "radium": "0.11.1", 15 | "raw-loader": "^0.5.1", 16 | "react": "^0.13.2", 17 | "react-router": "^0.13.3", 18 | "style-loader": "^0.12.2", 19 | "stylus-loader": "^1.1.0", 20 | "webpack": "^1.8.11", 21 | "webpack-dev-server": "^1.8.2" 22 | }, 23 | "devDependencies": { 24 | "lodash": "^3.8.0" 25 | }, 26 | "scripts": { 27 | "start": "webpack-dev-server", 28 | "build": "webpack --config webpack.config.minified.js", 29 | "deploy": "git checkout gh-pages && git reset --hard master && npm run build && git add assets/* && git commit -m 'update gh-pages' && git push --force" 30 | }, 31 | "repository": { 32 | "type": "git", 33 | "url": "git+https://github.com/FormidableLabs/es6-interactive-guide.git" 34 | }, 35 | "author": "Rob Gerstenberger", 36 | "license": "ISC", 37 | "bugs": { 38 | "url": "https://github.com/FormidableLabs/es6-interactive-guide/issues" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /examples/classes/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react/addons'; 2 | import Playground from 'component-playground'; 3 | import Code from '../../code.jsx'; 4 | import a from 'raw!./a.example'; 5 | import b from 'raw!./b.example'; 6 | import c from 'raw!./c.example'; 7 | 8 | export default React.createClass({ 9 | render() { 10 | return ( 11 |
12 |

13 | Class syntax has been added to ES6. 14 | The underlying inheritance model is still prototypal but the class syntax can make it easier to reason about relationships. 15 | To create a class just use the class keyword. Classes can be created with class expressions or class declarations. 16 | Unlike function declarations, class declarations are not hoisted. 17 | 18 |

19 |

20 | ES6 classes support super, constructor, get, set, and static methods. 21 | Inheritance is achieved with the extends keyword. 22 | 23 |

24 |

25 | Classes can have computed method names, including setters and getters, and generator methods. 26 | 27 |

28 |
29 | ); 30 | } 31 | }); 32 | -------------------------------------------------------------------------------- /components/footer.jsx: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import React from 'react/addons'; 4 | import Radium from 'radium'; 5 | 6 | import Container from './container.jsx'; 7 | 8 | const styles = { 9 | footer: { 10 | padding: '36px 0', 11 | background: '#2b303b', 12 | color: '#fff', 13 | textAlign: 'center', 14 | fontSize: 18, 15 | borderTop: '1px solid #1D2227' 16 | }, 17 | 18 | logoLink: { 19 | display: 'block', 20 | margin: '16px 0' 21 | }, 22 | 23 | link: { 24 | fontWeight: 700, 25 | color: '#FF4136', 26 | 27 | ':hover': { 28 | color: '#fff' 29 | } 30 | } 31 | }; 32 | 33 | export default React.createClass(Radium.wrap({ 34 | displayName: 'Footer', 35 | 36 | render() { 37 | return ( 38 | 66 | ); 67 | } 68 | })); 69 | -------------------------------------------------------------------------------- /examples/arrow-functions/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react/addons'; 2 | import Playground from 'component-playground'; 3 | import a from 'raw!./a.example'; 4 | import b from 'raw!./b.example'; 5 | import c from 'raw!./c.example'; 6 | import d from 'raw!./d.example'; 7 | import Code from '../../code.jsx'; 8 | 9 | export default React.createClass({ 10 | render() { 11 | return ( 12 |
13 |

Arrow functions are shorthand for an anonymous function that keep the current context. E.g.

14 | 15 | 16 |

Can be written as:

17 | 18 | 19 |

This is most useful for cases like map or reduce:

20 | 21 | 22 |

Arrow function syntax

23 | 24 |

Arrow functions take the following form: 25 | {"() => "}. 26 |

27 | 28 |

29 | When there is only a single argument, the parens are optional e.g. 30 | {"(x) => x * x"} and {"x => x * x"} 31 | are both valid. When there are 0 or 2 or more arguments, parens are required. e.g. 32 | {"() => 'blah'"} or {"(x, y) => x * y"} 33 |

34 | 35 |

36 | For functions consisting of more than one expression, wrap the function body in curly braces: 37 | 38 |

39 |
40 | ); 41 | } 42 | }); 43 | -------------------------------------------------------------------------------- /img/formidable-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /examples/destructuring/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react/addons'; 2 | import Playground from 'component-playground'; 3 | import Code from '../../code.jsx'; 4 | import a from 'raw!./a.example'; 5 | import b from 'raw!./b.example'; 6 | import c from 'raw!./c.example'; 7 | import d from 'raw!./d.example'; 8 | import e from 'raw!./e.example'; 9 | import f from 'raw!./f.example'; 10 | 11 | export default React.createClass({ 12 | render() { 13 | return ( 14 |
15 |

Both arrays and objects now support destructuring.

16 | 17 |

18 | Array destructuring gives a quicker and more fine-grained approach to interacting with elements in an array. See below: 19 | 20 |

21 | 22 |

23 | Object destructuring is similar to array destructuring but uses key names to do the destructuring. 24 | 25 |

26 | 27 |

28 | Object destructuring also gives us some extra flexibility with nested objects and computed properties. 29 | 30 |

31 | 32 |

33 | Array and object destructuring can be used in conjuction with any nesting depth. 34 | 35 |

36 | 37 |

38 | Arrays also supports the `spread` operator .... 39 | This allows us to grab the remaining un-deconstructed subset of the array as an array. 40 | 41 | The rest operator looks identical to the spread operator but the two have different functions. 42 |

43 | 44 |

45 | In ES7, objects also support the `spread` operator. 46 | This allows us to grab the remaining un-deconstructed properties of the object as an object. 47 | 48 |

49 |
50 | ); 51 | } 52 | }); 53 | -------------------------------------------------------------------------------- /examples/generators/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react/addons'; 2 | import Playground from 'component-playground'; 3 | import Code from '../../code.jsx'; 4 | import a from 'raw!./a.example'; 5 | import b from 'raw!./b.example'; 6 | import c from 'raw!./c.example'; 7 | import d from 'raw!./d.example'; 8 | import e from 'raw!./e.example'; 9 | 10 | export default React.createClass({ 11 | render() { 12 | return ( 13 |
14 |

15 | Generators functions take the following form function* name() {"{}"}. 16 | Or our preferred const name = function* () {"{}"};, 17 | since we avoid function declarations in favor of function expressions. 18 |

19 | 20 |

Calling a generator doesn{"'"}t actually run any of its contents. A call to a generator returns a generator instance.

21 | 22 | 23 |

To use a generator instance we have to call .next()

24 | 25 | 26 |

.next() returns an object that looks like this:

27 |

{"{"} value: undefined, done: true {"}"}

28 | 29 |

What do value and done mean?

30 |

31 | done means that the generator {"doesn't"} have any more code to execute. 32 | AKA we are past the last yield statement. 33 | To understand value, we have to look at yield. 34 |

35 | 36 | 37 |

38 | A yield statement tells the generator to stop executing and return the following value. 39 | You can have yield statements without a return value. 40 | The generator will return done: true on the subsequent call to next after the last yield statement (see above). 41 |

42 | 43 |

yield statements can also be used to pass in new information to the generator.

44 | 45 | 46 |

47 | A little confusing right? What happens when we hit the first yield is we pass out x as value. 48 | The yield x statement then becomes whatever is passed into .next(). 49 | x is still 5 but yield x is now 8. 50 |

51 | 52 |

53 | Note: return statements in generators are not a good idea. 54 | Although they are easy to reason about for done: true, they {"don't"} show up in for..of loops. See below 55 |

56 | 57 |

Generators can be used with for..of loops for iterating through all of the yield statements

58 | 59 | 60 |

61 | In the for..of the variable Y is the result of the yield statements. 62 | As mentioned above, any return statement will be ignored by the loop. 63 |

64 | 65 |

For a more detailed overview of generators see {"http://davidwalsh.name/es6-generators"}

66 |
67 | ); 68 | } 69 | }); 70 | -------------------------------------------------------------------------------- /components/sidebar.jsx: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import React from 'react/addons'; 4 | import Router from 'react-router'; 5 | import Radium from 'radium'; 6 | 7 | const RouterLink = Router.Link; 8 | 9 | const styles = { 10 | base: { 11 | padding: '36px', 12 | background: '#F2F1F1', 13 | overflow: 'auto', 14 | WebkitOverflowScrolling: 'touch', 15 | display: 'flex', 16 | flexDirection: 'column', 17 | 18 | '@media (min-width: 960px)': { 19 | position: 'fixed', 20 | top: 0, 21 | left: 0, 22 | bottom: 0, 23 | width: 300 24 | } 25 | }, 26 | 27 | list: { 28 | padding: 0, 29 | margin: 0, 30 | listStyle: 'none', 31 | flex: '1 0 auto' 32 | }, 33 | 34 | siblingItem: { 35 | marginTop: 4, 36 | paddingTop: 4, 37 | borderTop: '1px solid #E4DEDE' 38 | }, 39 | 40 | link: { 41 | fontFamily: 'kulturista-web, Georgia, Times New Roman, serif', 42 | color: '#d71920', 43 | textDecoration: 'none', 44 | 45 | ':hover': { 46 | color: '#2b303b' 47 | } 48 | }, 49 | 50 | counter: { 51 | display: 'inline-block', 52 | marginRight: 12, 53 | color: '#333', 54 | fontWeight: '900', 55 | fontSize: 12, 56 | position: 'relative', 57 | top: -1, 58 | fontFamily: 'proxima-nova, Helvetica Neue, Helvetica, Arial, sans-serif', 59 | }, 60 | 61 | githubLink: { 62 | display: 'block', 63 | marginTop: 48, 64 | textAlign: 'center', 65 | flex: 'none' 66 | } 67 | }; 68 | 69 | const logoStyles = { 70 | base: { 71 | lineHeight: '1', 72 | textAlign: 'center', 73 | marginBottom: 36, 74 | flex: 'none' 75 | }, 76 | 77 | link: { 78 | textDecoration: 'none', 79 | color: '#2b303b' 80 | }, 81 | 82 | badge: { 83 | fontSize: 36, 84 | width: 85, 85 | height: 85, 86 | display: 'inline-block', 87 | borderRadius: '50%', 88 | lineHeight: '81px', 89 | border: '4px solid' 90 | }, 91 | 92 | highlight: { 93 | color: '#E55A5F' 94 | }, 95 | 96 | text: { 97 | fontFamily: 'kulturista-web, Georgia, Times New Roman, serif', 98 | fontWeight: 300, 99 | display: 'block' 100 | } 101 | } 102 | 103 | export default React.createClass(Radium.wrap({ 104 | render() { 105 | return ( 106 |
107 |

108 | 112 | 113 | ES 114 | 6 115 | 116 | Interactive Guide 117 | 118 |

119 | 120 |
    121 | {this.props.examples.map((exampleObj, index) => { 122 | return ( 123 |
  • 0 ? styles.siblingItem : null} 126 | > 127 | 132 | {index + 1} 133 | {exampleObj.name} 134 | 135 |
    • 136 | ); 137 | })} 138 |
139 | 140 | 145 | Contribute on GitHub 146 | 147 |
148 | ); 149 | } 150 | })); 151 | -------------------------------------------------------------------------------- /index.jsx: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import 'component-playground/demo/styles/syntax.css'; 4 | import 'component-playground/demo/styles/codemirror.css'; 5 | 6 | import React from 'react/addons'; 7 | import Router from 'react-router'; 8 | import Radium from 'radium'; 9 | 10 | const DefaultRoute = Router.DefaultRoute; 11 | const RouterLink = Router.Link; 12 | const Route = Router.Route; 13 | const RouteHandler = Router.RouteHandler; 14 | 15 | import exampleListMap from './example-list'; 16 | 17 | import Container from './components/container.jsx'; 18 | import Footer from './components/footer.jsx'; 19 | import Sidebar from './components/sidebar.jsx'; 20 | 21 | const headerStyles = { 22 | base: { 23 | position: 'relative', 24 | zIndex: 1, 25 | padding: '16px 0', 26 | marginBottom: 30, 27 | background: '#2b303b', 28 | color: '#fff' 29 | }, 30 | title: { 31 | fontSize: 21, 32 | textTransform: 'uppercase', 33 | letterSpacing: '0.1em', 34 | fontWeight: '700', 35 | textRendering: 'optimizeLegibility' 36 | } 37 | }; 38 | 39 | const flexContainerStyles = { 40 | base: { 41 | '@media (min-width: 960px)': { 42 | paddingLeft: 300, 43 | display: 'flex', 44 | flexDirection: 'column', 45 | minHeight: '100vh', 46 | } 47 | } 48 | }; 49 | 50 | const Index = React.createClass(Radium.wrap({ 51 | render() { 52 | return ( 53 |
54 | 131 | 132 | 133 | 134 |
135 | 136 | 137 | 138 | 139 |
140 |
141 |
142 | ); 143 | } 144 | })); 145 | 146 | const headingStyles = { 147 | base: { 148 | fontSize: 24, 149 | fontFamily: 'kulturista-web, Georgia, Times New Roman, serif', 150 | fontWeight: '300', 151 | marginBottom: 16, 152 | lineHeight: '1', 153 | 154 | '@media (min-width: 500px)': { 155 | textAlign: 'center', 156 | fontSize: 36 157 | } 158 | }, 159 | 160 | counter: { 161 | background: '#d71920', 162 | display: 'inline-block', 163 | textAlign: 'center', 164 | color: '#fff', 165 | borderRadius: '50%', 166 | marginRight: 12, 167 | fontFamily: 'proxima-nova, Helvetica Neue, Helvetica, Arial, sans-serif', 168 | fontWeight: '700', 169 | height: 24, 170 | width: 24, 171 | lineHeight: '26px', 172 | fontSize: 18, 173 | position: 'relative', 174 | top: -3, 175 | 176 | '@media (min-width: 500px)': { 177 | top: -6 178 | } 179 | } 180 | }; 181 | 182 | const exampleHandlers = exampleListMap.map((exampleObj, index) => { 183 | return React.createClass(Radium.wrap({ 184 | displayName: exampleObj.name, 185 | render() { 186 | return ( 187 |
188 |

189 | {index + 1} 190 | {exampleObj.name} 191 |

192 | 193 |
194 | ); 195 | } 196 | })); 197 | }); 198 | 199 | const routes = ( 200 | 201 | {exampleHandlers.map((handler, i) => { 202 | return ( 203 | 207 | 208 | ) 209 | })} 210 | 211 | 212 | ); 213 | 214 | Router.run(routes, function (Handler) { 215 | React.render(, document.getElementById('root-component')); 216 | }); 217 | --------------------------------------------------------------------------------