diff --git a/chapter-01/readme.md b/chapter-01/readme.md index e987681f..3d22eb2a 100644 --- a/chapter-01/readme.md +++ b/chapter-01/readme.md @@ -53,9 +53,8 @@ optionally install one of these version mangers: Installing the React Tools -------------------------------- -Next, there are some Chrome developer extensions or Firefox add-ons that you will need to install in order to debug React: +Next, install the React developer tools: -* Detector ([Chrome](https://chrome.google.com/webstore/detail/react-detector/jaaklebbenondhkanegppccanebkdjlh?hl=en-US)) * Development Tools ([Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) | [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/)) @@ -64,8 +63,23 @@ Working with JSBin This repository links to samples hosted on JSBin so that you can immediately begin changing each sample and checking output to see how each sample has changed. -Here is a Hello World sample that JSBin has assigned the identifier __gosabo__. There are 3 available versions of this -sample in JSBin under the same identifier. +Here is a Hello World sample that JSBin has assigned the identifier __gosabo__. There are 3 available versions of this sample in JSBin under the same identifier. + +Note: All JSBin links throughout this repository use React 15. To update, change the script tag CDN links to version 16. + +Change + +```html + + +``` + +To + +```html + + +``` ##### A preview of the latest version in a sample: [http://output.jsbin.com/gosabo](http://output.jsbin.com/gosabo) @@ -77,7 +91,7 @@ sample in JSBin under the same identifier. [http://output.jsbin.com/gosabo/quite](http://output.jsbin.com/gosabo/quiet) ##### Version 1 of the sample as output: [http://output.jsbin.com/gosabo/1](http://output.jsbin.com/gosabo/1) -##### Version 1 of te sample in the editor: +##### Version 1 of the sample in the editor: [http://output.jsbin.com/gosabo/1/edit](http://output.jsbin.com/gosabo/1/edit) ##### Version 2 of the sample as output: [http://output.jsbin.com/gosabo/2](http://output.jsbin.com/gosabo/2) @@ -89,9 +103,9 @@ CDN's for JavaScript libraries Ultimately, we will be working with webpack and npms, but to get running quickly, here are some CDN links that can be included in JSBin with this syntax: `` -* [React](https://unpkg.com/react@15.4.2/dist/react.js) -* [React DOM](https://unpkg.com/react-dom@15.4.2/dist/react-dom.js) -* [Babel Inline Transpiller](https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js) +* [React](https://unpkg.com/react@16/umd/react.development.js) +* [React DOM](https://unpkg.com/react-dom@16/umd/react-dom.development.js) +* [Babel Inline Transpiler](https://unpkg.com/babel-standalone@6.15.0/babel.min.js) * [fetch](https://cdnjs.cloudflare.com/ajax/libs/fetch/1.0.0/fetch.min.js) * [Redux](https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.min.js) * [React Router Source](https://cdnjs.cloudflare.com/ajax/libs/react-router/4.0.0/react-router.min.js) diff --git a/chapter-02/01-declaring-variables/01-const.html b/chapter-02/01-declaring-variables/01-const.html new file mode 100644 index 00000000..890efc5b --- /dev/null +++ b/chapter-02/01-declaring-variables/01-const.html @@ -0,0 +1,22 @@ + + + + + + Const + + + +

Const

Open the console

+ + + diff --git a/chapter-02/01-declaring-variables/02-const.html b/chapter-02/01-declaring-variables/02-const.html new file mode 100644 index 00000000..a632e6cd --- /dev/null +++ b/chapter-02/01-declaring-variables/02-const.html @@ -0,0 +1,21 @@ + + + + + + Const + + + +

Const

Open the console

+ + + diff --git a/chapter-02/01-declaring-variables/03-let.html b/chapter-02/01-declaring-variables/03-let.html new file mode 100644 index 00000000..48c4f071 --- /dev/null +++ b/chapter-02/01-declaring-variables/03-let.html @@ -0,0 +1,27 @@ + + + + + + Let + + + +

Let

Open the console

+ + + diff --git a/chapter-02/01-declaring-variables/04-let.html b/chapter-02/01-declaring-variables/04-let.html new file mode 100644 index 00000000..c035c59d --- /dev/null +++ b/chapter-02/01-declaring-variables/04-let.html @@ -0,0 +1,27 @@ + + + + + + Let + + + +

Let

Open the console

+ + + diff --git a/chapter-02/01-declaring-variables/05-let.html b/chapter-02/01-declaring-variables/05-let.html new file mode 100644 index 00000000..27ac9141 --- /dev/null +++ b/chapter-02/01-declaring-variables/05-let.html @@ -0,0 +1,41 @@ + + + + + + + Let + + + +

Click on a Box

+ + + diff --git a/chapter-02/01-declaring-variables/06-let.html b/chapter-02/01-declaring-variables/06-let.html new file mode 100644 index 00000000..fcf7fdd7 --- /dev/null +++ b/chapter-02/01-declaring-variables/06-let.html @@ -0,0 +1,42 @@ + + + + + + + Let + + + +

Click on a Box

+ + + + diff --git a/chapter-02/01-declaring-variables/07-template-strings.html b/chapter-02/01-declaring-variables/07-template-strings.html new file mode 100644 index 00000000..53e7da39 --- /dev/null +++ b/chapter-02/01-declaring-variables/07-template-strings.html @@ -0,0 +1,24 @@ + + + + + + Template Strings + + + +

Template Strings

Open the console

+ + + diff --git a/chapter-02/01-declaring-variables/08-template-strings.html b/chapter-02/01-declaring-variables/08-template-strings.html new file mode 100644 index 00000000..50424145 --- /dev/null +++ b/chapter-02/01-declaring-variables/08-template-strings.html @@ -0,0 +1,24 @@ + + + + + + Template Strings + + + +

Template Strings

Open the console

+ + + diff --git a/chapter-02/01-declaring-variables/09-template-strings.html b/chapter-02/01-declaring-variables/09-template-strings.html new file mode 100644 index 00000000..01d9f22d --- /dev/null +++ b/chapter-02/01-declaring-variables/09-template-strings.html @@ -0,0 +1,46 @@ + + + + + + Template Strings + + + +

Template Strings

Open the console

+ + + diff --git a/chapter-02/01-declaring-variables/10-template-strings.html b/chapter-02/01-declaring-variables/10-template-strings.html new file mode 100644 index 00000000..d5d8e999 --- /dev/null +++ b/chapter-02/01-declaring-variables/10-template-strings.html @@ -0,0 +1,41 @@ + + + + + + Template Strings + + + +

Template Strings

Open the console

+ + + diff --git a/chapter-02/02-es6-functions/01-default-parameters.html b/chapter-02/02-es6-functions/01-default-parameters.html new file mode 100644 index 00000000..256e1c1c --- /dev/null +++ b/chapter-02/02-es6-functions/01-default-parameters.html @@ -0,0 +1,22 @@ + + + + + + Default Parameters + + + +

Default Parameters

Open the console

+ + + diff --git a/chapter-02/02-es6-functions/02-default-parameters.html b/chapter-02/02-es6-functions/02-default-parameters.html new file mode 100644 index 00000000..9f2f31c6 --- /dev/null +++ b/chapter-02/02-es6-functions/02-default-parameters.html @@ -0,0 +1,30 @@ + + + + + + Default Parameters + + + +

Default Parameters

Open the console

+ + + diff --git a/chapter-02/03-arrow-functions/01-arrows.html b/chapter-02/03-arrow-functions/01-arrows.html new file mode 100644 index 00000000..34af1b79 --- /dev/null +++ b/chapter-02/03-arrow-functions/01-arrows.html @@ -0,0 +1,25 @@ + + + + + + Arrow Functions + + + +

Arrow Functions

Open the console

+ + + diff --git a/chapter-02/03-arrow-functions/02-arrows.html b/chapter-02/03-arrow-functions/02-arrows.html new file mode 100644 index 00000000..bd3423ff --- /dev/null +++ b/chapter-02/03-arrow-functions/02-arrows.html @@ -0,0 +1,23 @@ + + + + + + Arrow Functions + + + +

Arrow Functions

Open the console

+ + + diff --git a/chapter-02/03-arrow-functions/03-arrows.html b/chapter-02/03-arrow-functions/03-arrows.html new file mode 100644 index 00000000..b1412fce --- /dev/null +++ b/chapter-02/03-arrow-functions/03-arrows.html @@ -0,0 +1,25 @@ + + + + + + Arrow Functions + + + +

Arrow Functions

Open the console

+ + + diff --git a/chapter-02/03-arrow-functions/04-arrows.html b/chapter-02/03-arrow-functions/04-arrows.html new file mode 100644 index 00000000..b6d5da84 --- /dev/null +++ b/chapter-02/03-arrow-functions/04-arrows.html @@ -0,0 +1,23 @@ + + + + + + Arrow Functions + + + +

Arrow Functions

Open the console

+ + + diff --git a/chapter-02/03-arrow-functions/05-arrows.html b/chapter-02/03-arrow-functions/05-arrows.html new file mode 100644 index 00000000..da569916 --- /dev/null +++ b/chapter-02/03-arrow-functions/05-arrows.html @@ -0,0 +1,34 @@ + + + + + + Arrow Functions + + + +

Arrow Functions

Open the console

+ + + diff --git a/chapter-02/03-arrow-functions/06-arrows.html b/chapter-02/03-arrow-functions/06-arrows.html new file mode 100644 index 00000000..a2326991 --- /dev/null +++ b/chapter-02/03-arrow-functions/06-arrows.html @@ -0,0 +1,33 @@ + + + + + + Arrow Functions + + + +

Arrow Functions

Open the console

+ + + diff --git a/chapter-02/03-arrow-functions/07-arrows.html b/chapter-02/03-arrow-functions/07-arrows.html new file mode 100644 index 00000000..425d0836 --- /dev/null +++ b/chapter-02/03-arrow-functions/07-arrows.html @@ -0,0 +1,31 @@ + + + + + + Arrow Functions + + + +

Arrow Functions

Open the console

+ + + diff --git a/chapter-02/03-arrow-functions/08-arrows.html b/chapter-02/03-arrow-functions/08-arrows.html new file mode 100644 index 00000000..16b138c5 --- /dev/null +++ b/chapter-02/03-arrow-functions/08-arrows.html @@ -0,0 +1,31 @@ + + + + + + Arrow Functions + + + +

Arrow Functions

Open the console

+ + + diff --git a/chapter-02/03-arrow-functions/09-arrows.html b/chapter-02/03-arrow-functions/09-arrows.html new file mode 100644 index 00000000..19d63274 --- /dev/null +++ b/chapter-02/03-arrow-functions/09-arrows.html @@ -0,0 +1,32 @@ + + + + + + Arrow Functions + + + +

Arrow Functions

Open the console

+ + + diff --git a/chapter-02/03-arrow-functions/10-arrows.html b/chapter-02/03-arrow-functions/10-arrows.html new file mode 100644 index 00000000..55930a34 --- /dev/null +++ b/chapter-02/03-arrow-functions/10-arrows.html @@ -0,0 +1,31 @@ + + + + + + Arrow Functions + + + +

Arrow Functions

Open the console

+ + + diff --git a/chapter-02/03-arrow-functions/11-arrows.html b/chapter-02/03-arrow-functions/11-arrows.html new file mode 100644 index 00000000..21c780a9 --- /dev/null +++ b/chapter-02/03-arrow-functions/11-arrows.html @@ -0,0 +1,31 @@ + + + + + + Arrow Functions + + + +

Arrow Functions

Open the console

+ + + diff --git a/chapter-02/04-objects-and-arrays/01-destructuring.html b/chapter-02/04-objects-and-arrays/01-destructuring.html new file mode 100644 index 00000000..20faa849 --- /dev/null +++ b/chapter-02/04-objects-and-arrays/01-destructuring.html @@ -0,0 +1,35 @@ + + + + + + Destructuring + + + +

Destructuring

Open the console

+ + + diff --git a/chapter-02/04-objects-and-arrays/02-destructuring.html b/chapter-02/04-objects-and-arrays/02-destructuring.html new file mode 100644 index 00000000..d423a863 --- /dev/null +++ b/chapter-02/04-objects-and-arrays/02-destructuring.html @@ -0,0 +1,29 @@ + + + + + + Destructuring + + + +

Destructuring

Open the console

+ + + diff --git a/chapter-02/04-objects-and-arrays/03-destructuring.html b/chapter-02/04-objects-and-arrays/03-destructuring.html new file mode 100644 index 00000000..74502bc7 --- /dev/null +++ b/chapter-02/04-objects-and-arrays/03-destructuring.html @@ -0,0 +1,28 @@ + + + + + + Destructuring + + + +

Destructuring

Open the console

+ + + diff --git a/chapter-02/04-objects-and-arrays/04-destructuring.html b/chapter-02/04-objects-and-arrays/04-destructuring.html new file mode 100644 index 00000000..a203e608 --- /dev/null +++ b/chapter-02/04-objects-and-arrays/04-destructuring.html @@ -0,0 +1,22 @@ + + + + + + Destructuring + + + +

Destructuring

Open the console

+ + + diff --git a/chapter-02/04-objects-and-arrays/05-destructuring.html b/chapter-02/04-objects-and-arrays/05-destructuring.html new file mode 100644 index 00000000..882988b9 --- /dev/null +++ b/chapter-02/04-objects-and-arrays/05-destructuring.html @@ -0,0 +1,22 @@ + + + + + + Destructuring + + + +

Destructuring

Open the console

+ + + diff --git a/chapter-02/04-objects-and-arrays/06-object-literal-enhancement.html b/chapter-02/04-objects-and-arrays/06-object-literal-enhancement.html new file mode 100644 index 00000000..218aa128 --- /dev/null +++ b/chapter-02/04-objects-and-arrays/06-object-literal-enhancement.html @@ -0,0 +1,25 @@ + + + + + + Literal Enhancements + + + +

Literal Enhancements

Open the console

+ + + diff --git a/chapter-02/04-objects-and-arrays/07-object-literal-enhancement.html b/chapter-02/04-objects-and-arrays/07-object-literal-enhancement.html new file mode 100644 index 00000000..78150b03 --- /dev/null +++ b/chapter-02/04-objects-and-arrays/07-object-literal-enhancement.html @@ -0,0 +1,28 @@ + + + + + + Literal Enhancements + + + +

Literal Enhancements

Open the console

+ + + diff --git a/chapter-02/04-objects-and-arrays/08-object-literal-enhancement.html b/chapter-02/04-objects-and-arrays/08-object-literal-enhancement.html new file mode 100644 index 00000000..28a491d5 --- /dev/null +++ b/chapter-02/04-objects-and-arrays/08-object-literal-enhancement.html @@ -0,0 +1,38 @@ + + + + + + Literal Enhancements + + + +

Literal Enhancements

Open the console

+ + + diff --git a/chapter-02/04-objects-and-arrays/09-object-literal-enhancement.html b/chapter-02/04-objects-and-arrays/09-object-literal-enhancement.html new file mode 100644 index 00000000..4ab2a3c3 --- /dev/null +++ b/chapter-02/04-objects-and-arrays/09-object-literal-enhancement.html @@ -0,0 +1,38 @@ + + + + + + Literal Enhancements + + + +

Literal Enhancements

Open the console

+ + + diff --git a/chapter-02/04-objects-and-arrays/10-spread-operator.html b/chapter-02/04-objects-and-arrays/10-spread-operator.html new file mode 100644 index 00000000..95869107 --- /dev/null +++ b/chapter-02/04-objects-and-arrays/10-spread-operator.html @@ -0,0 +1,24 @@ + + + + + + Spread Operator + + + +

Spread Operator

Open the console

+ + + diff --git a/chapter-02/04-objects-and-arrays/11-spread-operator.html b/chapter-02/04-objects-and-arrays/11-spread-operator.html new file mode 100644 index 00000000..fc9bab05 --- /dev/null +++ b/chapter-02/04-objects-and-arrays/11-spread-operator.html @@ -0,0 +1,24 @@ + + + + + + Spread Operator + + + +

Spread Operator

Open the console

+ + + diff --git a/chapter-02/04-objects-and-arrays/12-spread-operator.html b/chapter-02/04-objects-and-arrays/12-spread-operator.html new file mode 100644 index 00000000..cce7f90b --- /dev/null +++ b/chapter-02/04-objects-and-arrays/12-spread-operator.html @@ -0,0 +1,24 @@ + + + + + + Spread Operator + + + +

Spread Operator

Open the console

+ + + diff --git a/chapter-02/04-objects-and-arrays/13-spread-operator.html b/chapter-02/04-objects-and-arrays/13-spread-operator.html new file mode 100644 index 00000000..4cf451b5 --- /dev/null +++ b/chapter-02/04-objects-and-arrays/13-spread-operator.html @@ -0,0 +1,24 @@ + + + + + + Spread Operator + + + +

Spread Operator

Open the console

+ + + diff --git a/chapter-02/04-objects-and-arrays/14-spread-operator.html b/chapter-02/04-objects-and-arrays/14-spread-operator.html new file mode 100644 index 00000000..52d7594a --- /dev/null +++ b/chapter-02/04-objects-and-arrays/14-spread-operator.html @@ -0,0 +1,31 @@ + + + + + + Spread Operator + + + +

Spread Operator

Open the console

+ + + diff --git a/chapter-02/04-objects-and-arrays/15-spread-operator.html b/chapter-02/04-objects-and-arrays/15-spread-operator.html new file mode 100644 index 00000000..acfac0f8 --- /dev/null +++ b/chapter-02/04-objects-and-arrays/15-spread-operator.html @@ -0,0 +1,32 @@ + + + + + + Spread Operator + + + +

Spread Operator

Open the console

+ + + diff --git a/chapter-02/05-promises/01-promises.html b/chapter-02/05-promises/01-promises.html new file mode 100644 index 00000000..e6d987e8 --- /dev/null +++ b/chapter-02/05-promises/01-promises.html @@ -0,0 +1,34 @@ + + + + + + Promises + + + +

Promises

Open the console

+ + + diff --git a/chapter-02/05-promises/02-promises.html b/chapter-02/05-promises/02-promises.html new file mode 100644 index 00000000..1fb6e852 --- /dev/null +++ b/chapter-02/05-promises/02-promises.html @@ -0,0 +1,21 @@ + + + + + + Promises with fetch + + + +

Promises with fetch

Open the console

+ + + diff --git a/chapter-02/06-es6-class-syntax/01-classes.html b/chapter-02/06-es6-class-syntax/01-classes.html new file mode 100644 index 00000000..b522f66a --- /dev/null +++ b/chapter-02/06-es6-class-syntax/01-classes.html @@ -0,0 +1,31 @@ + + + + + + Classes + + + +

Classes

Open the console

+ + + diff --git a/chapter-02/06-es6-class-syntax/02-classes.html b/chapter-02/06-es6-class-syntax/02-classes.html new file mode 100644 index 00000000..7c7f1eaf --- /dev/null +++ b/chapter-02/06-es6-class-syntax/02-classes.html @@ -0,0 +1,35 @@ + + + + + + Classes + + + +

Classes

Open the console

+ + + diff --git a/chapter-02/06-es6-class-syntax/03-classes.html b/chapter-02/06-es6-class-syntax/03-classes.html new file mode 100644 index 00000000..437ae908 --- /dev/null +++ b/chapter-02/06-es6-class-syntax/03-classes.html @@ -0,0 +1,50 @@ + + + + + + Classes + + + +

Classes

Open the console

+ + + diff --git a/chapter-02/babel-inline-transpiler.html b/chapter-02/babel-inline-transpiler.html index 3864343f..8c5a60d8 100644 --- a/chapter-02/babel-inline-transpiler.html +++ b/chapter-02/babel-inline-transpiler.html @@ -4,7 +4,7 @@ Transpiling Inline with Babel - +

Babel Inline Transpiler

diff --git a/chapter-02/readme.md b/chapter-02/readme.md index 6f1fbd30..7d7c6cef 100644 --- a/chapter-02/readme.md +++ b/chapter-02/readme.md @@ -5,57 +5,89 @@ If you haven't made the switch to the latest JavaScript syntax yet, now is a goo Samples -------- -#### Declaring Variables in ES6 -* const ([1](http://jsbin.com/gapoxa/1/edit?js,console),[2](http://jsbin.com/gapoxa/2/edit?js,console)) -* let ([3](http://jsbin.com/gapoxa/3/edit?js,console),[4](http://jsbin.com/gapoxa/4/edit?js,console)) -* template strings ([5](http://jsbin.com/gapoxa/5/edit?js,output), -[6](http://jsbin.com/gapoxa/6/edit?js,output), -[7](http://jsbin.com/gapoxa/7/edit?js,console), -[8](http://jsbin.com/gapoxa/8/edit?js,console), -[9](http://jsbin.com/gapoxa/9/edit?js,console), -[10](http://jsbin.com/gapoxa/10/edit?js,output)) - -#### ES6 Functions -* default parameters ([1](http://jsbin.com/yeqexu/1/edit?js,console), -[2](http://jsbin.com/yeqexu/2/edit?js,console)) -* arrow functions ([1](http://jsbin.com/tegefa/1/edit?js,console), -[2](http://jsbin.com/tegefa/2/edit?js,console), -[3](http://jsbin.com/tegefa/3/edit?js,console), -[4](http://jsbin.com/tegefa/4/edit?js,console), -[5](http://jsbin.com/tegefa/5/edit?js,console), -[6](http://jsbin.com/tegefa/6/edit?js,console), -[7](http://jsbin.com/tegefa/7/edit?js,console), -[8](http://jsbin.com/tegefa/8/edit?js,console), -[9](http://jsbin.com/tegefa/9/edit?js,console), -[10](http://jsbin.com/tegefa/10/edit?js,console), -[11](http://jsbin.com/tegefa/11/edit?js,console)) - -#### Transpiling ES6 -* transpiling in jsbin ([1](http://jsbin.com/puraror/1/edit?js,console), -[2](http://jsbin.com/puraror/2/edit?js,console)) -* transpiling locally ([demo](http://rawgit.com/MoonHighway/learning-react/master/chapter-02/babel-inline-transpiler.html), -[code](https://github.com/MoonHighway/learning-react/blob/master/chapter-02/babel-inline-transpiler.html)) - -#### Objects and Arrays -* destructuring assignment ([1](http://jsbin.com/jukokaf/1/edit?js,console), -[2](http://jsbin.com/jukokaf/2/edit?js,console), -[3](http://jsbin.com/jukokaf/3/edit?js,console), -[4](http://jsbin.com/jukokaf/4/edit?js,console), -[5](http://jsbin.com/jukokaf/5/edit?js,console)) -* object literal enhancement ([6](http://jsbin.com/jukokaf/6/edit?js,console), -[7](http://jsbin.com/jukokaf/7/edit?js,console), -[8](http://jsbin.com/jukokaf/8/edit?js,console), -[9](http://jsbin.com/jukokaf/9/edit?js,console)) -* the spread operator ([10](http://jsbin.com/jukokaf/10/edit?js,console), -[11](http://jsbin.com/jukokaf/11/edit?js,console), -[12](http://jsbin.com/jukokaf/12/edit?js,console), -[13](http://jsbin.com/jukokaf/13/edit?js,console), -[14](http://jsbin.com/jukokaf/14/edit?js,console), -[15](http://jsbin.com/jukokaf/15/edit?js,console)) -* getFakeMembers ([1](http://jsbin.com/pupojik/1/edit?js,console)) -* fetch members ([1](http://jsbin.com/haguhe/1/edit?js,console)) - -#### ES6 Class Syntax -* classes ([1](http://jsbin.com/hoqileh/1/edit?js,console), -[2](http://jsbin.com/hoqileh/2/edit?js,console)) -* inheritance ([3](http://jsbin.com/hoqileh/3/edit?js,console)) +### Declaring Variables in ES6 + +#### const + + 1. Without const ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/01-declaring-variables/01-const.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/01-declaring-variables/01-const.html), [bin](http://jsbin.com/gapoxa/1/edit?js,output)) + 2. With const ❌ + ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/01-declaring-variables/02-const.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/01-declaring-variables/02-const.html), [bin](http://jsbin.com/gapoxa/2/edit?js,output)) + +#### let + + 3. Without let ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/01-declaring-variables/03-let.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/01-declaring-variables/03-let.html), [bin](http://jsbin.com/gapoxa/3/edit?js,output)) + 4. With let ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/01-declaring-variables/04-let.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/01-declaring-variables/04-let.html), [bin](http://jsbin.com/gapoxa/4/edit?js,output)) + 5. Loops with var ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/01-declaring-variables/05-let.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/01-declaring-variables/05-let.html), [bin](http://jsbin.com/gapoxa/5/edit?js,output)) + 6. Loops with let ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/01-declaring-variables/06-let.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/01-declaring-variables/06-let.html), [bin](http://jsbin.com/gapoxa/6/edit?js,output)) + +#### template strings + 7. Without Template Strings - Simple Concatenation ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/01-declaring-variables/07-template-strings.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/01-declaring-variables/07-template-strings.html), [bin](http://jsbin.com/gapoxa/7/edit?js,output)) + 8. With Template Strings - Simple concatenation ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/01-declaring-variables/08-template-strings.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/01-declaring-variables/08-template-strings.html), [bin](http://jsbin.com/gapoxa/8/edit?js,output)) + 9. Template Strings - Email ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/01-declaring-variables/09-template-strings.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/01-declaring-variables/09-template-strings.html), [bin](http://jsbin.com/gapoxa/9/edit?js,output)) + 10. Template Strings - HTML ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/01-declaring-variables/10-template-strings.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/01-declaring-variables/10-template-strings.html), [bin](http://jsbin.com/gapoxa/10/edit?js,output)) + +### Default Parameters + + 1. Default Parameters ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/02-es6-functions/01-default-parameters.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/02-es6-functions/01-default-parameters.html), [bin](http://jsbin.com/yeqexu/1/edit?js,console)) + 2. Default Parameters with Objects ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/02-es6-functions/02-default-parameters.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/02-es6-functions/02-default-parameters.html), [bin](http://jsbin.com/yeqexu/2/edit?js,console)) + +### Arrow functions + + 1. Regular Function + ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/03-arrow-functions/01-arrows.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/03-arrow-functions/01-arrows.html), [bin](http://jsbin.com/tegefa/1/edit?js,console)) + 2. Arrow Function ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/03-arrow-functions/02-arrows.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/03-arrow-functions/02-arrows.html), [bin](http://jsbin.com/tegefa/2/edit?js,console)) + 3. Arrow Function - Multiple Args ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/03-arrow-functions/03-arrows.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/03-arrow-functions/03-arrows.html), [bin](http://jsbin.com/tegefa/3/edit?js,console)) + 4. Multiple Args - One Line ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/03-arrow-functions/04-arrows.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/03-arrow-functions/04-arrows.html), [bin](http://jsbin.com/tegefa/4/edit?js,console)) + 5. Arrow Functions with if statements ❌ ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/03-arrow-functions/05-arrows.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/03-arrow-functions/05-arrows.html), [bin](http://jsbin.com/tegefa/5/edit?js,console)) + 6. Arrow Functions with errors ❌ ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/03-arrow-functions/06-arrows.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/03-arrow-functions/06-arrows.html), [bin](http://jsbin.com/tegefa/6/edit?js,console)) + 7. setTimeout ❌ ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/03-arrow-functions/07-arrows.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/03-arrow-functions/07-arrows.html), [bin](http://jsbin.com/tegefa/7/edit?js,console)) + 8. setTimeout with .bind ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/03-arrow-functions/08-arrows.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/03-arrow-functions/08-arrows.html), [bin](http://jsbin.com/tegefa/8/edit?js,console)) + 9. setTimeout with Arrow Function ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/03-arrow-functions/09-arrows.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/03-arrow-functions/09-arrows.html), [bin](http://jsbin.com/tegefa/9/edit?js,console)) + 10. setTimeout with 'this' problem ❌ ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/03-arrow-functions/10-arrows.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/03-arrow-functions/10-arrows.html), [bin](http://jsbin.com/tegefa/10/edit?js,console)) + 11. Showing 'this' problem ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/03-arrow-functions/11-arrows.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/03-arrow-functions/11-arrows.html), [bin](http://jsbin.com/tegefa/11/edit?js,console)) + +### Transpiling ES6 + +#### Transpiling in JSBin + + 1. JavaScript Tab ([bin](http://jsbin.com/puraror/1/edit?js,console)) + 2. ES6/Babel Tab ([bin](http://jsbin.com/puraror/2/edit?js,console)) + 3. Transpiling Locally ([demo](http://rawgit.com/MoonHighway/learning-react/master/chapter-02/babel-inline-transpiler.html), + [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-02/babel-inline-transpiler.html)) + +### Objects and Arrays + +#### Destructuring Assignment + + 1. Destructuring Assignment ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/04-objects-and-arrays/01-destructuring.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/04-objects-and-arrays/01-destructuring.html), [bin](http://jsbin.com/jukokaf/1/edit?js,console)) + 2. Destructuring with Arguments ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/04-objects-and-arrays/02-destructuring.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/04-objects-and-arrays/02-destructuring.html), [bin](http://jsbin.com/jukokaf/2/edit?js,console)) + 3. Destructured Object Arguments ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/04-objects-and-arrays/03-destructuring.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/04-objects-and-arrays/03-destructuring.html), [bin](http://jsbin.com/jukokaf/3/edit?js,console)) + 4. Destructuring Arrays ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/04-objects-and-arrays/04-destructuring.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/04-objects-and-arrays/04-destructuring.html), [bin](http://jsbin.com/jukokaf/4/edit?js,console)) + 5. Destructuring with Comma Placeholders ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/04-objects-and-arrays/05-destructuring.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/04-objects-and-arrays/05-destructuring.html), [bin](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 ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/04-objects-and-arrays/10-spread-operator.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/04-objects-and-arrays/10-spread-operator.html), [bin](http://jsbin.com/jukokaf/10/edit?js,console)) + 11. Array Destructuring with .reverse() ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/04-objects-and-arrays/11-spread-operator.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/04-objects-and-arrays/11-spread-operator.html), [bin](http://jsbin.com/jukokaf/11/edit?js,console)) + 12. Spread Operator with Destructuring and .reverse() ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/04-objects-and-arrays/12-spread-operator.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/04-objects-and-arrays/12-spread-operator.html), [bin](http://jsbin.com/jukokaf/12/edit?js,console)) + 13. Destructuring and the Spread Operator ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/04-objects-and-arrays/13-spread-operator.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/04-objects-and-arrays/13-spread-operator.html), [bin](http://jsbin.com/jukokaf/13/edit?js,console)) + 14. Directions Functions ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/04-objects-and-arrays/14-spread-operator.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/04-objects-and-arrays/14-spread-operator.html), [bin](http://jsbin.com/jukokaf/14/edit?js,console)) + 15. Spread Operator with Objects ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/04-objects-and-arrays/15-spread-operator.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/04-objects-and-arrays/15-spread-operator.html), [bin](http://jsbin.com/jukokaf/15/edit?js,console)) + +### Promises + + 1. getFakeMembers ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/05-promises/01-promises.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/05-promises/01-promises.html), [bin](http://jsbin.com/pupojik/1/edit?js,console)) + 2. fetch members ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/05-promises/02-promises.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/05-promises/02-promises.html), [bin](http://jsbin.com/haguhe/1/edit?js,console)) + +### ES6 Class Syntax + + 1. The Constructor and the Prototype ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/06-es6-class-syntax/01-classes.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/06-es6-class-syntax/01-classes.html), [bin](http://jsbin.com/hoqileh/1/edit?js,console)) + 2. Classes ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/06-es6-class-syntax/02-classes.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/06-es6-class-syntax/02-classes.html), [bin](http://jsbin.com/hoqileh/2/edit?js,console)) + 3. Class Inheritance ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/06-es6-class-syntax/03-classes.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/06-es6-class-syntax/03-classes.html), [bin](http://jsbin.com/hoqileh/3/edit?js,console)) diff --git a/chapter-03/01-functional-javascript/01-functional.html b/chapter-03/01-functional-javascript/01-functional.html new file mode 100644 index 00000000..656a7241 --- /dev/null +++ b/chapter-03/01-functional-javascript/01-functional.html @@ -0,0 +1,22 @@ + + + + + + What It Means to Be Functional + + + +

Functional JavaScript

Open the console

+ + + diff --git a/chapter-03/01-functional-javascript/02-functional.html b/chapter-03/01-functional-javascript/02-functional.html new file mode 100644 index 00000000..45665bd2 --- /dev/null +++ b/chapter-03/01-functional-javascript/02-functional.html @@ -0,0 +1,20 @@ + + + + + + What It Means to Be Functional + + + +

Functional JavaScript

Open the console

+ + + diff --git a/chapter-03/01-functional-javascript/03-functional.html b/chapter-03/01-functional-javascript/03-functional.html new file mode 100644 index 00000000..6caf6c53 --- /dev/null +++ b/chapter-03/01-functional-javascript/03-functional.html @@ -0,0 +1,25 @@ + + + + + + What It Means to Be Functional + + + +

Functional JavaScript

Open the console

+ + + diff --git a/chapter-03/01-functional-javascript/04-functional.html b/chapter-03/01-functional-javascript/04-functional.html new file mode 100644 index 00000000..efb438b7 --- /dev/null +++ b/chapter-03/01-functional-javascript/04-functional.html @@ -0,0 +1,26 @@ + + + + + + What It Means to Be Functional + + + +

Functional JavaScript

Open the console

+ + + diff --git a/chapter-03/01-functional-javascript/05-functional.html b/chapter-03/01-functional-javascript/05-functional.html new file mode 100644 index 00000000..ee7516c3 --- /dev/null +++ b/chapter-03/01-functional-javascript/05-functional.html @@ -0,0 +1,22 @@ + + + + + + What It Means to Be Functional + + + +

Functional JavaScript

Open the console

+ + + diff --git a/chapter-03/01-functional-javascript/06-functional.html b/chapter-03/01-functional-javascript/06-functional.html new file mode 100644 index 00000000..2d34e2d3 --- /dev/null +++ b/chapter-03/01-functional-javascript/06-functional.html @@ -0,0 +1,28 @@ + + + + + + What It Means to Be Functional + + + +

Functional JavaScript

Open the console

+ + + diff --git a/chapter-03/01-functional-javascript/07-functional.html b/chapter-03/01-functional-javascript/07-functional.html new file mode 100644 index 00000000..c5dbe176 --- /dev/null +++ b/chapter-03/01-functional-javascript/07-functional.html @@ -0,0 +1,23 @@ + + + + + + What It Means to Be Functional + + + +

Functional JavaScript

Open the console

+ + + diff --git a/chapter-03/02-imperative-vs-declarative/01-imperative-declarative.html b/chapter-03/02-imperative-vs-declarative/01-imperative-declarative.html new file mode 100644 index 00000000..227a436d --- /dev/null +++ b/chapter-03/02-imperative-vs-declarative/01-imperative-declarative.html @@ -0,0 +1,31 @@ + + + + + + Imperative vs. Declarative + + + +

Imperative vs. Declarative

Open the console

+ + + diff --git a/chapter-03/02-imperative-vs-declarative/02-imperative-declarative.html b/chapter-03/02-imperative-vs-declarative/02-imperative-declarative.html new file mode 100644 index 00000000..3179b590 --- /dev/null +++ b/chapter-03/02-imperative-vs-declarative/02-imperative-declarative.html @@ -0,0 +1,21 @@ + + + + + + Imperative vs. Declarative + + + +

Imperative vs. Declarative

Open the console

+ + + diff --git a/chapter-03/populate-united-states.html b/chapter-03/03-populate-the-us/populate-united-states.html similarity index 100% rename from chapter-03/populate-united-states.html rename to chapter-03/03-populate-the-us/populate-united-states.html diff --git a/chapter-03/populate-united-states.js b/chapter-03/03-populate-the-us/populate-united-states.js similarity index 100% rename from chapter-03/populate-united-states.js rename to chapter-03/03-populate-the-us/populate-united-states.js diff --git a/chapter-03/04-immutability/01-immutability.html b/chapter-03/04-immutability/01-immutability.html new file mode 100644 index 00000000..7f0af097 --- /dev/null +++ b/chapter-03/04-immutability/01-immutability.html @@ -0,0 +1,34 @@ + + + + + + Immutability + + + +

Immutability

Open the console

+ + + diff --git a/chapter-03/04-immutability/02-immutability.html b/chapter-03/04-immutability/02-immutability.html new file mode 100644 index 00000000..32fd3e74 --- /dev/null +++ b/chapter-03/04-immutability/02-immutability.html @@ -0,0 +1,34 @@ + + + + + + Immutability + + + +

Immutability

Open the console

+ + + diff --git a/chapter-03/04-immutability/03-immutability.html b/chapter-03/04-immutability/03-immutability.html new file mode 100644 index 00000000..ac17c46e --- /dev/null +++ b/chapter-03/04-immutability/03-immutability.html @@ -0,0 +1,35 @@ + + + + + + Immutability + + + +

Immutability

Open the console

+ + + diff --git a/chapter-03/04-immutability/04-immutability.html b/chapter-03/04-immutability/04-immutability.html new file mode 100644 index 00000000..ef592595 --- /dev/null +++ b/chapter-03/04-immutability/04-immutability.html @@ -0,0 +1,34 @@ + + + + + + Immutability + + + +

Immutability

Open the console

+ + + diff --git a/chapter-03/04-immutability/05-immutability.html b/chapter-03/04-immutability/05-immutability.html new file mode 100644 index 00000000..6eafdd85 --- /dev/null +++ b/chapter-03/04-immutability/05-immutability.html @@ -0,0 +1,31 @@ + + + + + + Immutability + + + +

Immutability

Open the console

+ + + diff --git a/chapter-03/04-immutability/06-immutability.html b/chapter-03/04-immutability/06-immutability.html new file mode 100644 index 00000000..11207301 --- /dev/null +++ b/chapter-03/04-immutability/06-immutability.html @@ -0,0 +1,31 @@ + + + + + + Immutability + + + +

Immutability

Open the console

+ + + diff --git a/chapter-03/05-pure-functions/01-pure-functions.html b/chapter-03/05-pure-functions/01-pure-functions.html new file mode 100644 index 00000000..b8d4dbdf --- /dev/null +++ b/chapter-03/05-pure-functions/01-pure-functions.html @@ -0,0 +1,36 @@ + + + + + + Pure Functions + + + +

Pure Functions

Open the console

+ + + diff --git a/chapter-03/05-pure-functions/02-pure-functions.html b/chapter-03/05-pure-functions/02-pure-functions.html new file mode 100644 index 00000000..15d67d9f --- /dev/null +++ b/chapter-03/05-pure-functions/02-pure-functions.html @@ -0,0 +1,35 @@ + + + + + + Pure Functions + + + +

Pure Functions

Open the console

+ + + diff --git a/chapter-03/05-pure-functions/03-pure-functions.html b/chapter-03/05-pure-functions/03-pure-functions.html new file mode 100644 index 00000000..5c8454c8 --- /dev/null +++ b/chapter-03/05-pure-functions/03-pure-functions.html @@ -0,0 +1,37 @@ + + + + + + Pure Functions + + + +

Pure Functions

Open the console

+ + + diff --git a/chapter-03/05-pure-functions/04-pure-functions.html b/chapter-03/05-pure-functions/04-pure-functions.html new file mode 100644 index 00000000..c20a665e --- /dev/null +++ b/chapter-03/05-pure-functions/04-pure-functions.html @@ -0,0 +1,23 @@ + + + + + + Pure Functions + + + +

Pure Functions

+ + + diff --git a/chapter-03/05-pure-functions/05-pure-functions.html b/chapter-03/05-pure-functions/05-pure-functions.html new file mode 100644 index 00000000..f43cfb1d --- /dev/null +++ b/chapter-03/05-pure-functions/05-pure-functions.html @@ -0,0 +1,25 @@ + + + + + + Pure Functions + + + + + +

Pure Functions

+ + + diff --git a/chapter-03/06-transforming-data/01-data.html b/chapter-03/06-transforming-data/01-data.html new file mode 100644 index 00000000..a5d1a3b3 --- /dev/null +++ b/chapter-03/06-transforming-data/01-data.html @@ -0,0 +1,25 @@ + + + + + + Transforming Data + + + +

Transforming Data

Open the Console

+ + + diff --git a/chapter-03/06-transforming-data/02-data.html b/chapter-03/06-transforming-data/02-data.html new file mode 100644 index 00000000..6833a911 --- /dev/null +++ b/chapter-03/06-transforming-data/02-data.html @@ -0,0 +1,26 @@ + + + + + + Transforming Data + + + +

Transforming Data

Open the Console

+ + + diff --git a/chapter-03/06-transforming-data/03-data.html b/chapter-03/06-transforming-data/03-data.html new file mode 100644 index 00000000..4de5e6a6 --- /dev/null +++ b/chapter-03/06-transforming-data/03-data.html @@ -0,0 +1,28 @@ + + + + + + Transforming Data + + + +

Transforming Data

Open the Console

+ + + diff --git a/chapter-03/06-transforming-data/04-data.html b/chapter-03/06-transforming-data/04-data.html new file mode 100644 index 00000000..7bc0f40c --- /dev/null +++ b/chapter-03/06-transforming-data/04-data.html @@ -0,0 +1,27 @@ + + + + + + Transforming Data + + + +

Transforming Data

Open the Console

+ + + diff --git a/chapter-03/06-transforming-data/05-data.html b/chapter-03/06-transforming-data/05-data.html new file mode 100644 index 00000000..a4807d58 --- /dev/null +++ b/chapter-03/06-transforming-data/05-data.html @@ -0,0 +1,26 @@ + + + + + + Transforming Data + + + +

Transforming Data

Open the Console

+ + + diff --git a/chapter-03/06-transforming-data/06-data.html b/chapter-03/06-transforming-data/06-data.html new file mode 100644 index 00000000..b17dcd27 --- /dev/null +++ b/chapter-03/06-transforming-data/06-data.html @@ -0,0 +1,40 @@ + + + + + + Transforming Data + + + +

Transforming Data

Open the Console

+ + + diff --git a/chapter-03/06-transforming-data/07-data.html b/chapter-03/06-transforming-data/07-data.html new file mode 100644 index 00000000..e90b3c19 --- /dev/null +++ b/chapter-03/06-transforming-data/07-data.html @@ -0,0 +1,36 @@ + + + + + + Transforming Data + + + +

Transforming Data

Open the Console

+ + + diff --git a/chapter-03/06-transforming-data/08-data.html b/chapter-03/06-transforming-data/08-data.html new file mode 100644 index 00000000..7d75c2fe --- /dev/null +++ b/chapter-03/06-transforming-data/08-data.html @@ -0,0 +1,31 @@ + + + + + + Transforming Data + + + +

Transforming Data

Open the Console

+ + + diff --git a/chapter-03/06-transforming-data/09-data.html b/chapter-03/06-transforming-data/09-data.html new file mode 100644 index 00000000..7edff597 --- /dev/null +++ b/chapter-03/06-transforming-data/09-data.html @@ -0,0 +1,29 @@ + + + + + + Transforming Data + + + +

Transforming Data

Open the Console

+ + + diff --git a/chapter-03/06-transforming-data/10-data.html b/chapter-03/06-transforming-data/10-data.html new file mode 100644 index 00000000..8f0cd0be --- /dev/null +++ b/chapter-03/06-transforming-data/10-data.html @@ -0,0 +1,27 @@ + + + + + + Transforming Data + + + +

Transforming Data

Open the Console

+ + + diff --git a/chapter-03/06-transforming-data/11-data.html b/chapter-03/06-transforming-data/11-data.html new file mode 100644 index 00000000..ac3e44d9 --- /dev/null +++ b/chapter-03/06-transforming-data/11-data.html @@ -0,0 +1,49 @@ + + + + + + Transforming Data + + + +

Transforming Data

Open the Console

+ + + diff --git a/chapter-03/06-transforming-data/12-data.html b/chapter-03/06-transforming-data/12-data.html new file mode 100644 index 00000000..f0ca89e9 --- /dev/null +++ b/chapter-03/06-transforming-data/12-data.html @@ -0,0 +1,28 @@ + + + + + + Transforming Data + + + +

Transforming Data

Open the Console

+ + + diff --git a/chapter-03/07-higher-order-functions/01-higher-order-fns.html b/chapter-03/07-higher-order-functions/01-higher-order-fns.html new file mode 100644 index 00000000..d34bd054 --- /dev/null +++ b/chapter-03/07-higher-order-functions/01-higher-order-fns.html @@ -0,0 +1,28 @@ + + + + + + Higher Order Functions + + + +

Higher Order Functions

Open the Console

+ + + diff --git a/chapter-03/07-higher-order-functions/02-higher-order-fns.html b/chapter-03/07-higher-order-functions/02-higher-order-fns.html new file mode 100644 index 00000000..e80eb3b2 --- /dev/null +++ b/chapter-03/07-higher-order-functions/02-higher-order-fns.html @@ -0,0 +1,40 @@ + + + + + + Higher Order Functions + + + +

Higher Order Functions

Open the Console

+ + + diff --git a/chapter-03/08-recursion/01-recursion.html b/chapter-03/08-recursion/01-recursion.html new file mode 100644 index 00000000..3b20b3e3 --- /dev/null +++ b/chapter-03/08-recursion/01-recursion.html @@ -0,0 +1,23 @@ + + + + + + Recursion + + + +

Recursion

Open the Console

+ + + diff --git a/chapter-03/08-recursion/02-recursion.html b/chapter-03/08-recursion/02-recursion.html new file mode 100644 index 00000000..539d5d9e --- /dev/null +++ b/chapter-03/08-recursion/02-recursion.html @@ -0,0 +1,26 @@ + + + + + + Recursion + + + +

Recursion

Open the Console

+ + + diff --git a/chapter-03/08-recursion/03-recursion.html b/chapter-03/08-recursion/03-recursion.html new file mode 100644 index 00000000..a8d64439 --- /dev/null +++ b/chapter-03/08-recursion/03-recursion.html @@ -0,0 +1,40 @@ + + + + + + Recursion + + + +

Recursion

Open the Console

+ + + diff --git a/chapter-03/09-composition/01-composition.html b/chapter-03/09-composition/01-composition.html new file mode 100644 index 00000000..bcafbd33 --- /dev/null +++ b/chapter-03/09-composition/01-composition.html @@ -0,0 +1,24 @@ + + + + + + Composition + + + +

Composition

Open the Console

+ + + diff --git a/chapter-03/09-composition/02-composition.html b/chapter-03/09-composition/02-composition.html new file mode 100644 index 00000000..d2d363ae --- /dev/null +++ b/chapter-03/09-composition/02-composition.html @@ -0,0 +1,53 @@ + + + + + + Composition + + + +

Composition

Open the Console

+ + + diff --git a/chapter-03/09-composition/03-composition.html b/chapter-03/09-composition/03-composition.html new file mode 100644 index 00000000..90bad192 --- /dev/null +++ b/chapter-03/09-composition/03-composition.html @@ -0,0 +1,58 @@ + + + + + + Composition + + + +

Composition

Open the Console

+ + + diff --git a/chapter-03/imperative-clock.html b/chapter-03/09-composition/04-imperative-clock.html similarity index 83% rename from chapter-03/imperative-clock.html rename to chapter-03/09-composition/04-imperative-clock.html index 48ab7789..b2e8a6fd 100644 --- a/chapter-03/imperative-clock.html +++ b/chapter-03/09-composition/04-imperative-clock.html @@ -8,6 +8,6 @@

Imperative Clock

Open the console to check the time.

- + - \ No newline at end of file + diff --git a/chapter-03/imperative-clock.js b/chapter-03/09-composition/04-imperative-clock.js similarity index 98% rename from chapter-03/imperative-clock.js rename to chapter-03/09-composition/04-imperative-clock.js index 3ec1bc2d..3ea52914 100644 --- a/chapter-03/imperative-clock.js +++ b/chapter-03/09-composition/04-imperative-clock.js @@ -15,7 +15,6 @@ function getClockTime() { // Get the Current Time var date = new Date(); - var time = ""; // Serialize clock time var time = { @@ -54,4 +53,4 @@ function getClockTime() { + time.seconds + " " + time.ampm; -} \ No newline at end of file +} diff --git a/chapter-03/declarative-clock.html b/chapter-03/09-composition/05-declarative-clock.html similarity index 64% rename from chapter-03/declarative-clock.html rename to chapter-03/09-composition/05-declarative-clock.html index 0cb727ca..a7d40726 100644 --- a/chapter-03/declarative-clock.html +++ b/chapter-03/09-composition/05-declarative-clock.html @@ -4,11 +4,11 @@ Declarative Clock - +

Declarative Clock

Open the console to check the time.

- + - \ No newline at end of file + diff --git a/chapter-03/declarative-clock.js b/chapter-03/09-composition/05-declarative-clock.js similarity index 100% rename from chapter-03/declarative-clock.js rename to chapter-03/09-composition/05-declarative-clock.js diff --git a/chapter-03/readme.md b/chapter-03/readme.md index 3b3201bc..0c134f15 100644 --- a/chapter-03/readme.md +++ b/chapter-03/readme.md @@ -1,67 +1,84 @@ Chapter 3 : Functional Programming with JavaScript ================== -React, Flux, and Redux all fit within the functional JavaScript paradigm. Understanding the basic concepts of +React, Flux, and Redux all fit within the functional JavaScript paradigm. Understanding the basic concepts of functional programming will make you better at structuring React applications. Samples -------- -#### Introduction -* what it means to be functional ([1](http://jsbin.com/pimixu/1/edit?js,console), -[2](http://jsbin.com/pimixu/2/edit?js,console), -[3](http://jsbin.com/pimixu/3/edit?js,console), -[4](http://jsbin.com/pimixu/4/edit?js,console), -[5](http://jsbin.com/pimixu/5/edit?js,console), -[6](http://jsbin.com/pimixu/6/edit?js,console), -[7](http://jsbin.com/pimixu/7/edit?js,console)) -* imperative vs. declarative ([1](http://jsbin.com/cuqapu/1/edit?js,console), -[2](http://jsbin.com/cuqapu/2/edit?js,console)) -* Populate The United States ([demo](http://rawgit.com/MoonHighway/learning-react/master/chapter-03/populate-united-states.html), -[code](https://github.com/MoonHighway/learning-react/blob/master/chapter-03/populate-united-states.js)) - -#### Immutability -* rating colors ([1](http://jsbin.com/kemimi/1/edit?js,console), -[2](http://jsbin.com/kemimi/2/edit?js,console), -[3](http://jsbin.com/kemimi/3/edit?js,console)) -* adding colors ([4](http://jsbin.com/kemimi/4/edit?js,console), -[5](http://jsbin.com/kemimi/5/edit?js,console), -[6](http://jsbin.com/kemimi/6/edit?js,console)) - -#### Pure Functions -* self educate ([1](http://jsbin.com/kosogo/1/edit?js,console), -[2](http://jsbin.com/kosogo/2/edit?js,console), -[3](http://jsbin.com/kosogo/3/edit?js,console)) -* DOM ([4](http://jsbin.com/kosogo/4/edit?js,output), -[5](http://jsbin.com/kosogo/5/edit?js,output)) - -#### Transforming Data -* filtering arrays ([1](http://jsbin.com/qehige/1/edit?js,console), -[2](http://jsbin.com/qehige/2/edit?js,console), -[3](http://jsbin.com/qehige/3/edit?js,console)) -* mapping arrays ([4](http://jsbin.com/qehige/4/edit?js,console), -[5](http://jsbin.com/qehige/5/edit?js,console), -[6](http://jsbin.com/qehige/6/edit?js,console), -[7](http://jsbin.com/qehige/7/edit?js,console)) -* object to array ([8](http://jsbin.com/qehige/8/edit?js,console)) -* array to number ([9](http://jsbin.com/qehige/9/edit?js,console), -[10](http://jsbin.com/qehige/10/edit?js,console)) -* array to object ([11](http://jsbin.com/qehige/11/edit?js,console), -[12](http://jsbin.com/qehige/12/edit?js,console)) - -#### Higher Order Functions -* invokeIf ([1](http://jsbin.com/tolewi/1/edit?js,console)) -* userLogs ([2](http://jsbin.com/tolewi/2/edit?js,console)) - -#### Recursion -* counting down ([1](http://jsbin.com/romezi/1/edit?js,console), -[2](http://jsbin.com/romezi/2/edit?js,console)) -* deep pick ([3](http://jsbin.com/romezi/3/edit?js,console)) - -#### Composition -* compose ([1](http://jsbin.com/zivevu/1/edit?js,console), -[2](http://jsbin.com/zivevu/2/edit?js,console), -[3](http://jsbin.com/zivevu/3/edit?js,console)) -* imperative clock ([demo](http://rawgit.com/MoonHighway/learning-react/master/chapter-03/imperative-clock.html), -[code](https://github.com/MoonHighway/learning-react/blob/master/chapter-03/imperative-clock.js)) -* declarative clock ([demo](http://rawgit.com/MoonHighway/learning-react/master/chapter-03/declarative-clock.html), -[code](https://github.com/MoonHighway/learning-react/blob/master/chapter-03/declarative-clock.js)) \ No newline at end of file +### Introduction + +#### What it means to be Functional + + 1. Functions as Variables ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/01-functional-javascript/01-functional.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/01-functional-javascript/01-functional.html), [bin](http://jsbin.com/pixmu/1/edit?js,output)) + 2. Arrow Functions ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/01-functional-javascript/02-functional.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/01-functional-javascript/02-functional.html), [bin](http://jsbin.com/pixmu/2/edit?js,output)) + 3. Object Methods ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/01-functional-javascript/03-functional.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/01-functional-javascript/03-functional.html), [bin](http://jsbin.com/pixmu/3/edit?js,output)) + 4. Functions within Arrays ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/01-functional-javascript/04-functional.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/01-functional-javascript/04-functional.html), [bin](http://jsbin.com/pixmu/4/edit?js,output)) + 5. Functions as Arguments ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/01-functional-javascript/05-functional.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/01-functional-javascript/05-functional.html), [bin](http://jsbin.com/pixmu/5/edit?js,output)) + 6. Returned Functions ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/01-functional-javascript/06-functional.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/01-functional-javascript/06-functional.html), [bin](http://jsbin.com/pixmu/6/edit?js,output)) + 7. ES6 Enhancements ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/01-functional-javascript/07-functional.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/01-functional-javascript/07-functional.html), [bin](http://jsbin.com/pixmu/7/edit?js,output)) + +#### Imperative vs. Declarative + + 1. Imperative ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/02-imperative-vs-declarative/01-imperative-declarative.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/02-imperative-vs-declarative/01-imperative-declarative.html), [bin](http://jsbin.com/cuqapu/1/edit?js,output)) + 2. Declarative ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/02-imperative-vs-declarative/02-imperative-declarative.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/02-imperative-vs-declarative/02-imperative-declarative.html), [bin](http://jsbin.com/cuqapu/2/edit?js,output)) + + +#### Populate the US + + 1. Populate the US ([demo](http://rawgit.com/MoonHighway/learning-react/master/chapter-03/03-populate-the-us/populate-united-states.html), + [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-03/03-populate-the-us/populate-united-states.js), [bin](http://jsbin.com/gesimonadi/1/edit?html,js,output)) + + +### Immutability + + 1. Mutations ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/04-immutability/01-immutability.html), + [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-03/04-immutability/01-immutability.html), [bin](http://jsbin.com/kemimi/1/edit?js,output)) + 2. Object.assign() ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/04-immutability/02-immutability.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/04-immutability/02-immutability.html), [bin](http://jsbin.com/kemimi/2/edit?js,output)) + 3. Spread Operator with Objects ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/04-immutability/03-immutability.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/04-immutability/03-immutability.html), [bin](http://jsbin.com/kemimi/3/edit?js,output)) + 4. Array.push() ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/04-immutability/04-immutability.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/04-immutability/04-immutability.html), [bin](http://jsbin.com/kemimi/4/edit?js,output)) + 5. Array.concat() ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/04-immutability/05-immutability.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/04-immutability/05-immutability.html), [bin](http://jsbin.com/kemimi/5/edit?js,output)) + 6. Spread Operator with Arrays ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/04-immutability/06-immutability.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/04-immutability/06-immutability.html), [bin](http://jsbin.com/kemimi/6/edit?js,output)) + +### Pure Functions + + 1. Impure Function ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/05-pure-functions/01-pure-functions.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/05-pure-functions/01-pure-functions.html), [bin](http://jsbin.com/kosogo/1/edit?js,output)) + 2. Object Mutation ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/05-pure-functions/02-pure-functions.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/05-pure-functions/02-pure-functions.html), [bin](http://jsbin.com/kosogo/2/edit?js,output)) + 3. Pure Function ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/05-pure-functions/03-pure-functions.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/05-pure-functions/03-pure-functions.html), [bin](http://jsbin.com/kosogo/3/edit?js,output)) + 4. Side Effects ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/05-pure-functions/04-pure-functions.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/05-pure-functions/04-pure-functions.html), [bin](http://jsbin.com/kosogo/4/edit?js,output)) + 5. React Component ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/05-pure-functions/05-pure-functions.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/05-pure-functions/05-pure-functions.html), [bin](http://jsbin.com/kosogo/5/edit?js,output)) + +### Transforming Data + + 1. Joining Array Items ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/06-transforming-data/01-data.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/06-transforming-data/01-data.html), [bin](http://jsbin.com/qehige/1/edit?js,output)) + 2. Filtering Arrays ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/06-transforming-data/02-data.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/06-transforming-data/02-data.html), [bin](http://jsbin.com/qehige/2/edit?js,output)) + 3. Filtering Array Function ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/06-transforming-data/03-data.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/06-transforming-data/03-data.html), [bin](http://jsbin.com/qehige/3/edit?js,output)) + 4. Mapping Arrays ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/06-transforming-data/04-data.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/06-transforming-data/04-data.html), [bin](http://jsbin.com/qehige/4/edit?js,output)) + 5. Creating Objects with .map() ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/06-transforming-data/05-data.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/06-transforming-data/05-data.html), [bin](http://jsbin.com/qehige/5/edit?js,output)) + 6. Updating Array of Objects ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/06-transforming-data/06-data.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/06-transforming-data/06-data.html), [bin](http://jsbin.com/qehige/6/edit?js,output)) + 7. Editing Arrays of Objects ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/06-transforming-data/07-data.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/06-transforming-data/07-data.html), [bin](http://jsbin.com/qehige/7/edit?js,output)) + 8. Object.keys() ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/06-transforming-data/08-data.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/06-transforming-data/08-data.html), [bin](http://jsbin.com/qehige/8/edit?js,output)) + 9. Reducing Arrays ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/06-transforming-data/09-data.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/06-transforming-data/09-data.html), [bin](http://jsbin.com/qehige/9/edit?js,output)) + 10. Array.reduce() Shorter Syntax ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/06-transforming-data/10-data.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/06-transforming-data/10-data.html), [bin](http://jsbin.com/qehige/10/edit?js,output)) + 11. Colors Hash ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/06-transforming-data/11-data.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/06-transforming-data/11-data.html), [bin](http://jsbin.com/qehige/11/edit?js,output)) + 12. distinctColors() ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/06-transforming-data/12-data.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/06-transforming-data/12-data.html), [bin](http://jsbin.com/qehige/12/edit?js,output)) + + +### Higher Order Functions + + 1. invokeIf ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/07-higher-order-functions/01-higher-order-fns.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/07-higher-order-functions/01-higher-order-fns.html), [bin](http://jsbin.com/raxuyew/1/edit?js,output)) + 2. userLogs ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/07-higher-order-functions/02-higher-order-fns.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/07-higher-order-functions/02-higher-order-fns.html), [bin](http://jsbin.com/raxuyew/2/edit?js,output)) + +### Recursion + + 1. Countdown ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/08-recursion/01-recursion.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/08-recursion/01-recursion.html), [bin](http://jsbin.com/romezi/1/edit?js,output)) + 2. Countdown with setTimeout ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/08-recursion/02-recursion.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/08-recursion/02-recursion.html), [bin](http://jsbin.com/romezi/2/edit?js,output)) + 3. deepPick() ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/08-recursion/03-recursion.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/08-recursion/03-recursion.html), [bin](http://jsbin.com/romezi/3/edit?js,output)) + +### Composition + + 1. Clock Template with .replace() ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/09-composition/01-composition.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/09-composition/01-composition.html), [bin](http://jsbin.com/zivevu/1/edit?js,output)) + 2. Clock with Composition ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/09-composition/02-composition.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/09-composition/02-composition.html), [bin](http://jsbin.com/zivevu/2/edit?js,output)) + 3. Click with Compose Function ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/09-composition/03-composition.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/09-composition/03-composition.html), [bin](http://jsbin.com/zivevu/3/edit?js,output)) + 4. Imperative Clock ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/09-composition/04-imperative-clock.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/09-composition/04-imperative-clock.js)) + 5. Declarative Clock ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/09-composition/05-declarative-clock.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/09-composition/05-declarative-clock.js)) diff --git a/chapter-04/page-setup.html b/chapter-04/01-page-setup/01-page-setup.html similarity index 56% rename from chapter-04/page-setup.html rename to chapter-04/01-page-setup/01-page-setup.html index 91e90648..5284e851 100644 --- a/chapter-04/page-setup.html +++ b/chapter-04/01-page-setup/01-page-setup.html @@ -7,11 +7,11 @@ -

- - + + + + + + + + diff --git a/chapter-04/02-react-elements/02-elements.html b/chapter-04/02-react-elements/02-elements.html new file mode 100644 index 00000000..4eab3e7f --- /dev/null +++ b/chapter-04/02-react-elements/02-elements.html @@ -0,0 +1,34 @@ + + + + + React Elements + + + + +

+ + + + + + + + + diff --git a/chapter-04/02-react-elements/03-elements.html b/chapter-04/02-react-elements/03-elements.html new file mode 100644 index 00000000..43940d18 --- /dev/null +++ b/chapter-04/02-react-elements/03-elements.html @@ -0,0 +1,46 @@ + + + + + React Elements + + + + +

+ + + + + + + + + diff --git a/chapter-04/02-react-elements/04-elements.html b/chapter-04/02-react-elements/04-elements.html new file mode 100644 index 00000000..cc45ba10 --- /dev/null +++ b/chapter-04/02-react-elements/04-elements.html @@ -0,0 +1,45 @@ + + + + + React Elements + + + + +

+ + + + + + + + + diff --git a/chapter-04/02-react-elements/05-elements.html b/chapter-04/02-react-elements/05-elements.html new file mode 100644 index 00000000..f6ad9d8a --- /dev/null +++ b/chapter-04/02-react-elements/05-elements.html @@ -0,0 +1,45 @@ + + + + + React Elements + + + + +

+ + + + + + + + + diff --git a/chapter-04/03-react-components/01-components.html b/chapter-04/03-react-components/01-components.html new file mode 100644 index 00000000..28f3d8ef --- /dev/null +++ b/chapter-04/03-react-components/01-components.html @@ -0,0 +1,41 @@ + + + + + React Components + + + + +

+ + + + + + + + + diff --git a/chapter-04/03-react-components/02-components.html b/chapter-04/03-react-components/02-components.html new file mode 100644 index 00000000..d8c9a798 --- /dev/null +++ b/chapter-04/03-react-components/02-components.html @@ -0,0 +1,45 @@ + + + + + React Components + + + + +

+ + + + + + + + + diff --git a/chapter-04/03-react-components/03-components.html b/chapter-04/03-react-components/03-components.html new file mode 100644 index 00000000..62c21455 --- /dev/null +++ b/chapter-04/03-react-components/03-components.html @@ -0,0 +1,49 @@ + + + + + React Components + + + + +

+ + + + + + + + + diff --git a/chapter-04/03-react-components/04-components.html b/chapter-04/03-react-components/04-components.html new file mode 100644 index 00000000..a4985f29 --- /dev/null +++ b/chapter-04/03-react-components/04-components.html @@ -0,0 +1,42 @@ + + + + + React Components + + + + +

+ + + + + + + + + diff --git a/chapter-04/DOM-rendering-moods.css b/chapter-04/04-dom-rendering-moods/DOM-rendering-moods.css similarity index 100% rename from chapter-04/DOM-rendering-moods.css rename to chapter-04/04-dom-rendering-moods/DOM-rendering-moods.css diff --git a/chapter-04/DOM-rendering-moods.html b/chapter-04/04-dom-rendering-moods/DOM-rendering-moods.html similarity index 100% rename from chapter-04/DOM-rendering-moods.html rename to chapter-04/04-dom-rendering-moods/DOM-rendering-moods.html diff --git a/chapter-04/DOM-rendering-moods.js b/chapter-04/04-dom-rendering-moods/DOM-rendering-moods.js similarity index 100% rename from chapter-04/DOM-rendering-moods.js rename to chapter-04/04-dom-rendering-moods/DOM-rendering-moods.js diff --git a/chapter-04/05-factories/01-factories.html b/chapter-04/05-factories/01-factories.html new file mode 100644 index 00000000..820877a8 --- /dev/null +++ b/chapter-04/05-factories/01-factories.html @@ -0,0 +1,26 @@ + + + + + Factories + + + + +

+ + + + + + + + + + diff --git a/chapter-04/05-factories/02-factories.html b/chapter-04/05-factories/02-factories.html new file mode 100644 index 00000000..2adeb7fa --- /dev/null +++ b/chapter-04/05-factories/02-factories.html @@ -0,0 +1,33 @@ + + + + + Factories + + + + +

+ + + + + + + + + + diff --git a/chapter-04/05-factories/03-factories.html b/chapter-04/05-factories/03-factories.html new file mode 100644 index 00000000..5952f762 --- /dev/null +++ b/chapter-04/05-factories/03-factories.html @@ -0,0 +1,43 @@ + + + + + Factories + + + + +

+ + + + + + + + + + diff --git a/chapter-04/05-factories/04-factories.html b/chapter-04/05-factories/04-factories.html new file mode 100644 index 00000000..c022b40c --- /dev/null +++ b/chapter-04/05-factories/04-factories.html @@ -0,0 +1,46 @@ + + + + + Factories + + + + +

+ + + + + + + + + diff --git a/chapter-04/readme.md b/chapter-04/readme.md index b5f637fc..6cb9c2a4 100644 --- a/chapter-04/readme.md +++ b/chapter-04/readme.md @@ -6,36 +6,35 @@ it comes time to debug. Samples -------- -#### Page Setup +### Page Setup -* HTML Document Setup ([code](https://github.com/MoonHighway/learning-react/blob/master/chapter-04/page-setup.html)) + 1. HTML Document Setup ([code](https://github.com/MoonHighway/learning-react/blob/master/chapter-04/01-page-setup/01-page-setup.html)) + 2. HTML for a Recipe ([demo](http://rawgit.com/MoonHighway/learning-react/master/chapter-04/01-page-setup/02-baked-salmon.html), +[code](https://github.com/MoonHighway/learning-react/blob/master/chapter-04/01-page-setup/02-baked-salmon.html)) -#### React Elements +### React Elements -* HTML for a Recipe ([demo](http://rawgit.com/MoonHighway/learning-react/master/chapter-04/baked-salmon.html), -[code](https://github.com/MoonHighway/learning-react/blob/master/chapter-04/baked-salmon.html)) -* React Elements ([1](http://jsbin.com/fumiyu/1/edit?js,output), -[2](http://jsbin.com/fumiyu/2/edit?js,output), -[3](http://jsbin.com/fumiyu/3/edit?js,output)) -* Constructing Elements with Data ([4](http://jsbin.com/fumiyu/4/edit?js,output), -[5](http://jsbin.com/fumiyu/5/edit?js,output)) + 1. Rendering an Element ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-04/02-react-elements/01-elements.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-04/02-react-elements/01-elements.html), [bin](http://jsbin.com/polufak/1/edit?js,output)) + 2. Rendering an Element with Properties ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-04/02-react-elements/02-elements.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-04/02-react-elements/02-elements.html), [bin](http://jsbin.com/polufak/2/edit?js,output)) + 3. Rendering Lists ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-04/02-react-elements/03-elements.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-04/02-react-elements/03-elements.html), [bin](http://jsbin.com/polufak/3/edit?js,output)) + 4. Mapping over Elements ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-04/02-react-elements/04-elements.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-04/02-react-elements/04-elements.html), [bin](http://jsbin.com/polufak/4/edit?js,output)) + 5. Adding Keys ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-04/02-react-elements/05-elements.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-04/02-react-elements/05-elements.html), [bin](http://jsbin.com/polufak/5/edit?js,output)) -#### React Components +### React Components -* React.createClass ([1](http://jsbin.com/cezotew/1/edit?js,output), -[2](http://jsbin.com/cezotew/2/edit?js,output), -[3](http://jsbin.com/cezotew/3/edit?js,output)) -* React.Component ([4](http://jsbin.com/cezotew/4/edit?js,output)) -* Stateless Functional Component ([5](http://jsbin.com/cezotew/5/edit?js,output)) + 1. Rendering createElement ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-04/03-react-components/01-components.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-04/03-react-components/01-components.html), [bin](http://jsbin.com/hutobus/1/edit?js,output)) + 2. Rendering List Items ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-04/03-react-components/02-components.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-04/03-react-components/02-components.html), [bin](http://jsbin.com/hutobus/2/edit?js,output)) + 3. Adding Class Methods ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-04/03-react-components/03-components.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-04/03-react-components/03-components.html), [bin](http://jsbin.com/hutobus/3/edit?js,output)) + 4. Stateless Functional Components ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-04/03-react-components/04-components.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-04/03-react-components/04-components.html), [bin](http://jsbin.com/hutobus/4/edit?js,output)) -#### DOM Rendering +### DOM Rendering -* team moods ([demo (firefox only)](http://rawgit.com/MoonHighway/learning-react/master/chapter-04/DOM-rendering-moods.html), -[code](https://github.com/MoonHighway/learning-react/blob/master/chapter-04/DOM-rendering-moods.js)) + 1. team moods ([demo (firefox only)](http://rawgit.com/MoonHighway/learning-react/master/chapter-04/04-dom-rendering-moods/DOM-rendering-moods.html), +[code](https://github.com/MoonHighway/learning-react/blob/master/chapter-04/04-dom-rendering-moods/DOM-rendering-moods.js)) -#### Factories +### Factories -* DOM Factories ([1](http://jsbin.com/mebahe/1/edit?js,output), -[2](http://jsbin.com/mebahe/2/edit?js,output), -[3](http://jsbin.com/mebahe/3/edit?js,output)) -* Component Factories ([4](http://jsbin.com/mebahe/4/edit?js,output)) + 1. DOM Factories - h1 ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-04/05-factories/01-factories.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-04/05-factories/01-factories.html), [bin](http://jsbin.com/sobubox/1/edit?js,output)) + 2. DOM Factories - ul ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-04/05-factories/02-factories.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-04/05-factories/02-factories.html), [bin](http://jsbin.com/sobubox/2/edit?js,output)) + 3. DOM Factories - props ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-04/05-factories/03-factories.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-04/05-factories/03-factories.html), [bin](http://jsbin.com/sobubox/3/edit?js,output)) + 4. Component Factories ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-04/05-factories/04-factories.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-04/05-factories/04-factories.html), [bin](http://jsbin.com/sobubox/4/edit?js,output)) diff --git a/chapter-05/page-setup.html b/chapter-05/page-setup.html index 75f9a747..d45c9b74 100644 --- a/chapter-05/page-setup.html +++ b/chapter-05/page-setup.html @@ -5,11 +5,11 @@ React with JSX Samples -

- - - + + + - - + + + React Recipes diff --git a/chapter-06/01-property-validation-and-default-props/01-incorrect-props-no-error.html b/chapter-06/01-property-validation-and-default-props/01-incorrect-props-no-error.html new file mode 100644 index 00000000..d2e696e8 --- /dev/null +++ b/chapter-06/01-property-validation-and-default-props/01-incorrect-props-no-error.html @@ -0,0 +1,47 @@ + + + + + 01 - Incorrect Properties don't always show errors + + +

+ + + + + + + + + + diff --git a/chapter-06/01-property-validation-and-default-props/02-introducing-prop-types-npm.html b/chapter-06/01-property-validation-and-default-props/02-introducing-prop-types-npm.html new file mode 100644 index 00000000..7d27fea4 --- /dev/null +++ b/chapter-06/01-property-validation-and-default-props/02-introducing-prop-types-npm.html @@ -0,0 +1,53 @@ + + + + + 02 - createClass PropTypes with validation errors + + +

+ + + + + + + + + + diff --git a/chapter-06/01-property-validation-and-default-props/03-prop-types-success.html b/chapter-06/01-property-validation-and-default-props/03-prop-types-success.html new file mode 100644 index 00000000..8ffdee48 --- /dev/null +++ b/chapter-06/01-property-validation-and-default-props/03-prop-types-success.html @@ -0,0 +1,67 @@ + + + + + 03 - createClass with PropTypes success + + +

+ + + + + + + + + + diff --git a/chapter-06/01-property-validation-and-default-props/04-cryptic-problems-when-prop-missing.html b/chapter-06/01-property-validation-and-default-props/04-cryptic-problems-when-prop-missing.html new file mode 100644 index 00000000..f51d89e7 --- /dev/null +++ b/chapter-06/01-property-validation-and-default-props/04-cryptic-problems-when-prop-missing.html @@ -0,0 +1,51 @@ + + + + + 04 - cryptic problems when props are missing + + +

+ + + + + + + + + + diff --git a/chapter-06/01-property-validation-and-default-props/05-better-errors-with-is-required.html b/chapter-06/01-property-validation-and-default-props/05-better-errors-with-is-required.html new file mode 100644 index 00000000..3cc34821 --- /dev/null +++ b/chapter-06/01-property-validation-and-default-props/05-better-errors-with-is-required.html @@ -0,0 +1,51 @@ + + + + + 05 - Better Errors with .isRequired + + +

+ + + + + + + + + + diff --git a/chapter-06/01-property-validation-and-default-props/06-successful-validation.html b/chapter-06/01-property-validation-and-default-props/06-successful-validation.html new file mode 100644 index 00000000..e01fbfee --- /dev/null +++ b/chapter-06/01-property-validation-and-default-props/06-successful-validation.html @@ -0,0 +1,53 @@ + + + + + 06-successful-validation + + +

+ + + + + + + + + + diff --git a/chapter-06/01-property-validation-and-default-props/07-default-properties.html b/chapter-06/01-property-validation-and-default-props/07-default-properties.html new file mode 100644 index 00000000..342c65c3 --- /dev/null +++ b/chapter-06/01-property-validation-and-default-props/07-default-properties.html @@ -0,0 +1,57 @@ + + + + + 07 - default props + + +

+ + + + + + + + + + diff --git a/chapter-06/01-property-validation-and-default-props/08-custom-validation.html b/chapter-06/01-property-validation-and-default-props/08-custom-validation.html new file mode 100644 index 00000000..6caf981b --- /dev/null +++ b/chapter-06/01-property-validation-and-default-props/08-custom-validation.html @@ -0,0 +1,62 @@ + + + + + 08 - custom validation + + +

+ + + + + + + + + + diff --git a/chapter-06/01-property-validation-and-default-props/09-stateless-prop-validation.html b/chapter-06/01-property-validation-and-default-props/09-stateless-prop-validation.html new file mode 100644 index 00000000..633926c6 --- /dev/null +++ b/chapter-06/01-property-validation-and-default-props/09-stateless-prop-validation.html @@ -0,0 +1,54 @@ + + + + + 09 - stateless prop validation + + +

+ + + + + + + + + + diff --git a/chapter-06/01-property-validation-and-default-props/10-stateless-default-props.html b/chapter-06/01-property-validation-and-default-props/10-stateless-default-props.html new file mode 100644 index 00000000..e2a795ba --- /dev/null +++ b/chapter-06/01-property-validation-and-default-props/10-stateless-default-props.html @@ -0,0 +1,48 @@ + + + + + 10 stateless default props + + +

+ + + + + + + + + + diff --git a/chapter-06/02-refs/01-color-component-before-refs.html b/chapter-06/02-refs/01-color-component-before-refs.html new file mode 100644 index 00000000..f9d567b9 --- /dev/null +++ b/chapter-06/02-refs/01-color-component-before-refs.html @@ -0,0 +1,40 @@ + + + + + 01 - Color Component + + +

+ + + + + + + + + diff --git a/chapter-06/02-refs/02-color-component-with-refs.html b/chapter-06/02-refs/02-color-component-with-refs.html new file mode 100644 index 00000000..cbb64313 --- /dev/null +++ b/chapter-06/02-refs/02-color-component-with-refs.html @@ -0,0 +1,58 @@ + + + + + 02 - Color Component with refs + + +

+ + + + + + + + + diff --git a/chapter-06/02-refs/03-Color-Component-binding.html b/chapter-06/02-refs/03-Color-Component-binding.html new file mode 100644 index 00000000..4a19ba56 --- /dev/null +++ b/chapter-06/02-refs/03-Color-Component-binding.html @@ -0,0 +1,57 @@ + + + + + 03 - Two way data binding + + +

+ + + + + + + + + diff --git a/chapter-06/02-refs/04-two-way-data-todo.html b/chapter-06/02-refs/04-two-way-data-todo.html new file mode 100644 index 00000000..e8999a8e --- /dev/null +++ b/chapter-06/02-refs/04-two-way-data-todo.html @@ -0,0 +1,59 @@ + + + + + 02 - Color Component with refs + + +

+ + + + + + + + + diff --git a/chapter-06/02-refs/05-without-default-function.html b/chapter-06/02-refs/05-without-default-function.html new file mode 100644 index 00000000..474f8a28 --- /dev/null +++ b/chapter-06/02-refs/05-without-default-function.html @@ -0,0 +1,58 @@ + + + + + 05 - without default props error! + + +

+ + + + + + + + + diff --git a/chapter-06/02-refs/06-check-for-property.html b/chapter-06/02-refs/06-check-for-property.html new file mode 100644 index 00000000..def01e6c --- /dev/null +++ b/chapter-06/02-refs/06-check-for-property.html @@ -0,0 +1,65 @@ + + + + + 06 - checking for property + + +

+ + + + + + + + + diff --git a/chapter-06/02-refs/07-default-property.html b/chapter-06/02-refs/07-default-property.html new file mode 100644 index 00000000..ec5dc3fc --- /dev/null +++ b/chapter-06/02-refs/07-default-property.html @@ -0,0 +1,71 @@ + + + + + 07 - with default props + + +

+ + + + + + + + + + diff --git a/chapter-06/02-refs/08-stateless-default-prop.html b/chapter-06/02-refs/08-stateless-default-prop.html new file mode 100644 index 00000000..e6e34c66 --- /dev/null +++ b/chapter-06/02-refs/08-stateless-default-prop.html @@ -0,0 +1,62 @@ + + + + + 08 - stateless default property + + +

+ + + + + + + + + + diff --git a/chapter-06/02-refs/09-stateless-default-arg.html b/chapter-06/02-refs/09-stateless-default-arg.html new file mode 100644 index 00000000..ac773f8d --- /dev/null +++ b/chapter-06/02-refs/09-stateless-default-arg.html @@ -0,0 +1,57 @@ + + + + + 09 - stateless default argument + + +

+ + + + + + + + + + diff --git a/chapter-06/03-component-state/01-the-star-component.html b/chapter-06/03-component-state/01-the-star-component.html new file mode 100644 index 00000000..31569174 --- /dev/null +++ b/chapter-06/03-component-state/01-the-star-component.html @@ -0,0 +1,38 @@ + + + + + 01 - The Star Component + + +

+ + + + + + + + + + diff --git a/chapter-06/03-component-state/02-the-star-rating-component.html b/chapter-06/03-component-state/02-the-star-rating-component.html new file mode 100644 index 00000000..89ce832e --- /dev/null +++ b/chapter-06/03-component-state/02-the-star-rating-component.html @@ -0,0 +1,78 @@ + + + + + 02 - the star rating component + + +

+ + + + + + + + + + diff --git a/chapter-06/03-component-state/03-setting-state-from-props.html b/chapter-06/03-component-state/03-setting-state-from-props.html new file mode 100644 index 00000000..637f8427 --- /dev/null +++ b/chapter-06/03-component-state/03-setting-state-from-props.html @@ -0,0 +1,78 @@ + + + + + 03 - setting state from props + + +

+ + + + + + + + + + diff --git a/chapter-06/03-component-state/styles.css b/chapter-06/03-component-state/styles.css new file mode 100644 index 00000000..6c00857f --- /dev/null +++ b/chapter-06/03-component-state/styles.css @@ -0,0 +1,41 @@ +html, body, #react-container { + height: 100%; + margin: 0; + padding: 0; +} + +#react-container { + display: flex; + align-items: center; + justify-content: center; +} + +.star-rating { + display: flex; + flex-wrap: wrap; + justify-content: space-around; +} + +.star { + cursor: pointer; + width: 2em; + height: 2em; + background-color: grey; + -webkit-clip-path: + polygon(50% 0%, 63% 38%, 100% 38%, + 69% 59%, 82% 100%, 50% 75%, + 18% 100%, 31% 59%, 0% 38%, 37% 38%); + clip-path: polygon(50% 0%, 63% 38%, + 100% 38%, 69% 59%, 82% 100%, + 50% 75%, 18% 100%, 31% 59%, + 0% 38%, 37% 38%); +} + +.star.selected { + background-color: red; +} + +p { + flex-basis: 100%; + text-align: center; +} diff --git a/chapter-06/color-organizer/package.json b/chapter-06/color-organizer/package.json index 5aa57582..9cd497d9 100644 --- a/chapter-06/color-organizer/package.json +++ b/chapter-06/color-organizer/package.json @@ -6,7 +6,7 @@ "scripts": { "build": "webpack --progress", "prestart": "npm run build", - "start": "opener http://localhost:3000 & ./node_modules/.bin/httpster -p 3000 -d ./dist" + "start": "opener http://localhost:3000 & httpster -p 3000 -d ./dist" }, "keywords": [ "React", diff --git a/chapter-06/readme.md b/chapter-06/readme.md index 39359e93..03897724 100644 --- a/chapter-06/readme.md +++ b/chapter-06/readme.md @@ -1,4 +1,4 @@ -Chapter 6 : Props state and the component tree +Chapter 6 : Props, State, and the Component Tree ================== Data handling within component trees is one of the key advantages of working with React. There are techniques that you can use when working with data in React components that will make your life much easier in the long run. @@ -6,42 +6,53 @@ can use when working with data in React components that will make your life much Samples -------- -#### Property Validation and default Props - -* Validation with React.createClass ([1](http://jsbin.com/nusiyu/1/edit?js,output), -[2](http://jsbin.com/nusiyu/2/edit?js,console,output), -[3](http://jsbin.com/nusiyu/3/edit?js,output), -[4](http://jsbin.com/nusiyu/4/edit?js,console,output), -[5](http://jsbin.com/nusiyu/5/edit?js,console,output), -[6](http://jsbin.com/nusiyu/6/edit?js,output)) -* default properties with React.createClass ([1](http://jsbin.com/curalu/1/edit?js,output)) -* customValidation ([1](http://jsbin.com/fefaqe/1/edit?js,console,output)) -* Properties with ES6 classes ([1](http://jsbin.com/zenohu/1/edit?js,output)) -* Properties with Stateless Functional Components ([2](http://jsbin.com/zenohu/2/edit?js,output), -[3](http://jsbin.com/zenohu/3/edit?js,output)) -* ES7 static properties ([4](http://jsbin.com/zenohu/4/edit?js,output)) - -#### Refs - -* Color Component with Refs ([1](http://jsbin.com/kohigem/1/edit?js,output), -[2](http://jsbin.com/kohigem/2/edit?js,output)) -* Two-way Data Binding ([3](http://jsbin.com/kohigem/3/edit?js,console,output), -[4](http://jsbin.com/kohigem/4/edit?js,console,output)) -* Default Function Properties ([5](http://jsbin.com/kohigem/5/edit?js,console,output), -[6](http://jsbin.com/kohigem/6/edit?js,console,output), -[7](http://jsbin.com/kohigem/7/edit?js,console,output)) -* Refs In Stateless Functional Components ([8](http://jsbin.com/kohigem/8/edit?js,console,output), -[9](http://jsbin.com/kohigem/9/edit?js,console,output)) - -#### Component State - -* The Star Component ([1](http://jsbin.com/puduho/1/edit?js,output)) -* Using State with createClass ([1](http://jsbin.com/zebilo/1/edit?js,output)) -* Using State in ES6 Components ([2](http://jsbin.com/zebilo/2/edit?js,output)) -* Setting State from Properties ([3](http://jsbin.com/zebilo/3/edit?js,output), -[4](http://jsbin.com/zebilo/4/edit?js,output)) - -#### State within the Component Tree - -* The color organizer ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-06/color-organizer/dist/index.html), +### Property Validation and default Props + +#### Validation with `prop-types` + + 1. Incorrect properties do not always show errors ( + [demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-06/01-property-validation-and-default-props/01-incorrect-props-no-error.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-06/01-property-validation-and-default-props/01-incorrect-props-no-error.html), [bin](http://jsbin.com/pozozi/1/edit?js,output)) + 2. Introducing `prop-types` npm ❌ ( + [demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-06/01-property-validation-and-default-props/02-introducing-prop-types-npm.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-06/01-property-validation-and-default-props/02-introducing-prop-types-npm.html), [bin](http://jsbin.com/pozozi/2/edit?js,console,output)) + 3. PropTypes success ( + [demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-06/01-property-validation-and-default-props/03-prop-types-success.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-06/01-property-validation-and-default-props/03-prop-types-success.html), [bin](http://jsbin.com/pozozi/3/edit?js,output)) + 4. cryptic problems when prop missing ❌ ( + [demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-06/01-property-validation-and-default-props/04-cryptic-problems-when-prop-missing.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-06/01-property-validation-and-default-props/04-cryptic-problems-when-prop-missing.html), [bin](http://jsbin.com/pozozi/4/edit?js,console,output)) + 5. better errors with .isRequired ❌ ( + [demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-06/01-property-validation-and-default-props/05-better-errors-with-is-required.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-06/01-property-validation-and-default-props/05-better-errors-with-is-required.html), [bin](http://jsbin.com/pozozi/5/edit?js,console,output)) + 6. catching validation errors ❌ ( + [demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-06/01-property-validation-and-default-props/06-successful-validation.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-06/01-property-validation-and-default-props/06-successful-validation.html), [bin](http://jsbin.com/pozozi/6/edit?js,output)) + 7. default properties ( + [demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-06/01-property-validation-and-default-props/07-default-properties.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-06/01-property-validation-and-default-props/07-default-properties.html), [bin](http://jsbin.com/pozozi/7/edit?js,output)) + 8. custom validation ❌ ( + [demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-06/01-property-validation-and-default-props/08-custom-validation.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-06/01-property-validation-and-default-props/08-custom-validation.html), [bin](http://jsbin.com/pozozi/8/edit?js,console,output)) + 9. stateless prop validation ❌ ( + [demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-06/01-property-validation-and-default-props/09-stateless-prop-validation.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-06/01-property-validation-and-default-props/09-stateless-prop-validation.html), [bin](http://jsbin.com/pozozi/9/edit?js,output)) + 10. stateless default props ( + [demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-06/01-property-validation-and-default-props/10-stateless-default-props.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-06/01-property-validation-and-default-props/10-stateless-default-props.html), [bin](https://github.com/MoonHighway/learning-react/blob/master/chapter-06/01-property-validation-and-default-props/http://jsbin.com/pozozi/10/edit?js,output)) + +### Refs + + 1. Color component ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-06/02-refs/01-color-component-before-refs.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-06/02-refs/01-color-component-before-refs.html), [bin](http://jsbin.com/funeyol/1/edit?js,output)) + 2. Color component with refs ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-06/02-refs/02-color-component-with-refs.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-06/02-refs/02-color-component-with-refs.html), [bin](http://jsbin.com/funeyol/2/edit?js,output)) + 3. Two way data binding ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-06/02-refs/03-Color-Component-binding.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-06/02-refs/03-Color-Component-binding.html), [bin](http://jsbin.com/funeyol/3/edit?js,console,output)) + 4. Two way data todo note ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-06/02-refs/04-two-way-data-todo.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-06/02-refs/04-two-way-data-todo.html), [bin](http://jsbin.com/funeyol/4/edit?js,console,output)) + 5. without a default function prop ❌ ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-06/02-refs/05-without-default-function.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-06/02-refs/05-without-default-function.html), [bin](http://jsbin.com/funeyol/5/edit?js,console,output)) + 6. checking for the function property ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-06/02-refs/06-check-for-property.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-06/02-refs/06-check-for-property.html), [bin](http://jsbin.com/funeyol/6/edit?js,console,output)) + 7. using a default function property ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-06/02-refs/07-default-property.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-06/02-refs/07-default-property.html), [bin](http://jsbin.com/funeyol/7/edit?js,console,output)) + 8. stateless default function property ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-06/02-refs/08-stateless-default-prop.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-06/02-refs/08-stateless-default-prop.html), [bin](http://jsbin.com/funeyol/8/edit?js,console,output)) + 9. stateless default argument function property ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-06/02-refs/09-stateless-default-arg.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-06/02-refs/09-stateless-default-arg.html), [bin](http://jsbin.com/funeyol/9/edit?js,console,output)) + +### Component State + + 1. The Star Component ( + [demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-06/03-component-state/01-the-star-component.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-06/03-component-state/01-the-star-component.html), [bin](http://jsbin.com/budanem/1/edit?js,output)) + 2. The Star Rating Component Class ( + [demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-06/03-component-state/02-the-star-rating-component.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-06/03-component-state/02-the-star-rating-component.html), [bin](http://jsbin.com/budanem/2/edit?js,output)) + 3. Setting State From Props ( + [demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-06/03-component-state/03-setting-state-from-props.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-06/03-component-state/03-setting-state-from-props.html), [bin](http://jsbin.com/budanem/3/edit?js,output)) + +### State within the Component Tree + +1. Color Organizer App ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-06/color-organizer/dist/index.html), [source](https://github.com/MoonHighway/learning-react/blob/master/chapter-06/color-organizer)) diff --git a/chapter-07/01-mounting-lifecycle/01-mounting.html b/chapter-07/01-mounting-lifecycle/01-mounting.html new file mode 100644 index 00000000..9accb5ef --- /dev/null +++ b/chapter-07/01-mounting-lifecycle/01-mounting.html @@ -0,0 +1,34 @@ + + + + + + + + + Mounting Lifecycle + + +

+ + + diff --git a/chapter-07/01-mounting-lifecycle/02-mounting.html b/chapter-07/01-mounting-lifecycle/02-mounting.html new file mode 100644 index 00000000..fb366bd2 --- /dev/null +++ b/chapter-07/01-mounting-lifecycle/02-mounting.html @@ -0,0 +1,90 @@ + + + + + + + + + Mounting Lifecycle + + +

+ + + diff --git a/chapter-07/02-updating-lifecycle/01-updating.html b/chapter-07/02-updating-lifecycle/01-updating.html new file mode 100644 index 00000000..546253e6 --- /dev/null +++ b/chapter-07/02-updating-lifecycle/01-updating.html @@ -0,0 +1,99 @@ + + + + + + + + + Updating Lifecycle + + +

+ + + diff --git a/chapter-07/02-updating-lifecycle/02-updating.html b/chapter-07/02-updating-lifecycle/02-updating.html new file mode 100644 index 00000000..385095cf --- /dev/null +++ b/chapter-07/02-updating-lifecycle/02-updating.html @@ -0,0 +1,103 @@ + + + + + + + + + Updating Lifecycle + + +

+ + + diff --git a/chapter-07/03-children/01-children.html b/chapter-07/03-children/01-children.html new file mode 100644 index 00000000..83e526c2 --- /dev/null +++ b/chapter-07/03-children/01-children.html @@ -0,0 +1,34 @@ + + + + + + + + + Children + + +

+ + + diff --git a/chapter-07/03-children/02-children.html b/chapter-07/03-children/02-children.html new file mode 100644 index 00000000..5ab68bf0 --- /dev/null +++ b/chapter-07/03-children/02-children.html @@ -0,0 +1,49 @@ + + + + + + + + + Children + + +

+ + + diff --git a/chapter-07/03-children/03-children.html b/chapter-07/03-children/03-children.html new file mode 100644 index 00000000..391c987c --- /dev/null +++ b/chapter-07/03-children/03-children.html @@ -0,0 +1,49 @@ + + + + + + + + + Children + + +

+ + + diff --git a/chapter-07/04-library-integration/01-libraries.html b/chapter-07/04-library-integration/01-libraries.html new file mode 100644 index 00000000..938fd143 --- /dev/null +++ b/chapter-07/04-library-integration/01-libraries.html @@ -0,0 +1,35 @@ + + + + + + + + + + Libraries + + +

+ + + diff --git a/chapter-07/04-library-integration/02-libraries.html b/chapter-07/04-library-integration/02-libraries.html new file mode 100644 index 00000000..56830c2c --- /dev/null +++ b/chapter-07/04-library-integration/02-libraries.html @@ -0,0 +1,57 @@ + + + + + + + + + Libraries + + +

+ + + diff --git a/chapter-07/04-library-integration/03-libraries.html b/chapter-07/04-library-integration/03-libraries.html new file mode 100644 index 00000000..f5cf0c68 --- /dev/null +++ b/chapter-07/04-library-integration/03-libraries.html @@ -0,0 +1,226 @@ + + + + + + + + + + Libraries + + +

+ + + diff --git a/chapter-07/04-library-integration/04-libraries.html b/chapter-07/04-library-integration/04-libraries.html new file mode 100644 index 00000000..7061d189 --- /dev/null +++ b/chapter-07/04-library-integration/04-libraries.html @@ -0,0 +1,105 @@ + + + + + + + + + + Libraries + + +

+ + + diff --git a/chapter-07/05-higher-order-components/01-hocs.html b/chapter-07/05-higher-order-components/01-hocs.html new file mode 100644 index 00000000..15c94b36 --- /dev/null +++ b/chapter-07/05-higher-order-components/01-hocs.html @@ -0,0 +1,60 @@ + + + + + + + + + Higher Order Components + + +

+ + + diff --git a/chapter-07/05-higher-order-components/02-hocs.html b/chapter-07/05-higher-order-components/02-hocs.html new file mode 100644 index 00000000..2960ab18 --- /dev/null +++ b/chapter-07/05-higher-order-components/02-hocs.html @@ -0,0 +1,74 @@ + + + + + + + + + Higher Order Components + + +

+ + + diff --git a/chapter-07/05-higher-order-components/03-hocs.html b/chapter-07/05-higher-order-components/03-hocs.html new file mode 100644 index 00000000..fe55d8c1 --- /dev/null +++ b/chapter-07/05-higher-order-components/03-hocs.html @@ -0,0 +1,72 @@ + + + + + + + + + Libraries + + +

+ + + diff --git a/chapter-07/05-higher-order-components/04-hocs.html b/chapter-07/05-higher-order-components/04-hocs.html new file mode 100644 index 00000000..c4bee064 --- /dev/null +++ b/chapter-07/05-higher-order-components/04-hocs.html @@ -0,0 +1,59 @@ + + + + + + + + + Libraries + + +

+ + + diff --git a/chapter-07/05-higher-order-components/05-hocs.html b/chapter-07/05-higher-order-components/05-hocs.html new file mode 100644 index 00000000..cda37a9f --- /dev/null +++ b/chapter-07/05-higher-order-components/05-hocs.html @@ -0,0 +1,78 @@ + + + + + + + + + Libraries + + +

+ + + diff --git a/chapter-07/06-managing-state-outside-react/01-state.html b/chapter-07/06-managing-state-outside-react/01-state.html new file mode 100644 index 00000000..f887c574 --- /dev/null +++ b/chapter-07/06-managing-state-outside-react/01-state.html @@ -0,0 +1,156 @@ + + + + + + + + + + Libraries + + +

+ + + diff --git a/chapter-07/06-managing-state-outside-react/02-flux.html b/chapter-07/06-managing-state-outside-react/02-flux.html new file mode 100644 index 00000000..b5971082 --- /dev/null +++ b/chapter-07/06-managing-state-outside-react/02-flux.html @@ -0,0 +1,159 @@ + + + + + + + + + + + + Flux + + +

+ + + diff --git a/chapter-07/color-organizer/package.json b/chapter-07/color-organizer/package.json index 244469e7..aae5235b 100644 --- a/chapter-07/color-organizer/package.json +++ b/chapter-07/color-organizer/package.json @@ -6,7 +6,7 @@ "scripts": { "build": "webpack --progress", "prestart": "npm run build", - "start": "opener http://localhost:3000 & ./node_modules/.bin/httpster -p 3000 -d ./dist" + "start": "opener http://localhost:3000 & httpster -p 3000 -d ./dist" }, "keywords": [ "React", diff --git a/chapter-07/mounting-lifecycle-clock/dist/assets/bundle.js b/chapter-07/mounting-lifecycle-clock/dist/assets/bundle.js index 31709cca..9ce57d82 100644 --- a/chapter-07/mounting-lifecycle-clock/dist/assets/bundle.js +++ b/chapter-07/mounting-lifecycle-clock/dist/assets/bundle.js @@ -21236,7 +21236,7 @@ var Clock = function (_Component) { hours = _state.hours, minutes = _state.minutes, seconds = _state.seconds, - timeOfDay = _state.timeOfDay; + ampm = _state.ampm; return React.createElement( 'div', @@ -21269,7 +21269,7 @@ var Clock = function (_Component) { React.createElement( 'span', null, - timeOfDay + ampm ), React.createElement( 'button', @@ -21323,7 +21323,7 @@ var civilianHours = exports.civilianHours = function civilianHours(clockTime) { var appendAMPM = exports.appendAMPM = function appendAMPM(clockTime) { return _extends({}, clockTime, { - ampm: clockTime.hours >= 12 ? "PM" : "AM" + ampm: clockTime.hours >= 12 ? "pm" : "am" }); }; @@ -21353,7 +21353,7 @@ var doubleDigits = exports.doubleDigits = function doubleDigits(civilianTime) { return compose(prependZero("hours"), prependZero("minutes"), prependZero("seconds"))(civilianTime); }; -var getClockTime = exports.getClockTime = compose(getCurrentTime, abstractClockTime, convertToCivilianTime, doubleDigits); +var getClockTime = exports.getClockTime = compose(getCurrentTime, abstractClockTime, convertToCivilianTime, appendAMPM, doubleDigits); /***/ }) /******/ ]); \ No newline at end of file diff --git a/chapter-07/mounting-lifecycle-clock/src/clock.js b/chapter-07/mounting-lifecycle-clock/src/clock.js index 706ac234..cadbc08c 100644 --- a/chapter-07/mounting-lifecycle-clock/src/clock.js +++ b/chapter-07/mounting-lifecycle-clock/src/clock.js @@ -21,7 +21,7 @@ export default class Clock extends Component { } render() { - const { hours, minutes, seconds, timeOfDay } = this.state + const { hours, minutes, seconds, ampm } = this.state return (

{hours} @@ -29,10 +29,10 @@ export default class Clock extends Component { {minutes} : {seconds} - {timeOfDay} + {ampm}

) } -} \ No newline at end of file +} diff --git a/chapter-07/mounting-lifecycle-clock/src/lib.js b/chapter-07/mounting-lifecycle-clock/src/lib.js index f1b5ff7c..d51d27a5 100644 --- a/chapter-07/mounting-lifecycle-clock/src/lib.js +++ b/chapter-07/mounting-lifecycle-clock/src/lib.js @@ -19,7 +19,7 @@ export const civilianHours = clockTime => export const appendAMPM = clockTime => ({ ...clockTime, - ampm: (clockTime.hours >= 12) ? "PM" : "AM" + ampm: (clockTime.hours >= 12) ? "pm" : "am" }) export const prependZero = key => clockTime => @@ -54,5 +54,6 @@ export const getClockTime = compose( getCurrentTime, abstractClockTime, convertToCivilianTime, + appendAMPM, doubleDigits -) \ No newline at end of file +) diff --git a/chapter-07/readme.md b/chapter-07/readme.md index a2f0b4fe..173a4b06 100644 --- a/chapter-07/readme.md +++ b/chapter-07/readme.md @@ -7,45 +7,45 @@ mount or update a component. Samples -------- -#### Mounting Lifecycle +### Mounting Lifecycle -* Loading data when a component mounts ([1](http://jsbin.com/bameba/1/edit?js,console), -[2](http://jsbin.com/bameba/2/edit?js,output)) -* Clock ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-07/mounting-lifecycle-clock/dist/index.html), -[source](https://github.com/MoonHighway/learning-react/blob/master/chapter-07/mounting-lifecycle-clock)) + 1. getFakeMembers ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-07/01-mounting-lifecycle/01-mounting.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-07/01-mounting-lifecycle/01-mounting.html), [bin](http://jsbin.com/qobiwit/1/edit?js,console)) + 2. getFakeMembers Lifecycle ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-07/01-mounting-lifecycle/02-mounting.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-07/01-mounting-lifecycle/02-mounting.html), [bin](http://jsbin.com/qobiwit/2/edit?js,output)) + 3. Clock ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-07/mounting-lifecycle-clock/dist/index.html), + [source](https://github.com/MoonHighway/learning-react/blob/master/chapter-07/mounting-lifecycle-clock)) -#### Updating Lifecycle +### Color Organizer -* Updating Lifecycle (color-organizer) ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-07/color-organizer/dist/index.html), -[source](https://github.com/MoonHighway/learning-react/blob/master/chapter-07/color-organizer)) -* Component will Receive Props ([1](http://jsbin.com/nuwaje/1/edit?js,output), -[2](http://jsbin.com/nuwaje/2/edit?js,output), -[note](http://jsbin.com/gacuba/1/edit?js,output)) + 1. Color Organizer - Updating Lifecycle ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-07/color-organizer/dist/index.html), + [source](https://github.com/MoonHighway/learning-react/blob/master/chapter-07/color-organizer)) -#### Children +### Updating Lifecycle -* Display Component ([1](http://jsbin.com/goraje/1/edit?js,output), -[2](http://jsbin.com/goraje/2/edit?js,console)) -* WhenTruthy, WhenFalsy ([3](http://jsbin.com/goraje/3/edit?js,output), -[4](http://jsbin.com/goraje/4/edit?js,output), -[5](http://jsbin.com/goraje/5/edit?js,console)) + 1. Hidden Messages - Mounting Methods ❌ ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-07/02-updating-lifecycle/01-updating.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-07/02-updating-lifecycle/01-updating.html), [bin](http://jsbin.com/buvutef/1/edit?js,output)) + 2. componentWillReceiveProps ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-07/02-updating-lifecycle/02-updating.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-07/02-updating-lifecycle/02-updating.html), [bin](http://jsbin.com/buvutef/2/edit?js,output)) + +### Children + + 1. Display Component ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-07/03-children/01-children.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-07/03-children/01-children.html), [bin](http://jsbin.com/filikap/1/edit?js,output)) + 2. Filtering Components ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-07/03-children/02-children.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-07/03-children/02-children.html), [bin](http://jsbin.com/filikap/2/edit?js,output)) + 3. Filtering Components - Different Ages ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-07/03-children/03-children.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-07/03-children/03-children.html), [bin](http://jsbin.com/filikap/3/edit?js,output)) ### JavaScript Library Integration -* Fetching Data ([1](http://jsbin.com/yefuya/1/edit?js,output), -[2](http://jsbin.com/yefuya/2/edit?js,output)) -* D3 Timeline v1 ([1](http://jsbin.com/hakono/1/edit?js,output), -[2](http://jsbin.com/hakono/2/edit?js,output)) + 1. Fetching Data ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-07/04-library-integration/01-libraries.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-07/04-library-integration/01-libraries.html), [bin](http://jsbin.com/levaduv/1/edit?js,output)) + 2. Fetch with componentWillMount ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-07/04-library-integration/02-libraries.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-07/04-library-integration/02-libraries.html), [bin](http://jsbin.com/levaduv/2/edit?js,output)) + 3. D3 Timeline v1 ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-07/04-library-integration/03-libraries.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-07/04-library-integration/03-libraries.html), [bin](http://jsbin.com/levaduv/3/edit?js,output)) + 4. D3 Ski Milestones ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-07/04-library-integration/04-libraries.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-07/04-library-integration/04-libraries.html), [bin](http://jsbin.com/levaduv/4/edit?js,output)) -#### Higher Order Components +### Higher Order Components -* People list ([1](http://jsbin.com/vexidu/1/edit?js,output)) -* DataComponent HOC ([2](http://jsbin.com/vexidu/2/edit?js,output)) -* Country dropdown with DataComponent ([3](http://jsbin.com/vexidu/3/edit?js,output)) -* Expandable HOC ([1](http://jsbin.com/medari/1/edit?js,output)) -* PopUp with Expandable ([2](http://jsbin.com/medari/2/edit?js,output)) + 1. People List ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-07/05-higher-order-components/01-hocs.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-07/05-higher-order-components/01-hocs.html), [bin](http://jsbin.com/nitagof/1/edit?js,output)) + 2. Data Component HOC ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-07/05-higher-order-components/02-hocs.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-07/05-higher-order-components/02-hocs.html), [bin](http://jsbin.com/nitagof/2/edit?js,output)) + 3. Country Dropdown ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-07/05-higher-order-components/03-hocs.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-07/05-higher-order-components/03-hocs.html), [bin](http://jsbin.com/nitagof/3/edit?js,output)) + 4. Expandable HOC ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-07/05-higher-order-components/04-hocs.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-07/05-higher-order-components/04-hocs.html), [bin](http://jsbin.com/nitagof/4/edit?js,output)) + 5. Pop-up With Expandable ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-07/05-higher-order-components/04-hocs.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-07/05-higher-order-components/04-hocs.html), [bin](http://jsbin.com/nitagof/5/edit?js,output)) -#### Managing State Outside of React +### Managing State Outside of React -* Clock without React State ([1](http://jsbin.com/zepusi/1/edit?js,output)) -* Flux ([1](http://jsbin.com/fizocij/1/edit?js,console,output)) + 1. Clock without React State ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-07/06-managing-state-outside-react/01-state.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-07/06-managing-state-outside-react/01-state.html), [bin](http://jsbin.com/juxewiw/1/edit?js,output)) + 2. Flux ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-07/06-managing-state-outside-react/02-flux.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-07/06-managing-state-outside-react/02-flux.html), [bin](http://jsbin.com/juxewiw/2/edit?js,console,output)) diff --git a/chapter-08/01-reducers/01-reducers.html b/chapter-08/01-reducers/01-reducers.html new file mode 100644 index 00000000..1a0f45ae --- /dev/null +++ b/chapter-08/01-reducers/01-reducers.html @@ -0,0 +1,61 @@ + + + + + + + + Redux + + +

+ + + diff --git a/chapter-08/01-reducers/02-reducers.html b/chapter-08/01-reducers/02-reducers.html new file mode 100644 index 00000000..76553f33 --- /dev/null +++ b/chapter-08/01-reducers/02-reducers.html @@ -0,0 +1,101 @@ + + + + + + + + Redux + + +

+ + + diff --git a/chapter-08/01-reducers/03-reducers.html b/chapter-08/01-reducers/03-reducers.html new file mode 100644 index 00000000..a9cecd15 --- /dev/null +++ b/chapter-08/01-reducers/03-reducers.html @@ -0,0 +1,52 @@ + + + + + + + + Redux + + +

+ + + diff --git a/chapter-08/02-the-store/01-store.html b/chapter-08/02-the-store/01-store.html new file mode 100644 index 00000000..054560d2 --- /dev/null +++ b/chapter-08/02-the-store/01-store.html @@ -0,0 +1,44 @@ + + + + + + + + Redux + + +

+ + + diff --git a/chapter-08/02-the-store/02-store.html b/chapter-08/02-the-store/02-store.html new file mode 100644 index 00000000..9b3352a5 --- /dev/null +++ b/chapter-08/02-the-store/02-store.html @@ -0,0 +1,76 @@ + + + + + + + + Redux + + +

+ + + diff --git a/chapter-08/02-the-store/03-store.html b/chapter-08/02-the-store/03-store.html new file mode 100644 index 00000000..8243c9a9 --- /dev/null +++ b/chapter-08/02-the-store/03-store.html @@ -0,0 +1,104 @@ + + + + + + + + Redux + + +

+ + + diff --git a/chapter-08/02-the-store/04-store.html b/chapter-08/02-the-store/04-store.html new file mode 100644 index 00000000..ffdd6f6f --- /dev/null +++ b/chapter-08/02-the-store/04-store.html @@ -0,0 +1,142 @@ + + + + + + + + Redux + + +

+ + + diff --git a/chapter-08/02-the-store/05-store.html b/chapter-08/02-the-store/05-store.html new file mode 100644 index 00000000..f3d2db30 --- /dev/null +++ b/chapter-08/02-the-store/05-store.html @@ -0,0 +1,106 @@ + + + + + + + + Redux + + +

+ + + diff --git a/chapter-08/02-the-store/06-store.html b/chapter-08/02-the-store/06-store.html new file mode 100644 index 00000000..d24a1ff1 --- /dev/null +++ b/chapter-08/02-the-store/06-store.html @@ -0,0 +1,108 @@ + + + + + + + + Redux + + +

+ + + diff --git a/chapter-08/02-the-store/07-store.html b/chapter-08/02-the-store/07-store.html new file mode 100644 index 00000000..0a77ac71 --- /dev/null +++ b/chapter-08/02-the-store/07-store.html @@ -0,0 +1,94 @@ + + + + + + + + Redux + + +

+ + + diff --git a/chapter-08/03-action-creators/01-action-creators.html b/chapter-08/03-action-creators/01-action-creators.html new file mode 100644 index 00000000..18e7ad5f --- /dev/null +++ b/chapter-08/03-action-creators/01-action-creators.html @@ -0,0 +1,121 @@ + + + + + + + + + Redux + + +

+ + + diff --git a/chapter-08/03-action-creators/02-action-creators.html b/chapter-08/03-action-creators/02-action-creators.html new file mode 100644 index 00000000..24b347c9 --- /dev/null +++ b/chapter-08/03-action-creators/02-action-creators.html @@ -0,0 +1,132 @@ + + + + + + + + + Redux + + +

+ + + diff --git a/chapter-08/04-middleware/01-middleware.html b/chapter-08/04-middleware/01-middleware.html new file mode 100644 index 00000000..9d367f7d --- /dev/null +++ b/chapter-08/04-middleware/01-middleware.html @@ -0,0 +1,140 @@ + + + + + + + + + Redux + + +

+ + + diff --git a/chapter-08/04-middleware/02-middleware.html b/chapter-08/04-middleware/02-middleware.html new file mode 100644 index 00000000..ff67f597 --- /dev/null +++ b/chapter-08/04-middleware/02-middleware.html @@ -0,0 +1,153 @@ + + + + + + + + + Redux + + +

+ + + diff --git a/chapter-08/color-organizer-redux/package.json b/chapter-08/color-organizer-redux/package.json index 3301e444..22cc9a37 100644 --- a/chapter-08/color-organizer-redux/package.json +++ b/chapter-08/color-organizer-redux/package.json @@ -6,7 +6,7 @@ "scripts": { "build": "webpack --progress", "prestart": "npm run build", - "start": "opener http://localhost:3000 & ./node_modules/.bin/httpster -p 3000 -d ./dist" + "start": "opener http://localhost:3000 & httpster -p 3000 -d ./dist" }, "keywords": [ "redux", diff --git a/chapter-08/readme.md b/chapter-08/readme.md index 454f2ca7..2a972442 100644 --- a/chapter-08/readme.md +++ b/chapter-08/readme.md @@ -1,39 +1,39 @@ Chapter 8 : Redux ================== -Redux is based on Flux, and it was designed to tackle the challenge of understanding how data changes -flow through your application. +Redux is based on Flux, and it was designed to tackle the challenge of understanding how data changes +flow through your application. Samples -------- -#### Reducers +### Reducers -* Color Reducer ([1](http://jsbin.com/wezaxew/1/edit?js,console)) -* Colors Reducer ([2](http://jsbin.com/wezaxew/2/edit?js,console)) -* Sort Reducer ([3](http://jsbin.com/wezaxew/3/edit?js,console)) + 1. Color Reducer ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-08/01-reducers/01-reducers.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-08/01-reducers/01-reducers.html), [bin](http://jsbin.com/cavuxas/1/edit?js,output)) + 2. Colors Reducer ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-08/01-reducers/02-reducers.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-08/01-reducers/02-reducers.html), [bin](http://jsbin.com/cavuxas/2/edit?js,output)) + 3. Sort Reducer ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-08/01-reducers/03-reducers.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-08/01-reducers/03-reducers.html), [bin](http://jsbin.com/cavuxas/3/edit?js,output)) -#### The Store +### The Store -* createStore ([1](http://jsbin.com/wajuju/1/edit?js,console)) -* combineReducers ([2](http://jsbin.com/wajuju/2/edit?js,console)) -* initialState ([3](http://jsbin.com/wajuju/3/edit?js,console)) -* dispatching Actions ([4](http://jsbin.com/wajuju/4/edit?js,console)) -* subscribe ([5](http://jsbin.com/wajuju/5/edit?js,console)) -* unsubscribe ([6](http://jsbin.com/wajuju/6/edit?js,console)) -* persistent state data ([7](http://jsbin.com/wajuju/7/edit?js,console)) + 1. createStore ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-08/02-the-store/01-store.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-08/02-the-store/01-store.html), [bin](http://jsbin.com/dusitad/1/edit?js,output)) + 2. combineReducers ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-08/02-the-store/02-store.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-08/02-the-store/02-store.html), [bin](http://jsbin.com/dusitad/2/edit?js,output)) + 3. initialState ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-08/02-the-store/03-store.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-08/02-the-store/03-store.html), [bin](http://jsbin.com/dusitad/3/edit?js,output)) + 4. Dispatching Actions ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-08/02-the-store/04-store.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-08/02-the-store/04-store.html), [bin](http://jsbin.com/dusitad/4/edit?js,output)) + 5. Subscribe ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-08/02-the-store/05-store.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-08/02-the-store/05-store.html), [bin](http://jsbin.com/dusitad/5/edit?js,output)) + 6. Unsubscribe ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-08/02-the-store/06-store.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-08/02-the-store/06-store.html), [bin](http://jsbin.com/dusitad/6/edit?js,output)) + 7. Persistent State Data ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-08/02-the-store/07-store.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-08/02-the-store/07-store.html), [bin](http://jsbin.com/dusitad/7/edit?js,output)) -#### Action Creators +### Action Creators -* action creators ([1](http://jsbin.com/ceweboj/1/edit?js,console)) -* compose ([2](http://jsbin.com/ceweboj/2/edit?js,console)) + 1. Action Creators ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-08/03-action-creators/01-action-creators.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-08/03-action-creators/01-action-creators.html), [bin](http://jsbin.com/bubuhuq/1/edit?js,output)) + 2. Compose ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-08/03-action-creators/02-action-creators.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-08/03-action-creators/02-action-creators.html), [bin](http://jsbin.com/bubuhuq/2/edit?js,output)) -#### Middleware +### Middleware -* logger ([1](http://jsbin.com/fuvezi/1/edit?js,console)) -* saver ([2](http://jsbin.com/fuvezi/2/edit?js,console)) + 1. logger ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-08/04-middleware/01-middleware.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-08/04-middleware/01-middleware.html), [bin](http://jsbin.com/tirese/1/edit?js,output)) + 2. saver ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-08/04-middleware/02-middleware.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-08/04-middleware/02-middleware.html), [bin](http://jsbin.com/tirese/2/edit?js,output)) #### Putting it all together Here is the complete sample store that we have reviewed -[Demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-08/color-organizer-redux/dist/index.html) | +[Demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-08/color-organizer-redux/dist/index.html) | [Source](https://github.com/MoonHighway/learning-react/blob/master/chapter-08/color-organizer-redux) diff --git a/chapter-09/color-organizer-containers/package.json b/chapter-09/color-organizer-containers/package.json index 62b5830d..227347de 100644 --- a/chapter-09/color-organizer-containers/package.json +++ b/chapter-09/color-organizer-containers/package.json @@ -6,7 +6,7 @@ "scripts": { "build": "webpack --progress", "prestart": "npm run build", - "start": "opener http://localhost:3000 & ./node_modules/.bin/httpster -p 3000 -d ./dist" + "start": "opener http://localhost:3000 & httpster -p 3000 -d ./dist" }, "keywords": [ "React", diff --git a/chapter-09/color-organizer-context/package.json b/chapter-09/color-organizer-context/package.json index 62b5830d..227347de 100644 --- a/chapter-09/color-organizer-context/package.json +++ b/chapter-09/color-organizer-context/package.json @@ -6,7 +6,7 @@ "scripts": { "build": "webpack --progress", "prestart": "npm run build", - "start": "opener http://localhost:3000 & ./node_modules/.bin/httpster -p 3000 -d ./dist" + "start": "opener http://localhost:3000 & httpster -p 3000 -d ./dist" }, "keywords": [ "React", diff --git a/chapter-09/color-organizer-explicit/package.json b/chapter-09/color-organizer-explicit/package.json index 62b5830d..227347de 100644 --- a/chapter-09/color-organizer-explicit/package.json +++ b/chapter-09/color-organizer-explicit/package.json @@ -6,7 +6,7 @@ "scripts": { "build": "webpack --progress", "prestart": "npm run build", - "start": "opener http://localhost:3000 & ./node_modules/.bin/httpster -p 3000 -d ./dist" + "start": "opener http://localhost:3000 & httpster -p 3000 -d ./dist" }, "keywords": [ "React", diff --git a/chapter-09/color-organizer/package.json b/chapter-09/color-organizer/package.json index 824f36c9..0558dc37 100644 --- a/chapter-09/color-organizer/package.json +++ b/chapter-09/color-organizer/package.json @@ -6,7 +6,7 @@ "scripts": { "build": "webpack --progress", "prestart": "npm run build", - "start": "opener http://localhost:3000 & ./node_modules/.bin/httpster -p 3000 -d ./dist" + "start": "opener http://localhost:3000 & httpster -p 3000 -d ./dist" }, "keywords": [ "React", diff --git a/chapter-10/color-organizer/package.json b/chapter-10/color-organizer/package.json index c9ec410e..3bf23088 100644 --- a/chapter-10/color-organizer/package.json +++ b/chapter-10/color-organizer/package.json @@ -12,7 +12,7 @@ "test": "jest", "posttest": "npm run lint", "coverage": "opener ./coverage/lcov-report/index.html", - "dev": "opener http://localhost:3000 & ./node_modules/.bin/webpack-dev-server" + "dev": "opener http://localhost:3000 & webpack-dev-server" }, "keywords": [ "React", diff --git a/chapter-11/color-organizer/package.json b/chapter-11/color-organizer/package.json index 36105b83..b7b8935d 100644 --- a/chapter-11/color-organizer/package.json +++ b/chapter-11/color-organizer/package.json @@ -6,8 +6,8 @@ "scripts": { "build": "webpack --progress", "prestart": "npm run build", - "start": "./node_modules/.bin/httpster -d ./dist/ -p 3000", - "dev": "opener http://localhost:3000 & ./node_modules/.bin/webpack-dev-server" + "start": "httpster -d ./dist/ -p 3000", + "dev": "opener http://localhost:3000 & webpack-dev-server" }, "keywords": [ "React", diff --git a/chapter-11/company-website/package.json b/chapter-11/company-website/package.json index eed1d3cf..e9af5685 100644 --- a/chapter-11/company-website/package.json +++ b/chapter-11/company-website/package.json @@ -4,7 +4,8 @@ "description": "A React Router tutorial.", "main": "index.js", "scripts": { - "start": "opener http://localhost:3000 & ./node_modules/.bin/webpack-dev-server" + "start": "opener http://localhost:3000 & webpack-dev-server", + "build": "webpack --progress" }, "author": "Eve Porcello (http://www.moonhighway.com)", "license": "MIT", diff --git a/chapter-11/company-website/src/index.js b/chapter-11/company-website/src/index.js index cf29e6e7..3d98a0bb 100644 --- a/chapter-11/company-website/src/index.js +++ b/chapter-11/company-website/src/index.js @@ -24,10 +24,10 @@ render(

- + diff --git a/chapter-12/color-organizer/package.json b/chapter-12/color-organizer/package.json index 36333a88..cc6ac394 100644 --- a/chapter-12/color-organizer/package.json +++ b/chapter-12/color-organizer/package.json @@ -6,7 +6,7 @@ "scripts": { "build": "webpack --progress", "prestart": "npm run build", - "start": "./node_modules/.bin/babel-node ./src/server" + "start": "babel-node ./src/server" }, "keywords": [ "React", diff --git a/chapter-12/server-render-recipes/package.json b/chapter-12/server-render-recipes/package.json index 049c7eae..f7e54b94 100644 --- a/chapter-12/server-render-recipes/package.json +++ b/chapter-12/server-render-recipes/package.json @@ -6,7 +6,7 @@ "scripts": { "build": "webpack --progress", "prestart": "npm run build", - "start": "./node_modules/.bin/babel-node index-server.js" + "start": "babel-node index-server.js" }, "keywords": [ "React",