diff --git a/.gitignore b/.gitignore index 5504ecb7..ca3bd829 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,9 @@ + +.DS_Store .idea/ +jest + chapter-12/color-organizer/dist/ # Logs diff --git a/README.md b/README.md index 2712ffd2..bf08ea36 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,6 @@ The code samples for *Learning React* by Alex Banks and Eve Porcello, published |----------|----------| | ![Learning React Book Cover](https://raw.githubusercontent.com/MoonHighway/learning-react/master/learning-react.jpg) | If you’re interested in React but find yourself confused about how to get started,
this is the book is for you. In this book, Alex Banks and Eve Porcello introduce
how to build React applications with the React ecosystem including Flux and Redux.

__Buy the book__: [Amazon](https://www.amazon.com/Learning-React-Functional-Development-Flux/dp/1491954620/ref=sr_1_1?s=books&ie=UTF8&qid=1466542799&sr=1-1&keywords=learning+react) - [O'Reilly](http://shop.oreilly.com/product/0636920049579.do)
__Take the Course__: [Moon Highway](http://www.moonhighway.com)

| - ### Table of Contents * __Chapter 1__ : [Welcome To React](https://github.com/MoonHighway/learning-react/tree/master/chapter-01) @@ -22,5 +21,16 @@ The code samples for *Learning React* by Alex Banks and Eve Porcello, published * __Chapter 11__ : [React Router](https://github.com/MoonHighway/learning-react/tree/master/chapter-11) * __Chapter 12__ : [React and the Server](https://github.com/MoonHighway/learning-react/tree/master/chapter-12) +----------------------------------------- +### React 16 Upgrades ✅ +This repo has been upgraded to React 16. Some of the book examples may have changed. These changes +are clearly defined in the project `README.MD` documents where they take place. If you would like +to view the version of this repo that uses React 15 and matches the book code exactly use [(v1.0.0)](https://github.com/MoonHighway/learning-react/tree/v1.0.0) of +this repo. The major changes are defined in the following `README.MD` documents: +1. PropTypes deprecated - [Chapter 6 Color Organizer](https://github.com/MoonHighway/learning-react/tree/master/chapter-06/color-organizer) +2. React 16 State Management - [Chapter 6 Color Organizer ](https://github.com/MoonHighway/learning-react/tree/master/chapter-06/color-organizer) +3. Testing React 16 with enzyme 3 - [Chapter 10 Color Organizer](https://github.com/MoonHighway/learning-react/tree/master/chapter-10/color-organizer) +4. Server Rendering hydrate - [Chapter 12 server rendered recipes](https://github.com/MoonHighway/learning-react/tree/master/chapter-12/server-render-recipes) +5. Server Rendering hydrate - [Chapter 12 Color Organizer](https://github.com/MoonHighway/learning-react/tree/master/chapter-12/color-organizer) diff --git a/chapter-01/readme.md b/chapter-01/readme.md index c3763c62..3d22eb2a 100644 --- a/chapter-01/readme.md +++ b/chapter-01/readme.md @@ -1,47 +1,50 @@ Chapter 1 : Introduction ================== -The widespread use of React on large websites shows that it is stable enough to use at scale. React is ready, -but nothing is set in stone. The unique opportunity we all have is that since it's so new, we can be part of building it. -As the library and its tools evolve, we can suggest enhancements. When ideas come to mind about how to work with -React more efficiently, we can build them. React is already great, but we can play an active role in building -its even better future. +The widespread use of React on large websites shows that it is stable enough to use at scale. React is ready. - -Installing Node js and NPM +Installing Node.js and NPM -------------------- -When working with Node and React, you will need to use the command line. In the mac this is called the terminal on a PC -it is called the command prompt. Run the following commands to check your current version on node and npm. If needed -instruction on how to install or upgrade are below. +When working with Node and React, you will need to use the command line. On the Mac, this is called the terminal. On a PC, +it is called the command prompt. Run the following commands to check your current version on node and npm. If needed, +instructions on how to install or upgrade are below. First, Check to see if you have Node JS installed ``` $ node -v ``` -Then, if needed, [install or update Node JS](https://nodejs.org/en/) from the node js website. Download the installer, +Then, if needed, [install or update Node.js](https://nodejs.org/en/) from the Node.js website. Download the installer, run it, and follow the instructions. -------------------------------- -Next, Check your version of npm +Next, check your version of npm: ``` $ npm -v ``` -Then, if you are running anything less than version three you will need to update npm. +Then, if you are running anything less than version 3, you will need to update npm: ##### Update NPM on Mac ``` -$ sudo npm update -g npm +$ sudo npm update -g npm ``` ##### Update NPM on PC -Make sure to run the command prompt with administrator privilages +Make sure to run the command prompt with administrator privileges: ``` $ npm update -g npm ``` -Finally, there are some nice options for switching node versions. You can install one of these optional version mangers: +##### Optionally install Yarn +Yarn is a package manager created at Facebook. It is a compatible alternative to npm. Yarn's use is not required, +but you can optionally install it if you like: +``` +$ sudo npm install -g yarn +``` + +Finally, there are some nice options for switching Node versions. This is not required, but you can +optionally install one of these version mangers: * [Install Node Version Manager - mac only (optional)](https://github.com/creationix/nvm) * [Install NVM-Windows - pc only (optional)](https://github.com/coreybutler/nvm-windows) @@ -50,62 +53,72 @@ Finally, there are some nice options for switching node versions. You can instal Installing the React Tools -------------------------------- -Next, there are some developer chrome extensions or Firefox addons 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) | +* 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/)) 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. +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. + +Note: All JSBin links throughout this repository use React 15. To update, change the script tag CDN links to version 16. -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. +Change + +```html + + +``` + +To + +```html + + +``` -##### A preview of the latest version in a sample: +##### A preview of the latest version in a sample: [http://output.jsbin.com/gosabo](http://output.jsbin.com/gosabo) -##### The sample in the editor: +##### The sample in the editor: [http://output.jsbin.com/gosabo/edit](http://output.jsbin.com/gosabo/edit) -##### The sample in the editor with JavaScript and output tabs open: +##### The sample in the editor with JavaScript and output tabs open: [http://jsbin.com/gosabo/edit?js,output](http://jsbin.com/gosabo/edit?js,output) -##### A pure preview of the sample: -[http://output.jsbin.com/gosabo/quite](http://output.jsbin.com/gosabo) -##### Version 1 of the sample as output: +##### A pure preview of the sample: +[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: +##### Version 2 of the sample as output: [http://output.jsbin.com/gosabo/2](http://output.jsbin.com/gosabo/2) -##### Version 3 of the sample in the editor with html and javascript tabs open: +##### Version 3 of the sample in the editor with html and javascript tabs open: [http://output.jsbin.com/gosabo/3/edit](http://output.jsbin.com/gosabo/3/edit?html,js) -CDN's for javascript libraries +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 +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 Source](https://fb.me/react-with-addons-15.1.0.js) -* [React DOM Source](https://fb.me/react-dom-15.1.0.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 Source](https://cdnjs.cloudflare.com/ajax/libs/redux/3.5.2/redux.min.js) -* [React Router Source](https://cdnjs.cloudflare.com/ajax/libs/react-router/2.6.0/ReactRouter.min.js) -* [Mocha](https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.0-1/mocha.min.js) -* [Chai](https://cdnjs.cloudflare.com/ajax/libs/chai/3.5.0/chai.min.js) -* [Sinon](https://cdnjs.cloudflare.com/ajax/libs/sinon.js/1.15.4/sinon.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) React Resources -------------------------------- -Finally, we have some links to resources and official documentation for the libraies that we will be using. +Finally, we have some links to resources and official documentation for the libraries that we will be using: * [React Documentation](https://facebook.github.io/react/index.html) * [React Source](https://github.com/facebook/react) * [React NPM](https://www.npmjs.com/package/react) -* [Webpack Documentation](https://webpack.github.io/docs/) +* [Webpack Documentation](https://webpack.js.org/) * [Flux Documentation](https://facebook.github.io/flux/docs/overview.html) * [Redux Documentation](http://redux.js.org/index.html) -* [React Router Documentation](https://github.com/reactjs/react-router/tree/master/docs) -* [Mocha Documentation](https://mochajs.org/) -* [Sinon Documentation](http://sinonjs.org/) \ No newline at end of file +* [Jest Documentation](https://facebook.github.io/jest/) +* [React Router Documentation](https://reacttraining.com/react-router/) 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 9d6004fe..8c5a60d8 100644 --- a/chapter-02/babel-inline-transpiler.html +++ b/chapter-02/babel-inline-transpiler.html @@ -3,8 +3,8 @@ - Declarative Clock - + Transpiling Inline with Babel +

Babel Inline Transpiler

@@ -31,4 +31,4 @@

Babel Inline Transpiler

- \ No newline at end of file + diff --git a/chapter-02/craps.html b/chapter-02/craps.html deleted file mode 100644 index 547abf58..00000000 --- a/chapter-02/craps.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - Craps with Promises - - - -

Craps with Promises

-

Open the console

- - - \ No newline at end of file diff --git a/chapter-02/craps.js b/chapter-02/craps.js deleted file mode 100644 index 9a599cc4..00000000 --- a/chapter-02/craps.js +++ /dev/null @@ -1,35 +0,0 @@ -const gameOver = result => - console.log(`Game Over - ${result}`) - -const stillRolling = (message, currentPoint) => - console.log(`${message} - try again for ${currentPoint}`) - -const craps = (roll, point) => new Promise((gameOver, rollAgain) => { - if (!roll || typeof roll !== "number" || roll < 2 || roll > 12) { - rollAgain("to roll a number") - } else if (!point) { - if (roll === 7 || roll === 11) { - gameOver("You win by natural") - } else if (roll === 2 || roll === 3) { - gameOver("You lose, crapped out") - } else { - rollAgain(roll) - } - } else if (roll === point) { - gameOver("You win, you hit the point!") - } else { - if (roll === 7) { - gameOver("You lose, craps") - } else { - rollAgain(point) - } - } -}) - -craps(7).then(gameOver, stillRolling) -craps(2).then(gameOver, stillRolling) -craps(8).then(gameOver, stillRolling) - -craps(5,8).then(gameOver, stillRolling) -craps(7,8).then(gameOver, stillRolling) -craps(8,8).then(gameOver, stillRolling) \ No newline at end of file diff --git a/chapter-02/readme.md b/chapter-02/readme.md index 19a73af7..7d7c6cef 100644 --- a/chapter-02/readme.md +++ b/chapter-02/readme.md @@ -1,62 +1,93 @@ Chapter 2 : Emerging JavaScript ================== -If you haven't made the switch to the latest JavaScript syntax yet, then now will be a good time to get started. +If you haven't made the switch to the latest JavaScript syntax yet, now is a good time to get started. Samples -------- -#### Declaring Variables in ES6 -* const ([1](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)) -* craps as promises ([demo](http://rawgit.com/MoonHighway/learning-react/master/chapter-02/craps.html), -[code](https://github.com/MoonHighway/learning-react/blob/master/chapter-02/craps.js)) -* getFakeMembers ([1](http://jsbin.com/ceteja/1/edit?js)) - -#### 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)) \ No newline at end of file +### 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 98% rename from chapter-03/populate-united-states.js rename to chapter-03/03-populate-the-us/populate-united-states.js index d5411c16..6d6b0096 100644 --- a/chapter-03/populate-united-states.js +++ b/chapter-03/03-populate-the-us/populate-united-states.js @@ -1,7 +1,7 @@ /* Promises **********************************************************************/ const getFakeMembers = count => new Promise((resolves, rejects) => { - const api = `http://api.randomuser.me/?nat=US&results=${count}` + const api = `https://api.randomuser.me/?nat=US&results=${count}` const request = new XMLHttpRequest() request.open('GET', api) request.onload = () => (request.status == 200) ? resolves(JSON.parse(request.response).results) : reject(Error(request.statusText)) @@ -204,4 +204,4 @@ const getStateNames = () => { formattedStates[states[key].toLowerCase()] = key; return formattedStates; }, {}) -} \ No newline at end of file +} 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 54% rename from chapter-04/page-setup.html rename to chapter-04/01-page-setup/01-page-setup.html index dcf0cdd7..5284e851 100644 --- a/chapter-04/page-setup.html +++ b/chapter-04/01-page-setup/01-page-setup.html @@ -7,11 +7,11 @@ -
+
- - + + - \ No newline at end of file + diff --git a/chapter-04/baked-salmon.html b/chapter-04/01-page-setup/02-baked-salmon.html similarity index 76% rename from chapter-04/baked-salmon.html rename to chapter-04/01-page-setup/02-baked-salmon.html index f99d2c74..2651a154 100644 --- a/chapter-04/baked-salmon.html +++ b/chapter-04/01-page-setup/02-baked-salmon.html @@ -22,13 +22,12 @@

Baked Salmon

Cooking Instructions

Preheat the oven to 350 degrees.

Spread the olive oil around a glass baking dish.

-

Add the salmon, Garlic, and pine nuts to the dish

+

Add the salmon, garlic, and pine nuts to the dish.

Bake for 15 minutes.

-

Add the Butternut Squash and put back in the oven for 30 mins.

-

Remove from oven and let cool for 15 minutes. - Add the lettuce and serve.

+

Add the yellow squash and put back in the oven for 30 mins.

+

Remove from oven and let cool for 15 minutes. Add the lettuce and serve.

- \ No newline at end of file + diff --git a/chapter-04/02-react-elements/01-elements.html b/chapter-04/02-react-elements/01-elements.html new file mode 100644 index 00000000..6b874695 --- /dev/null +++ b/chapter-04/02-react-elements/01-elements.html @@ -0,0 +1,30 @@ + + + + + React Elements + + + + +
+ + + + + + + + + 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 81% rename from chapter-04/DOM-rendering-moods.html rename to chapter-04/04-dom-rendering-moods/DOM-rendering-moods.html index 2e0c2a06..1068576f 100644 --- a/chapter-04/DOM-rendering-moods.html +++ b/chapter-04/04-dom-rendering-moods/DOM-rendering-moods.html @@ -2,8 +2,8 @@ - - + + @@ -17,7 +17,7 @@

Updating the DOM

Press the Spacebar to change the mood

-

JQuery

+

jQuery

@@ -26,4 +26,4 @@

React

- \ No newline at end of file + diff --git a/chapter-04/DOM-rendering-moods.js b/chapter-04/04-dom-rendering-moods/DOM-rendering-moods.js similarity index 95% rename from chapter-04/DOM-rendering-moods.js rename to chapter-04/04-dom-rendering-moods/DOM-rendering-moods.js index 8e2c8fb4..6d427fc6 100644 --- a/chapter-04/DOM-rendering-moods.js +++ b/chapter-04/04-dom-rendering-moods/DOM-rendering-moods.js @@ -18,7 +18,7 @@ class Mood extends React.Component { const { children } = this.props const { moodItem } = this.refs moodItem.style.backgroundColor = '#6099A0' - alert(`React chaning a "${children}" to a "${nextProps.children}"`) + alert(`React changing a "${children}" to a "${nextProps.children}"`) } componentDidUpdate() { this.refs.moodItem.style.backgroundColor = '' @@ -62,4 +62,4 @@ function changeTheMood() { $('