Lessons cleanup: grammar, factual accuracy, code bugs, hygiene

.gitignore

@@ -1,5 +1,5 @@
 # dependencies
-/node_modules
+node_modules/
 
 # logs
 logs
@@ -11,16 +11,15 @@ yarn-error.log*
 # misc
 .DS_Store
 .env
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+.env.*
+!.env.example
 
-#npm cache dir
+# npm cache dir
 .npm
 
-# production
-/build
+# build output
+build/
+dist/
 
 # Runtime data
 pids
@@ -29,7 +28,7 @@ pids
 *.pid.lock
 
 # testing
-/coverage
+coverage/
 **/__snapshots__
 
 # TS v1 declarations files

00_0_intro.md

@@ -2,7 +2,7 @@
 
 **A JavaScript library for building user interfaces.**
 
-More than 5 years have passed since the official React´s release (*Facebook - March 2013*); nevertheless, the community interest and adoption are in constant growth.
+Since React's official release (*Facebook - March 2013*), the community interest and adoption have been in constant growth.
 
 ---
 
@@ -24,17 +24,17 @@ The following *information* is only illustrative.
 
 ---
 
-Every time I talked with `young DEVs` (youth here's not more than a short term of exposure or lack "production experience"), the React´s stamp seems to widely extend its real existence... For the new rows of builders, handling `UIs` without a solid `library` (like React) or `framework` (Angular or Vue.js) is something unthinkable and, perhaps, fumes of an old-past ready to be forgotten.
+Every time I talked with `young DEVs` (youth here's not more than a short term of exposure or lack "production experience"), the React's stamp seems to widely extend its real existence... For the new rows of builders, handling `UIs` without a solid `library` (like React) or `framework` (Angular or Vue.js) is something unthinkable and, perhaps, fumes of an old-past ready to be forgotten.
 
-No matter the appliance you pick to support your work (here´s an elder AngularJS´s patron) we all want the same:
+No matter the appliance you pick to support your work (here's an elder AngularJS's patron) we all want the same:
 
 * Simplicity (Abstraction)
 * Scalability
 * Performance
 * Security
 * Friendly debugging tools
 
-(I would also include *Community*, which -undoubtedly- made `React` what it's today. In a `View library` where everything has to be added: `routing`, `validation`, `global state`, etc, plurality is a must that comes from the hand of popular adoption: *the bigger the Community, the more versatile the ecosystem will be*)
+(I would also include *Community*, which -undoubtedly- made `React` what it is today. In a `View library` where everything has to be added: `routing`, `validation`, `global state`, etc., plurality is a must that comes from the hand of popular adoption: *the bigger the Community, the more versatile the ecosystem will be*)
 
 ## Why React...?
 
@@ -55,22 +55,22 @@ The idea behind `SPA` is having a single `HTML document` using `JS` to change wh
 
 *Example:* if a user clicks on x-link (which is going to be prevented of its default behavior and it will act as a "toggler"), x-data (all the needed assets were downloaded on the *first load*: `HTML/CSS/JS`) is going to be requested `asynchronously` showing the proper view for that particular "model".
 
-`React` does not require a SPA implementation or approach. You can mix React with other JS libraries, use it partially (for certain features) and combine it with `Server Side Logic`. Most of the examples I'll provide are `SPAs` given that are focus is on the features, not the application. 
+`React` does not require a SPA implementation or approach. You can mix React with other JS libraries, use it partially (for certain features) and combine it with `Server Side Logic`. Most of the examples I'll provide are `SPAs` given that our focus is on the features, not the application. 
 
 Later, we are going to address `routing` and how to keep *UI and URL in sync* with `react-router` package. I strongly encourage you to read **React Router** [documentation](https://github.com/ReactTraining/react-router).
 
 ---
 
-### What´s JSX...?
+### What's JSX...?
 
-It´s an extension to `JS syntax` recommended by React to describe *how our UI should look like*. It´s not mandatory; just a really convenient,standardized and abstract way of writing our components.
+It's an extension to `JS syntax` recommended by React to describe *how our UI should look like*. It's not mandatory; just a really convenient, standardized and abstract way of writing our components.
 
-*Note:* It´s important to remember React´s motto: `A JavaScript library for building user interfaces.` Following this premise, you will find coherent to have a strict relation between `logic` and `markup` in the same small unit or component, r, as `React docs` describe...
+*Note:* It's important to remember React's motto: `A JavaScript library for building user interfaces.` Following this premise, you will find it coherent to have a strict relation between `logic` and `markup` in the same small unit or component, or, as `React docs` describe...
 
 > "React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display".
 
 
-Here´s and example of a class-based component using `JSX`
+Here's an example of a class-based component using `JSX`
 
 ```javascript
 class SayHi extends React.Component {
@@ -100,7 +100,7 @@ ReactDOM.render(
 *Note:* `Babel` is used to transpile `es2015 or ES6` code into syntax that old browsers can interpret.
 
 
-Before leaving the `JSX` introductory annex, I should advice you we are going to follow [Airbnb React/JSX Style Guide](https://github.com/airbnb/javascript/tree/master/react)
+Before leaving the `JSX` introductory annex, I should advise you we are going to follow [Airbnb React/JSX Style Guide](https://github.com/airbnb/javascript/tree/master/react)
 
 ---
 

00_1_intro_JS.md

@@ -1,8 +1,8 @@
 ## JS beyond JavaScript
 
 **JS CallStack**
-High level intro: Remember, first, that JS is a single-threaded language (this basically means that it can only handle one task at the time).
-The JS engine (example: Google V8 or SpiderMonkey) defines the Global Execution Context (GEC) like "the browser or Node" (in relation to where the code is executed), sets the Global Memory or Scope) and creates the Call Stack, which allows the interpreter to keep track of what happened, what is happening and what is going to happen. For more information about this abstract Data Type: [Stack](<https://en.wikipedia.org/wiki/Stack_(abstract_data_type)>)
+High level intro: Remember, first, that JS is a single-threaded language (this basically means that it can only handle one task at a time).
+The JS engine (example: Google V8 or SpiderMonkey) defines the Global Execution Context (GEC) like "the browser or Node" (in relation to where the code is executed), sets the Global Memory or Scope, and creates the Call Stack, which allows the interpreter to keep track of what happened, what is happening and what is going to happen. For more information about this abstract data type: [Stack](<https://en.wikipedia.org/wiki/Stack_(abstract_data_type)>)
 
 An easy example to illustrate:
 
@@ -25,14 +25,136 @@ salutation();
 * _CallStack_
   1. salutation()
   2. message()
-     As soon as message() resolves or finishes its execution, it´s removed from the stack (there´s no need to call what was executed) being salutation() the next function to be called, resolved and then, removed from the stack which will result in an empty Stack.
+     As soon as message() resolves or finishes its execution, it's removed from the stack (there's no need to call what was executed) being salutation() the next function to be called, resolved and then, removed from the stack which will result in an empty Stack.
 
 One quick note about scope:
-Both, the functions and the variable of our example are part of the Window (global) context.
-You can check the Window´s context executing:
+Both, the functions and the variables of our example are part of the Window (global) context.
+You can check the Window's context executing:
 
 ```console
 console.log(this);
 ```
 
-However, something important to remind is that each time one of our function is invoked, a new context (functional context) is created for that particular function.
+However, something important to remember is that each time one of our functions is invoked, a new context (functional context) is created for that particular function.
+
+---
+
+### Primitive and reference types
+
+I'm going to suppose that you are familiar with the concept of "Data Types" (string, number, array, boolean, null, undefined, symbol, object).
+Our "data" can be classified as Primitive or Reference in relation to _where_ and _how_ it's stored in memory.
+
+* Variables that hold "just one value" are stored in the "stack" (memory, faster but less storage) and every time we pass them to, for example a function, we pass the value.
+* Variables that hold "multiple values" (like objects and arrays) are stored in the "heap" (memory, slower but more storage) and are passed as reference: we don't pass the value, but rather, a pointer that is going to reference that value.
+
+**Primitive Types are copied by value**
+
+Primitive Type: string example.
+We declare a variable and initialize it with the value of "Peter".
+Then, we declare and initialize a new variable with the VALUE of the previous one, name.
+If we decide to change the value of name, name will hold the new data but name1 will keep the value that we passed: "Peter".
+
+```javascript
+let name = "Peter";
+let name1 = name;
+name = "Pan";
+
+console.log('name ' + name);
+console.log('name1 ' + name1);
+```
+
+Result:
+
+```
+name Pan
+name1 Peter
+```
+
+Remember: we are copying the value that we stored in `name` and set it as the value of `name1`. Two different variables holding two different values.
+
+Now, let's try to do something similar with a Reference Type.
+
+```javascript
+let person = { name: "Peter" };
+
+let name = person.name;
+
+person.name = "Pan";
+
+let name1 = name;
+
+let name2 = person;
+
+console.log(person);
+
+console.log('name ' + name);
+console.log('name1 ' + name1);
+
+console.log('name2 ' + JSON.stringify(person));
+```
+
+Result:
+
+```
+{ name: 'Pan' }
+name Peter
+name1 Peter
+name2 {"name":"Pan"}
+```
+
+Short explanation:
+
+1. We declare and initialize the variable person with an object.
+2. `Variable name` is initialized with the value of the property name of the object person. This value is a string, so it will be passed by value.
+3. We change the value of the `property name` of the object person to `string "Pan"`.
+4. We declare and initialize the `variable name1` with the value of the variable name (by value).
+5. We declare and initialize the `variable name2` with person (by reference).
+
+**Primitives are compared by value**
+
+```javascript
+var a = 1;
+var b = 1;
+a === b;
+```
+
+This returns `true`.
+
+However, this is `false` for Reference types (where the comparison is between the spaces in the heap that each one is occupying):
+
+```javascript
+var a = { a: 1 };
+var b = { a: 1 };
+a === b;
+```
+
+This returns `false`.
+
+---
+
+### Coercion
+
+Coercion is when we force one data type into another. This happens because JS is pretty flexible handling data types.
+
+Example:
+
+```javascript
+console.log(1 + true);
+console.log('1' + 1);
+```
+
+We force or coerce `true` into `1` and the number `1` into the string `"1"`.
+
+The following operators convert data type values into `numbers`: `- * / %`. However, `+`, as we saw, converts by default into a `string` if either operand is a string.
+
+```javascript
+console.log('1' + 1);
+console.log('1' - 1);
+```
+
+Result:
+
+```
+11
+0
+```

00_2_intro_JS-patterns.md

@@ -1,7 +1,7 @@
 ## Functional Programming
 
 ### HOF: Higher Order Function
-Is a `function` that takes a function as an argument AND/OR returns a function.
+It is a `function` that takes a function as an argument AND/OR returns a function.
 
 *Basic example:* function that returns (or creates) a new function.
 
@@ -72,7 +72,7 @@ false
 *Important note*: You will find several tutorials (and libraries) offering methods to avoid mutating data. Some of them, using the same naming (`push`) which can be confusing, especially at the beginning. Let's see this case to dispel any possible doubt during your research.
 
 ```javascript
-/* If your prefer fat arrow fn
+/* If you prefer fat arrow fn
 const push = element => arr => {
   let tempArr = [...arr]
   tempArr.push(element)
@@ -102,9 +102,9 @@ Result:
 [1, 2, 3, 5]
 ```
 
-The method `push()()` is a `curried function` (*a function that takes multiple arguments one at the time: btw, we will see this topic in depth*). First, we are passing the element that we want to append in our new array; second, the original array.
+The method `push()()` is a `curried function` (*a function that takes multiple arguments one at a time: btw, we will see this topic in depth*). First, we are passing the element that we want to append in our new array; second, the original array.
 
-Here's the important part. In our example, `push()` is a function defined in the `global scope` while `[].push` a method of the Array data type.
+Here's the important part. In our example, `push()` is a function defined in the `global scope` while `[].push` is a method of the Array data type.
 
 Try...
 ```javascript

00_3_intro_es2015.md

@@ -6,8 +6,8 @@
 
 `myArray.reduce(callback[, initialValue])`
 
-It takes a collection of data and reduce it to a single value.
-It´s the base of one of the vital parts of Redux´s flow: reducers.
+It takes a collection of data and reduces it to a single value.
+It's the base of one of the vital parts of Redux's flow: reducers.
 
 Example: reduce years collection into TOTAL years
 
@@ -18,8 +18,8 @@ const friends = [
   { name: 'Wendy', age: 31 }
 ];
 
-friends.reduce((totalYear, eachAge) => {
-  return (addFriendsAge = totalYear + eachAge.age);
+const addFriendsAge = friends.reduce((totalYear, eachFriend) => {
+  return totalYear + eachFriend.age;
 }, 0);
 
 console.log(addFriendsAge);
@@ -28,8 +28,8 @@ console.log(addFriendsAge);
 
 Short explanation...
 When we call reduce() we start from 0 (try changing 0 to 100).
-The first time our function is called, totalYear (or accumulator) will have the value of 0 and eachAge 30.
-The return of our function is a new variable (addFriendsAge) with the sum of all ages.
+The first time our function is called, totalYear (or accumulator) will have the value of 0 and eachFriend.age 30.
+The return of our function is the running total, and `reduce()` itself returns the final accumulated value, which we assign to `addFriendsAge`.
 
 One comment about `return`.
 If we are returning in one line we can do...

01_0_starting.md

@@ -1,9 +1,9 @@
 # First steps with React
 
 ## Trying React online
-You can try `React online` through any of the major JS "sandboxes" or "playgrounds". I´m going to use [jsfiddle](https://jsfiddle.net), but, feel free to employ your favorite one. *PS*: Another great service is [codesandbox](https://codesandbox.io/) which allows you to download a compressed file with all the assets and code to run it locally once you are done.
+You can try `React online` through any of the major JS "sandboxes" or "playgrounds". I'm going to use [jsfiddle](https://jsfiddle.net), but, feel free to employ your favorite one. *PS*: Another great service is [codesandbox](https://codesandbox.io/) which allows you to download a compressed file with all the assets and code to run it locally once you are done.
 
-*Note:* Remember you can also include the path (relative if your are working locally or absolute/CDN) to `React` and `ReactDOM` using the `src attribute of the <script> tag` which, basically, is what *jsfiddle* does when we add both libraries. 
+*Note:* Remember you can also include the path (relative if you are working locally or absolute/CDN) to `React` and `ReactDOM` using the `src attribute of the <script> tag` which, basically, is what *jsfiddle* does when we add both libraries. 
 
 ---
 
@@ -77,7 +77,7 @@ root.insertAdjacentHTML('beforeend', app)
 ```
 
 
-Don´t worry too much about what´s going on! We will see it in detail during this and the upcoming lessons. For the moment, just remember that you can use `React + ReactDOM` with...
+Don't worry too much about what's going on! We will see it in detail during this and the upcoming lessons. For the moment, just remember that you can use `React + ReactDOM` with...
 * `<script>` tag: locally/externally
 * Node and npm
 
@@ -97,7 +97,7 @@ CMD: C:\practice
 create-react-app myapp
 ```
 
-Enter to your app folder and let´s start cleaning...
+Enter to your app folder and let's start cleaning...
 
 Delete...
 1. src/App.css