React 代码的最佳实践和模式，例子

# Chapter 2 : Emerging JavaScript If you haven't made the switch to the latest JavaScript syntax yet, now is a good time to get started. ## Samples ### Declaring Variables in ES6 #### const 1. Without const ([run it](http://jsbin.com/gapoxa/1/edit?js,console)) 2. With const ❌ ([run it](https://jsbin.com/gapoxa/2/edit?js,console)) #### let 3. Without let ([run it](https://jsbin.com/gapoxa/3/edit?js,console)) 4. With let ([run it](https://jsbin.com/gapoxa/4/edit?js,console)) 5. Loops with var ([run it](http://jsbin.com/gapoxa/5/edit?js,output)) 6. Loops with let ([run it](http://jsbin.com/gapoxa/6/edit?js,output)) #### template strings 7. Without Template Strings - Simple Concatenation ([run it](https://jsbin.com/gapoxa/7/edit?js,console)) 8. With Template Strings - Simple concatenation ([run it](https://jsbin.com/gapoxa/8/edit?js,console)) 9. Template Strings - Email ([run it](https://output.jsbin.com/gapoxa/9)) 10. Template Strings - HTML ([run it](https://jsbin.com/gapoxa/10/edit?js,output)) ### Default Parameters 1. Default Parameters ([run it](http://jsbin.com/yeqexu/1/edit?js,console)) 2. Default Parameters with Objects ([run it](http://jsbin.com/yeqexu/2/edit?js,console)) ### Arrow functions 1. Regular Function ([run it](http://jsbin.com/tegefa/1/edit?js,console)) 2. Arrow Function ([run it](http://jsbin.com/tegefa/2/edit?js,console)) 3. Arrow Function - Multiple Args ([run it](http://jsbin.com/tegefa/3/edit?js,console)) 4. Multiple Args - One Line ([run it](http://jsbin.com/tegefa/4/edit?js,console)) 5. Arrow Functions with if statements ❌ ([run it](http://jsbin.com/tegefa/5/edit?js,console)) 6. Arrow Functions with errors ❌ ([run it](http://jsbin.com/tegefa/6/edit?js,console)) 7. setTimeout ❌ ([run it](http://jsbin.com/tegefa/7/edit?js,console)) 8. setTimeout with .bind ([run it](http://jsbin.com/tegefa/8/edit?js,console)) 9. setTimeout with Arrow Function ([run it](http://jsbin.com/tegefa/9/edit?js,console)) 10. setTimeout with 'this' problem ❌ ([run it](http://jsbin.com/tegefa/10/edit?js,console)) 11. Showing 'this' problem ([run it](http://jsbin.com/tegefa/11/edit?js,console)) ### Objects and Arrays #### Destructuring Assignment 1. Destructuring Assignment ([run it](http://jsbin.com/jukokaf/1/edit?js,console)) 2. Destructuring with Arguments ([run it](http://jsbin.com/jukokaf/2/edit?js,console)) 3. Destructured Object Arguments ([run it](http://jsbin.com/jukokaf/3/edit?js,console)) 4. Destructuring Arrays ([run it](http://jsbin.com/jukokaf/4/edit?js,console)) 5. Destructuring with Comma Placeholders ([run it](http://jsbin.com/jukokaf/5/edit?js,console)) #### Object Literal Enhancement 6. Object Literal Enhancement ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/04-objects-and-arrays/06-object-literal-enhancement.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/04-objects-and-arrays/06-object-literal-enhancement.html), [bin](http://jsbin.com/jukokaf/6/edit?js,console)) 7. Object Literal Enhancements with Functions ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/04-objects-and-arrays/07-object-literal-enhancement.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/04-objects-and-arrays/07-object-literal-enhancement.html), [bin](http://jsbin.com/jukokaf/7/edit?js,console)) 8. Literal Enhancements: The Old Way ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/04-objects-and-arrays/08-object-literal-enhancement.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/04-objects-and-arrays/08-object-literal-enhancement.html), [bin](http://jsbin.com/jukokaf/8/edit?js,console)) 9. Literal Enhancements Now ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/04-objects-and-arrays/09-object-literal-enhancement.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/04-objects-and-arrays/09-object-literal-enhancement.html), [bin](http://jsbin.com/jukokaf/9/edit?js,console)) #### The Spread Operator 10. Spread Operator with Arrays ([run it](http://jsbin.com/jukokaf/10/edit?js,console)) 11. Array Destructuring with .reverse() ([run it](http://jsbin.com/jukokaf/11/edit?js,console)) 12. Spread Operator with Destructuring and .reverse() ([run it](http://jsbin.com/jukokaf/12/edit?js,console)) 13. Destructuring and the Spread Operator ([run it](http://jsbin.com/jukokaf/13/edit?js,console)) 14. Directions Functions ([run it](http://jsbin.com/jukokaf/14/edit?js,console)) 15. Spread Operator with Objects ([run it](http://jsbin.com/jukokaf/15/edit?js,console)) ### Promises 1. getFakeMembers ([run it](http://jsbin.com/pupojik/1/edit?js,console)) 2. fetch members ([run it](http://jsbin.com/haguhe/1/edit?js,console)) ### ES6 Class Syntax 1. The Constructor and the Prototype ([run it](http://jsbin.com/hoqileh/1/edit?js,console)) 2. Classes ([run it](http://jsbin.com/hoqileh/2/edit?js,console)) 3. Class Inheritance ([run it](http://jsbin.com/hoqileh/3/edit?js,console))