From ad4b6202783121b3cf040e4de332a1309da3e4b5 Mon Sep 17 00:00:00 2001
From: Al Diaz <mypersonalwebsite@outlook.com>
Date: Fri, 8 May 2026 17:28:13 -0700
Subject: [PATCH 1/4] Lessons cleanup: grammar, factual accuracy, code bugs,
 hygiene
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Lessons (00_*–12_*):

- Grammar pass across all lessons: Spanish-calque "if not, ..." rewritten
  to "but rather, ...", "in deep" → "in depth", "Programing" → "Programming",
  "cristal" → "crystal", "componenDidMount" → "componentDidMount",
  "patten" → "pattern", "thorugh" → "through", "advice" → "advise",
  "you/your", "an example/an particularly", "ouput/outpout" → "output",
  "remember you" → "remind you", "What is Destructure" → "Destructuring",
  "Name export" → "Named export", and many similar typo/copy-edit fixes.

- 06_lifecycle-events.md: replaced the conflated single "Order of execution"
  list with three phases — Mounting, Updating, Unmounting. Removed
  componentWillUnmount from the deprecated list (it is not deprecated) and
  renamed the deprecated entries to their UNSAFE_* form.

- 02_0_components.md: replaced the "functional components perform better"
  claim with the real reasons to prefer them (hooks API, no this-binding,
  less boilerplate, easier composition). Switched the naming guidance to
  PascalCase / camelCase. Closed unclosed JSX tags in the Composition
  example. Added missing `import React from 'react'` to the HOC example.

- 02_1_props.md: copy state before sorting (`[...this.state.users].sort(...)`)
  to avoid mutating it; wrapped the `<li>` map output in a `<ul>`; added a
  modern-React note about preferring componentDidUpdate / useEffect over
  the setState callback.

- 03_local-state.md: clarified setState shallow merge with a nested-object
  example; rewrote the bind(null, ...) explanation to cover strict-mode
  this and the lexically-bound class field arrow function.

- 01_1_elements.md: corrected createElement signature to variadic children;
  rewrote "object representation of a DOM node" to cover components too;
  declared HelloWorld with const.

- 05_controlled-components.md: clarified that the form-fields-in-URL
  behavior only happens with method="GET"; POST puts them in the body.

- 08_redux.md: distinguished currying from partial application; fixed the
  count of nested functions in the example note; added `compose` to the
  `redux` import where the snippet referenced it; addToTotal now uses its
  `amount` argument (was hardcoded to 10); functional App now returns its
  JSX (was a no-return statement body); added a note clarifying that the
  duplication-on-dispatch is intentional for the demo, not how a real
  reducer should be written; moved .env guidance to the project root and
  recommended excluding it from git.

- 09_packages.md: rewrote the contradictory PropTypes "we should not /
  we can choose" sentence; added the missing `import axios from 'axios'`;
  fixed the bogus `type: FETCH_WEATHER` to FETCH_COMMENTS; added a heads-up
  that redux-promise is archived and pointing to redux-thunk / Redux Toolkit.

- 11_webpack.md: added missing comma in splitChunks cacheGroups vendor;
  prefere → orderPreference (real express-static-gzip option name);
  fixed `srcimages/` and `'.images/...'` to `src/images/` and './images/';
  '@babel/react' → '@babel/preset-react' for consistency with .babelrc;
  dropped the unused `App` from the './app' import; promoted "##From..."
  to a real heading; misc typos (webpackHotMiddleware, npm start,
  Standardization, configuration, within, etc.).

- 00_3_intro_es2015.md: declared addFriendsAge with const so the reduce
  example actually works in strict mode (was an implicit-global).

Repository hygiene:

- README.md: removed dead Greenkeeper badge; added a grouped Table of
  Contents linking to every lesson (Intro / Getting started / Components
  & data / Ecosystem); rewrote the Pre-requisites paragraph as a clear
  bulleted list of the JS knowledge expected before starting.

- 00_1_intro_JS.md: appended two new sections (Primitive and reference
  types; Coercion) inlined from the standalone notesToPlace files.

- Deleted notesToPlace.md and notesToPlace_primitive-and-reference-types.md
  (content moved into 00_1_intro_JS.md).

- Deleted .whitesource and greenkeeper.json: Greenkeeper shut down in 2020,
  and greenkeeper.json referenced example folders that no longer exist.

- .gitignore: changed `/node_modules` to `node_modules/` so it applies
  recursively to every example sub-project; collapsed the .env.local /
  .env.development.local list to a single `.env.*` glob with
  `!.env.example` allow-list; added `dist/` to the build output rule.

- LICENSE: updated `Copyright (c) 2018  React` to `2018-2026 Al Diaz`.
---
 .gitignore                                    |  17 ++-
 .whitesource                                  |   8 --
 00_0_intro.md                                 |  14 +-
 00_1_intro_JS.md                              | 130 +++++++++++++++++-
 00_2_intro_JS-patterns.md                     |   8 +-
 00_3_intro_es2015.md                          |  10 +-
 01_0_starting.md                              |   2 +-
 01_1_elements.md                              |  14 +-
 01_2_JS-module-systems.md                     |   8 +-
 02_0_components.md                            |  26 ++--
 02_1_props.md                                 |  29 ++--
 03_local-state.md                             |  16 +--
 05_controlled-components.md                   |  18 +--
 06_lifecycle-events.md                        |  42 +++---
 07_conditional-rendering.md                   |   8 +-
 08_redux.md                                   |  40 +++---
 09_packages.md                                |  20 +--
 10_unit-tests.md                              |   4 +-
 11_webpack.md                                 |  43 +++---
 12_full-client-app.md                         |   2 +-
 LICENSE                                       |   2 +-
 README.md                                     |  57 ++++++--
 greenkeeper.json                              |  19 ---
 notesToPlace.md                               |  24 ----
 notesToPlace_primitive-and-reference-types.md |  89 ------------
 25 files changed, 348 insertions(+), 302 deletions(-)
 delete mode 100644 .whitesource
 delete mode 100644 greenkeeper.json
 delete mode 100644 notesToPlace.md
 delete mode 100644 notesToPlace_primitive-and-reference-types.md

diff --git a/.gitignore b/.gitignore
index 77bdad21..55e42602 100644
--- a/.gitignore
+++ b/.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
diff --git a/.whitesource b/.whitesource
deleted file mode 100644
index f0569521..00000000
--- a/.whitesource
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "generalSettings": {
-    "shouldScanRepo": true
-  },
-  "checkRunSettings": {
-    "vulnerableCheckRunConclusionLevel": "failure"
-  }
-}
\ No newline at end of file
diff --git a/00_0_intro.md b/00_0_intro.md
index 6d39ae8d..3c091ea1 100644
--- a/00_0_intro.md
+++ b/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.
+More than 5 years have passed since React´s official release (*Facebook - March 2013*); nevertheless, the community interest and adoption are in constant growth.
 
 ---
 
@@ -34,7 +34,7 @@ No matter the appliance you pick to support your work (here´s an elder AngularJ
 * 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,7 +55,7 @@ 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).
 
@@ -63,14 +63,14 @@ Later, we are going to address `routing` and how to keep *UI and URL in sync* wi
 
 ### 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)
 
 ---
 
diff --git a/00_1_intro_JS.md b/00_1_intro_JS.md
index c093d225..714ca400 100644
--- a/00_1_intro_JS.md
+++ b/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:
 
@@ -28,11 +28,133 @@ salutation();
      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.
+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.
\ No newline at end of file
+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
+```
\ No newline at end of file
diff --git a/00_2_intro_JS-patterns.md b/00_2_intro_JS-patterns.md
index e841bbeb..15c2db2b 100644
--- a/00_2_intro_JS-patterns.md
+++ b/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
diff --git a/00_3_intro_es2015.md b/00_3_intro_es2015.md
index a3adea03..f2173b67 100644
--- a/00_3_intro_es2015.md
+++ b/00_3_intro_es2015.md
@@ -6,7 +6,7 @@
 
 `myArray.reduce(callback[, initialValue])`
 
-It takes a collection of data and reduce it to a single value.
+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...
diff --git a/01_0_starting.md b/01_0_starting.md
index d8dc6772..42319d44 100644
--- a/01_0_starting.md
+++ b/01_0_starting.md
@@ -3,7 +3,7 @@
 ## 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.
 
-*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. 
 
 ---
 
diff --git a/01_1_elements.md b/01_1_elements.md
index 19b900d5..9f12d264 100644
--- a/01_1_elements.md
+++ b/01_1_elements.md
@@ -2,12 +2,11 @@
 
 **createElement()**
 
-Returns a JavaScript object
-It takes 3 arguments:
+Returns a JavaScript object that describes what should be rendered. Its signature is `React.createElement(type, [props], [...children])`:
 
-1. element
-2. attributes
-3. content or element´s children
+1. `type` — a string for a DOM element (e.g. `'div'`) or a reference to a React component
+2. `props` — an object of props/attributes (or `null` if none)
+3. `...children` — zero or more child elements/strings (variadic: you can pass as many as you need)
 
 Example:
 
@@ -96,8 +95,7 @@ File: `public/index.html`
 ### Elements
 
 As we saw previously, we create elements through `React.createElement()`.
-An element is an object that describes what we want to show in the screen.
-Well, it is (in fact) an object representation of a DOM node.
+An element is a plain JavaScript object that describes what we want to show on the screen — either a DOM node (when `type` is a string like `'div'`) or another React component (when `type` is a component reference). Elements are immutable and cheap to create; React uses them as the input to its reconciliation algorithm.
 
 ```javascript
 const element = <div>Im an element!</div>;
@@ -112,7 +110,7 @@ const element = React.createElement(
   React.createElement('strong', null, 'Hello world!')
 );
 
-HelloWorld = () => element;
+const HelloWorld = () => element;
 
 ReactDOM.render(<HelloWorld />, document.getElementById('root'));
 ```
diff --git a/01_2_JS-module-systems.md b/01_2_JS-module-systems.md
index c40030e7..145bc197 100644
--- a/01_2_JS-module-systems.md
+++ b/01_2_JS-module-systems.md
@@ -1,6 +1,6 @@
 ## JS Module Systems
 
-We are going to review `Modules Systems` in deep in a future lesson, however, if you are totally new to `Node.js` and `JS` in general... Having a vague idea of what´re we doing with "import/export" will make things easier.
+We are going to review `Module Systems` in depth in a future lesson, however, if you are totally new to `Node.js` and `JS` in general... Having a vague idea of what we´re doing with "import/export" will make things easier.
 
 So... Let´s forget about `React` for a moment and create some `vanilla JS` files:
 
@@ -47,7 +47,7 @@ You can see that we are separating concerns or "parts" of our code:
 
 This makes your code modular, understandable and easy to update and reuse.
 
-You can see that we have the following pipeline: `render` imports both, data and functionality and it renders through the functionality or logic (aka, `controller`) the formatted piece of `data`. We can say there isn´t a strict relation between data and render if not, a connection between some kind of middleware interpreted by controller. Don´t worry! We will come back to this.
+You can see that we have the following pipeline: `render` imports both, data and functionality and it renders through the functionality or logic (aka, `controller`) the formatted piece of `data`. We can say there isn´t a strict relation between data and render but rather, a connection between some kind of middleware interpreted by controller. Don´t worry! We will come back to this.
 
 If you try to execute our tiny app with `node render`, you will be prompted with the following error:
 
@@ -61,7 +61,7 @@ C:\test\render.js:1
 
 **What´s going on...?** Node uses `CommonJS` but we are utilizing `ES2015 modules` to "deal with our modules" (files).
 
-There are several ways of solving this issue. Since we will resume this topic at future, I´m picking the easiest one: `esm`
+There are several ways of solving this issue. Since we will resume this topic in the future, I´m picking the easiest one: `esm`
 
 1. Let´s init our project: `npm init -y`
 2. Install `esm`: `npm install --save esm`
@@ -97,7 +97,7 @@ You can destructure as we did with `{ sayHi, showHobbies }` resulting in `import
 So, technically there are 2 ways of exporting...
 1. `Default export` which allows you to set any placeholder. For example, we `export default data` and import like this: `import whatever from './model';`
 
-2. Name export where you import by the name of the variable. In this case, if we `export sayHi` and we want to change the placeholder, we have to do...
+2. Named export where you import by the name of the variable. In this case, if we `export sayHi` and we want to change the placeholder, we have to do...
 a. `import { sayHi as otherThing } from './controller';`
 Here you will call the function `otherThing()`.
 b. `import * as functions from './controller';`
diff --git a/02_0_components.md b/02_0_components.md
index 0765c1eb..79dc57f6 100644
--- a/02_0_components.md
+++ b/02_0_components.md
@@ -4,11 +4,11 @@ We use components to split our UI into reusable "blocks" that can receive `props
 
 *Note*: Remember that `props` are inputs to Components. We pass them from parent to child. This is the *unidirectional data flow* pattern.
 
-You should name your component following the *CamelCase* (also called *UpperCamelCase*) convention. 
+You should name your component following the *PascalCase* (sometimes called *UpperCamelCase*) convention — i.e. each word starts with a capital, including the first one.
 
-Example: `<ListOfRecords />`; use *lowerCamelCase* for `DOM elements`, `HOC`/`HOF` and `methods` in general.
+Example: `<ListOfRecords />`; use *camelCase* (sometimes called *lowerCamelCase*) for `DOM elements`, `HOC`/`HOF` and `methods` in general.
 
-*Note:* Some people also name *functional components* following the *lowerCamelCase* standard, but, once they import them they rename them switching to *CamelCase*. They keep the filename with *CamelCase*
+*Note:* Some people also name *functional components* following the *camelCase* standard, but, once they import them they rename them switching to *PascalCase*. They keep the filename with *PascalCase*
 
 Example:
 
@@ -30,8 +30,8 @@ const Items = () => <Item />
 In `react` we have *2 types of Components*:
 
 In relation to `paradigm`...
-1. Class components (**pseudo** Object Oriented Programing)
-2. Functional components (Functional Programing)
+1. Class components (**pseudo** Object Oriented Programming)
+2. Functional components (Functional Programming)
 
 In relation to internal or `local state`
 1. Stateful components
@@ -93,7 +93,7 @@ const App = () => (
 export default App;
 ```
 
-**Functional components** *perform better* than class components and, after the release of `Hooks`, in "90%" of the cases you should go with this approach.
+**Functional components** are the recommended default for new code since the release of `Hooks` (`React 16.8`). The reasons are not raw performance — the React team has explicitly said function and class components have similar runtime cost — but rather: less boilerplate, no `this`-binding edge cases, easier composition, and access to the `Hooks` API (`useState`, `useEffect`, `useMemo`, custom hooks, etc.).
 
 ---
 
@@ -119,7 +119,7 @@ return <div>1</div><div>2</div>
 ... you will see the following error: 
 `Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?`.
 
-This is happening because React expects just one root element (and within it, zero or multiple adjacent child).
+This is happening because React expects just one root element (and within it, zero or multiple adjacent children).
 
 There are several ways to fix it...
 
@@ -133,7 +133,7 @@ return <div><div>1</div><div>2</div></div>
 
     Notes:
    * This HOC will just wrap our component.
-   * Children will be "whatever" we pass between yhe opening and closing tags> `<Wrapper>...</Wrapper>Wrapper>`
+   * Children will be "whatever" we pass between the opening and closing tags: `<Wrapper>...</Wrapper>`
 ```javascript
 const Wrapper = props => props.children;
 
@@ -149,11 +149,13 @@ return <React.Fragment><div>1</div><div>2</div></React.Fragment>
 
 In the solution #2 we used a **HOC** 
 
-If you checked our `intro`, an particularly, the appendix *Higher Order Functions*, probably you can guess what *HOC* refers to: *a component that takes another component as parameter and returns a new component*.
+If you checked our `intro`, and particularly, the appendix *Higher Order Functions*, probably you can guess what *HOC* refers to: *a component that takes another component as parameter and returns a new component*.
 
 There's another way of creating and utilizing a *HOC*: *a regular JS function that takes a component as parameter and returns a functional component*.
 
 ```javascript
+import React from 'react';
+
 const App = props => {
   return <div>Hi!</div>
 }
@@ -193,8 +195,8 @@ const App = () => (
   <div className="App">
     <h1>Hello World!</h1>
     <IntroComponent />
-    <LanguageComponent default="en">
-    <ContactComponent>
+    <LanguageComponent default="en" />
+    <ContactComponent />
   </div>
 );
 ```
@@ -208,4 +210,4 @@ Example:
 
 Nevertheless, we are not going to dissect the door-lock until we have screws, metal, plastic and paint... Even when (for example) screws are going to be used in several elements.
 
-Think in elements as words and components as phrases.
\ No newline at end of file
+Think of elements as words and components as phrases.
\ No newline at end of file
diff --git a/02_1_props.md b/02_1_props.md
index 5923b76d..f9c213a6 100644
--- a/02_1_props.md
+++ b/02_1_props.md
@@ -70,7 +70,7 @@ export default App;
 ![React DevTools: Checking props](images/map-array-warning.png)
 
 What´s going on...?
-When we are looping an array, each child (no matter the element) must have a **UNIQUE key** property which will allow React to preserve the Component>DOM relation used in the reconciliation process, letting React know which element changed. Having a key is a stable way of referring to x-element (see it ad your Passport ID).
+When we are looping an array, each child (no matter the element) must have a **UNIQUE key** property which will allow React to preserve the Component>DOM relation used in the reconciliation process, letting React know which element changed. Having a key is a stable way of referring to x-element (see it as your Passport ID).
 
 **We can "fix" this adding a key to the element**. For our example, we are going to use the `item index` since we don´t have other "stable value" (I don´t recommend using it in a real project).
 
@@ -89,8 +89,8 @@ import React, { Component } from 'react';
 
 const Child = props => (
   <div>
-    <div>
-      I´m receiving...{' '}
+    <div>I´m receiving...</div>
+    <ul>
       {props.onShowingHello.map((eachGreeting, index) => (
         <li key={index}>
           <input
@@ -102,7 +102,7 @@ const Child = props => (
           <label htmlFor={eachGreeting}>{eachGreeting}</label>
         </li>
       ))}
-    </div>
+    </ul>
   </div>
 );
 
@@ -231,7 +231,7 @@ export default App;
 **src/Child.js**
 If we are using a Functional Component we will access to props through `props`, for example, `props.onPassingMessage`
 
-If we are using a Class Component, thorugh `this.props.onPassingMessage`
+If we are using a Class Component, through `this.props.onPassingMessage`
 
 ##### Dynamic values passed as props and rendering
 
@@ -243,7 +243,7 @@ state = {
 };
 ```
 
-However, in practice, usually our data is going to be dynamic. Think in an input where the user introduce some value (for example message) which is going to be passed down as prop. We would start with an empty string (`message: ''`), then a Controlled Form would update the value of the state property (`message: 'Hola'`) what would result in... `I´m receiving... Hola`
+However, in practice, usually our data is going to be dynamic. Think of an input where the user introduces some value (for example message) which is going to be passed down as prop. We would start with an empty string (`message: ''`), then a Controlled Form would update the value of the state property (`message: 'Hola'`) what would result in... `I´m receiving... Hola`
 But, until your parent Component pass "something" down, different than the default empty string, the Child one will render: `I´m receiving...`
 Not a great user experience... I´m rendering... Nothing...?
 
@@ -277,7 +277,7 @@ One of the most common cases is...
 
 4. You know how are you going to display or show the data (and local state related views if they are needed). Example: We are going to show all the users including (in our render) just `username` and `email`.
 
-5. You know related functionality. Example: We are going to sort by id DESC (you also know if you are going to use third-party functionality; in this case, `sort-by` package); so from 10 to 1.
+5. You know related functionality. Example: We are going to sort by id DESC (you also know if you are going to use third-party functionality; in this case, the `sort-by` package); so from 10 to 1.
 
 Example:
 
@@ -303,7 +303,10 @@ class App extends Component {
   }
 
   renderUsers = () => {
-    return this.state.users.sort(sortBy('-id')).map(user => {
+    // Important: copy the array before sorting. `Array.prototype.sort()` sorts
+    // in place, and mutating `this.state.users` directly would bypass `setState`
+    // and break React's change detection.
+    return [...this.state.users].sort(sortBy('-id')).map(user => {
       return (
         <li key={user.id}>{`Username: ${user.username}
         Email: ${user.email}`}</li>
@@ -377,12 +380,14 @@ Of course, you can move each component to a new file and make the proper `import
 
 #### Props and document.title
 
-If you go to your public (or dist) folder, the one where you have the boilerplate `index.html`, you will see that CRA set a "static title" for your App: `<title>React App</title>`. With one screen (in this case the root one) you could replace and set the title there without bigger issues; however, as you application starts to scale (or grow) a pre-harcoded title will not always satisfy your needs.
+If you go to your public (or dist) folder, the one where you have the boilerplate `index.html`, you will see that CRA set a "static title" for your App: `<title>React App</title>`. With one screen (in this case the root one) you could replace and set the title there without bigger issues; however, as your application starts to scale (or grow) a pre-hardcoded title will not always satisfy your needs.
 Later, we will try a more complex way of dealing with `HTML header´s tags`, but for the moment, we can add some code to our `componentDidMount()` lifecycle method utilizing as well, the `componentDidUpdate()`.
 
 We have a list of users where we are rendering just emails; so, we can set a title like: `E-mail list: x results` where x is a dynamic number.
 
-One more thing... Even when we did not see (yet) the Local State lesson, we are going to double the bet and not only use the setState() async method if not, also, take advantage of its second parameter or argument: a `callback` or a function to execute once the state property is updated.
+One more thing... Even when we did not see (yet) the Local State lesson, we are going to double the bet and not only use the setState() async method but also take advantage of its second parameter or argument: a `callback` or a function to execute once the state property is updated.
+
+*Note (modern React):* The `setState` callback is still supported in class components, but for new code the React docs recommend reacting to a state change in `componentDidUpdate` (class components) or `useEffect` (function components / hooks) instead. Both run after the DOM has been updated and are easier to reason about.
 
 ```javascript
 componentDidMount() {
@@ -396,7 +401,7 @@ componentDidMount() {
 }
 ```
 
-Open you Web Developer Console, inspect the DOM and... Yes... You will see the proper title.
+Open your Web Developer Console, inspect the DOM and... Yes... You will see the proper title.
 
 ```html
 <title>E-mail list: 10 results</title>
@@ -418,7 +423,7 @@ We use a conditional to be sure that, if other state property is updated or prop
 <!-- TODO:
 Add more about this... Composition... PureComponent...
 Im using local state before explaining it... Check if I should move to other page
-->
+-->
 
 <!-- TODO:
 Talk about callbacks
diff --git a/03_local-state.md b/03_local-state.md
index 3dd98a51..6158408b 100644
--- a/03_local-state.md
+++ b/03_local-state.md
@@ -11,7 +11,7 @@ Remember: our `state` defines the UI of our App. Any "change" on the update will
 
 We set the state through the state class property and access to it via: this.state.theSelectedProperty.
 
-We **NEVER** modify the state directly, if not, with `setState()`
+We **NEVER** modify the state directly, but rather, with `setState()`
 
 **REALLY Wrong:** 
 
@@ -109,11 +109,11 @@ componentDidMount() {
 }
 ```
 
-Note: `setState()` will merge the object that we pass in into the current state.
+Note: `setState()` will merge the object that we pass in into the current state. The merge is **shallow** — it only merges the top level. If you have a nested object in state and only pass one of its inner keys, the rest of the nested object is replaced, not merged. For nested updates you must spread the existing nested object yourself: `this.setState({ user: { ...this.state.user, name: 'Wendy' } })`.
 BTW, I´m using the lifecycle `componentDidMount()` to force a change in the state without any user interaction and just for demo purposes. In a *tiny app* where a call to an API is done in this "stage", a method or a callback to that API call could set the new data for the state properties through `this.setState()`.
 
 
-If the "new state" depends in the "previous one" (like `booleans` or `adding/subtracting`)
+If the "new state" depends on the "previous one" (like `booleans` or `adding/subtracting`)
 
 ```javascript
 this.setState(prevState => {
@@ -215,7 +215,7 @@ With...
 <button onClick={this.deleteFriend.bind(null, 'Wendy')}>Delete friend!</button>
 ```
 
-In this example, the `new function` that `.bind()` returns will have access to the `global context` (since we are using `null`) and will receive `'Wendy'` as parameter or argument.
+In this example, the `new function` that `.bind()` returns has its `this` set to whatever the first argument was — `null` in our case. Two caveats: in strict mode (which ES modules use by default) `this` ends up as `undefined`, not the global object, and in this particular code `deleteFriend` is defined as a class field arrow function, so `this` is already lexically bound to the component and the value passed to `.bind()` is irrelevant. We are really only using `bind` for its second job: pre-filling `'Wendy'` as the first argument.
 
 ... there´re others but these two are the most used ones.
 
@@ -297,7 +297,7 @@ const newFriend = new Friend();
 console.log(newFriend.name);
 ```
 
-I you review the `transpiled code` you will notice that `Babel` will set the constructor for us.
+If you review the `transpiled code` you will notice that `Babel` will set the constructor for us.
 
 For more information about this and other changes to the spec, check: [Class field declarations for JavaScript](https://github.com/tc39/proposal-class-fields)
 
@@ -319,9 +319,9 @@ class App extends Component {
 ### Lifting state
 
 Sometimes, you will have more than one component trying to access to the same "piece of data".
-If you know `redux` or `react context API` (among others) forget them for a moment. Think about hard-coded data (as initial properties state) or an user supplying info through a form. Yo don´t need to make a long persistence... Just share that data between components.
+If you know `redux` or `react context API` (among others) forget them for a moment. Think about hard-coded data (as initial properties state) or a user supplying info through a form. You don´t need to make a long persistence... Just share that data between components.
 
-If there´s no deeply nested need (ComponentA -> ComponentB -> ComponentC -> CompnentD) a good approach would be "host" that state on the nearest parent.
+If there´s no deeply nested need (ComponentA -> ComponentB -> ComponentC -> ComponentD) a good approach would be to "host" that state on the nearest parent.
 Example:
 
 ```javascript
@@ -344,7 +344,7 @@ const ListOfBook = props => {
 const RandomBook = props => {
   return (
     <div>
-      <h2>Random book (strig object)</h2>
+      <h2>Random book (string object)</h2>
       <div>
         {props &&
           JSON.stringify(props.books[Math.floor(Math.random() * 3 + 0)])}
diff --git a/05_controlled-components.md b/05_controlled-components.md
index 0081f08b..3f35a6f8 100644
--- a/05_controlled-components.md
+++ b/05_controlled-components.md
@@ -28,7 +28,7 @@ export default App;
 ```
 
 You can use React Developer Tools to check the state of your Component.
-Open your browser Developer Tools, click in React tab and select your Component, in this case <App />
+Open your browser Developer Tools, click on the React tab and select your Component, in this case <App />
 At the right you will find:
 
 * props
@@ -56,7 +56,7 @@ Same example but using the ternary operator:
 </div>
 ```
 
-At future we will other ways of `conditional rendering`.
+In the future we will see other ways of `conditional rendering`.
 
 Note: The same criteria can be used to enable/disable "elements".
 
@@ -65,7 +65,7 @@ Before proceeding, you should know that `Controlled Components` refer to:
 * inputs
 * selects
 * textareas
-  ... all of them, have their own state which is based on the user´s action (the information he provides, the option that he selects, the checkbox that he checks, et).
+  ... all of them, have their own state which is based on the user´s action (the information he provides, the option that he selects, the checkbox that he checks, etc.).
 
 Selects: To avoid the warning, `` Warning: Use the`defaultValue`or`value`props on <select> instead of setting `selected`on <option>. ``, we use the attribute value on select instead of the selected one on the particular option. Remember that there´s a strict relation between state and element, so if you want to start showing (aka, selecting) a particular option, you should initialize your state with it.
 
@@ -150,7 +150,7 @@ export default App;
 #### .map() and key attribute
 
 Before jumping to other topic, let´s address one possible issue in our code setting a context.
-Daily, we interact with lists that filters (aka, update) its composition or results. Example: Amazon searcher and suggested keys/terms/products. However, as you probably noticed, there´s "some kind of delay" that allows you to receive suggestions per words or terms and not per letters.
+Daily, we interact with lists that filter (aka, update) their composition or results. Example: Amazon search and suggested keys/terms/products. However, as you probably noticed, there´s "some kind of delay" that allows you to receive suggestions per words or terms and not per letters.
 
 Let´s modify our previous example.
 Before closing the div, add...
@@ -176,7 +176,7 @@ For more information (also Throttling): https://www.npmjs.com/package/react-thro
 1. Install `react-throttle` package
 2. Destructure and import Debounce
 3. Add the Debounce component with the proper configuration wrapping the input
-   (... and remover `value={yourName}` from your input, if not, it will not work. Don´t worry, Debounce will take care of showing the proper data/value)
+   (... and remove `value={yourName}` from your input, if not, it will not work. Don´t worry, Debounce will take care of showing the proper data/value)
 
 ```javascript
 <Debounce time="400" handler="onChange">
@@ -192,9 +192,9 @@ Try now to type your name... A lot better, no...?
 
 #### Destructuring
 
-In React you will use destructuring (ES6) a lot. Even when it´s not a functional requisite, it makes your code look cleaner and it follows the Community´s standards.
+In React you will use destructuring (ES6) a lot. Even when it´s not a functional requirement, it makes your code look cleaner and it follows the Community´s standards.
 
-So... What is Destructure...?
+So... What is Destructuring...?
 Just a convenient way of pulling out values from object and array objects.
 
 Examples:
@@ -216,7 +216,7 @@ Then, use yourName or yourAge instead of this.props.yourName or this.props.yourA
 
 ##### One note about working with forms
 
-By default, when you submit a form, the fields (name and value) are serialized in the URL:
+By default, an HTML form uses `method="GET"`, and a GET submission serializes the fields (name and value) into the URL as query string parameters. (With `method="POST"` the fields go in the request body instead, not the URL.) The form in our snippet does not specify a method, so it falls back to GET — which is why the example URL contains the field names and values.
 
 Example:
 http://localhost:3000/?name=Peter&lastName=Pan&age=30
@@ -414,6 +414,6 @@ class App extends Component {
 export default App;
 ```
 
-Probably, uncontrolled forms elements will remember you the `old vanilla JavaScript or jQuery way` of grabbing and interacting with data: someone provides information and through a particular `event` we collect and process that data.
+Probably, uncontrolled forms elements will remind you of the `old vanilla JavaScript or jQuery way` of grabbing and interacting with data: someone provides information and through a particular `event` we collect and process that data.
 
 So, if you are just planning to pull data from "elements" and submit it... Well, you could technically use "uncontrolled components" without major damage. Remind that you can also utilize "controlled" ones and take advantage of real-time elements validation, UI or screen for particular states, among others features.
diff --git a/06_lifecycle-events.md b/06_lifecycle-events.md
index 4c1591f0..3796c361 100644
--- a/06_lifecycle-events.md
+++ b/06_lifecycle-events.md
@@ -2,24 +2,34 @@
 
 These are methods that allow us to execute certain functionality during the Component´s life-cycle (this is for `Class-based Components`. We will see as well `hooks` which are the "equivalent" for `Functional Components`). 
 
-**Order of execution:**
+A Component goes through three phases — **Mounting**, **Updating** and **Unmounting** — and the methods called in each phase are different. The lists below are split that way; do not assume the methods always run in the same order across phases.
+
+**Mounting** (the very first time the Component is inserted into the DOM):
 
 1. `constructor(props)` > Initialization
-2. `getDerivedStateFromProps(props, state)` > To update state based on changes on props
-3. `shouldComponentUpdate(nextProps, nextState)` > We can stop or prevent unnecessary re-renders improving performance.  
-4. `render()` > Logic and return. It will render the particular component and its child. 
-5. `getSnapshotBeforeUpdate(prevProps, prevState)` > Returns a snapshot (object).
-6. `componenDidMount()` > Here's where we cause or produce side-effects like fetching data (HTTP request)
-7. `componentDidUpdate(prevProps, prevState, snapshot)` > Here's where we cause or produce side-effects like fetching data (HTTP request)
-
-**Deprecated life-cycles**
-
-1. `componentWillMount()`: before the Component is inserted into the DOM
-2. `componentWillReceiveProps()`: whenever the component is going to receive NEW props
-3. `componentWillUnmount()`: before the Component is removed from the DOM
-   
-<!-- Missing replacements, UNSAFE...
-https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html  -->
+2. `static getDerivedStateFromProps(props, state)` > To update state based on changes on props
+3. `render()` > Logic and return. It will render the particular component and its children.
+4. `componentDidMount()` > Here's where we cause or produce side-effects like fetching data (HTTP request)
+
+**Updating** (every render after the first one — triggered by new props, `setState()`, or `forceUpdate()`):
+
+1. `static getDerivedStateFromProps(props, state)`
+2. `shouldComponentUpdate(nextProps, nextState)` > We can stop or prevent unnecessary re-renders improving performance.
+3. `render()`
+4. `getSnapshotBeforeUpdate(prevProps, prevState)` > Returns a snapshot (object) handed to `componentDidUpdate` as its third argument.
+5. `componentDidUpdate(prevProps, prevState, snapshot)` > Side-effects in response to a prop/state change (e.g. fetching data when the URL params change). Always guard with a comparison or you will loop.
+
+**Unmounting** (right before the Component is removed from the DOM):
+
+1. `componentWillUnmount()` > Clean up: cancel timers, unsubscribe, abort in-flight requests, etc.
+
+**Deprecated / renamed `UNSAFE_*` life-cycles** (still callable, but they trigger a warning in `StrictMode` and were renamed because they are not safe under React's concurrent rendering):
+
+1. `componentWillMount()` → `UNSAFE_componentWillMount()`: before the Component is inserted into the DOM
+2. `componentWillReceiveProps()` → `UNSAFE_componentWillReceiveProps()`: whenever the component is going to receive NEW props
+3. `componentWillUpdate()` → `UNSAFE_componentWillUpdate()`: just before re-rendering
+
+Note: `componentWillUnmount()` was **not** deprecated — it is still the standard cleanup hook in class components. The blog post that announced these changes is the canonical reference: https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html
 
 ```
 App > constructor()
diff --git a/07_conditional-rendering.md b/07_conditional-rendering.md
index bcaa3fc2..425198da 100644
--- a/07_conditional-rendering.md
+++ b/07_conditional-rendering.md
@@ -21,7 +21,7 @@ class App extends Component {
 
     let jSx;
     if (conditionIs) {
-      jSx = `I've a cristal clear state... I'm ${conditionIs}`;
+      jSx = `I've a crystal clear state... I'm ${conditionIs}`;
     } else {
       jSx = `I'm ${conditionIs}`;
     }
@@ -42,7 +42,7 @@ render() {
   return (
     <div>
       {conditionIs
-        ? `I've a cristal clear state... I'm ${conditionIs}`
+        ? `I've a crystal clear state... I'm ${conditionIs}`
         : `I'm ${conditionIs}`}
     </div>
   );
@@ -57,7 +57,7 @@ render() {
   const { conditionIs } = this.state;
 
   let jSx = conditionIs
-    ? `I've a cristal clear state... I'm ${conditionIs}`
+    ? `I've a crystal clear state... I'm ${conditionIs}`
     : `I'm ${conditionIs}`;
 
   return <div>{jSx}</div>;
@@ -72,7 +72,7 @@ render() {
 
   return (
     <div>
-      {conditionIs && `I've a cristal clear state... I'm ${conditionIs}`}
+      {conditionIs && `I've a crystal clear state... I'm ${conditionIs}`}
     </div>
   );
 }
diff --git a/08_redux.md b/08_redux.md
index 386ff281..52376f3a 100644
--- a/08_redux.md
+++ b/08_redux.md
@@ -75,7 +75,7 @@ const ADD_TO_TOTAL = 'ADD_TO_TOTAL';
 
 const addToTotal = amount => ({
   type: ADD_TO_TOTAL,
-  amount: 10
+  amount
 });
 ```
 
@@ -117,7 +117,7 @@ export default (state = 0, action) => {
 
 ###### Root reducer
 
-`createStore(reducer, [enhancer)` takes a single reducer, so... If we need to pass more than one, we should create a `rootReducer`, a reducer that utilize composition ("combined reducers") to call more than one reducer.
+`createStore(reducer, [enhancer])` takes a single reducer, so... If we need to pass more than one, we should create a `rootReducer`, a reducer that utilizes composition ("combined reducers") to call more than one reducer.
 
 Example:
 
@@ -145,7 +145,7 @@ So for the previous reducers the shape of the store will be...
 }
 ```
 
-`createStore()` recives as second argument an enhancer. We can provide our `middlewares` using `applyMiddleware()`; this method accept multiple arguments (aka, middlewares)
+`createStore()` receives as second argument an enhancer. We can provide our `middlewares` using `applyMiddleware()`; this method accepts multiple arguments (aka, middlewares)
 
 ##### Store
 
@@ -160,7 +160,7 @@ import { BrowserRouter, Route } from 'react-router-dom';
 import ReactDOM from 'react-dom';
 import rootReducer from './reducers';
 import { Provider } from 'react-redux';
-import { createStore } from 'redux';
+import { createStore, compose } from 'redux';
 import App from './App';
 
 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
@@ -188,7 +188,7 @@ The `Store` has the following methods:
 
 <!-- TODO: add example for store.replaceReducer(reducer) --->
 
-IMPORTANT: In Redux (as in React or programming in general) you don´t duplicate data. Remember that you have `once Source of Truth`: the Store. Also, put special attention to the shape of the Store... Try to keep it as simple and shallow as you can obviating complex nested structures.
+IMPORTANT: In Redux (as in React or programming in general) you don´t duplicate data. Remember that you have `one Source of Truth`: the Store. Also, put special attention to the shape of the Store... Try to keep it as simple and shallow as you can obviating complex nested structures.
 
 ---
 
@@ -243,13 +243,13 @@ import Footer from '../../components/Footer/index.js';
 
 In big projects this can generate confusion. But, you have other option: use `'absolute paths'` instead of `'relative'`.
 
-For this, we are going to create an environment file:`src/.env`
+For this, we are going to create an environment file at the **project root**: `.env` (Create React App reads `.env` from the project root, not from `src/`).
 
 ```javascript
 NODE_PATH=src/
 ```
 
-Note: Check in your .gitignore that you are not excluding this file from versioning.
+Note about `.gitignore`: a `.env` file commonly contains secrets (API keys, tokens, database URLs), so by default you **should** exclude it from version control. The recommended pattern is to commit a `.env.example` file with placeholder values and keep the real `.env` out of git. The file in our example does not contain secrets — it only sets `NODE_PATH` — so committing it is harmless, but get into the habit of excluding `.env` so secrets cannot leak by accident later.
 
 Now, rather than using `../../components/Footer/index.js` we will use `./components/Footer/index.js` starting always from our `src/`
 
@@ -266,8 +266,8 @@ If we place our Components in different folders (let´s say that we move Homepag
 It allows us to dispatch actions and access to our Store from inside our components.
 For this, we use the Provider tag and the connect() method.
 
-* Provider wraps our application taking the store as prop, settings the store context and passing it down to child components.
-* Connect we can dispatch actions and access to specific parts of our state. It returns a `curried function`.
+* Provider wraps our application taking the store as prop, setting the store context and passing it down to child components.
+* With Connect we can dispatch actions and access specific parts of our state. It returns a `curried function`.
 
 ```javascript
 ...
@@ -325,9 +325,9 @@ Remember that you can `destructure`
 Example for **Functional Component**
 
 ```javascript
-const App = ({ comments }) => {
-  <div>{`Comment with id 1: ${JSON.stringify(comments[0])}`}</div>;
-};
+const App = ({ comments }) => (
+  <div>{`Comment with id 1: ${JSON.stringify(comments[0])}`}</div>
+);
 ```
 
 Note: Once you load the page, for a fraction of seconds you will see
@@ -346,7 +346,7 @@ Example:
 
 Until `this.props.comments[0]` is something (or, is different than `undefined`), we show the `'I am loading...'` message. It is not a must, but, it offers a better "contextual" interaction.
 
-<!-- TODO: Add `ownProps` fromn React Notes 7 -->
+<!-- TODO: Add `ownProps` from React Notes 7 -->
 
 Whether we use `export default connect(mapStateToProps, actions)(App);` (actions object) or `export default connect(mapStateToProps, mapDispatchToProps)(App);` (mapDispatchToProps method), `mapStateToProps` must be something. If we don´t need access to the store, just to `dispatch` we should set it as `null`
 Example: `export default connect(null, actions)(App);`
@@ -376,12 +376,16 @@ If you follow this approach, remember to remove `mapStateToProps`
 
 Allows us to bind dispatch() to our action creators before they hit the component.
 
-<!-- TODO: Add `mapDispatchToProps()` fromn React Notes 7 -->
+<!-- TODO: Add `mapDispatchToProps()` from React Notes 7 -->
 
 ---
 
-What is a `curried or partial app`...?
-It happens when we call a function without ALL its argument. The result will be a new function which will be waiting for the next argument.
+What is `currying`...?
+Currying is a transformation: a function that takes multiple arguments — `f(a, b, c)` — is rewritten as a chain of functions that each take exactly one argument: `f(a)(b)(c)`. Each call returns a new function waiting for the next argument, and the final call returns the result.
+
+It is closely related to, but **not the same as**, `partial application`. Partial application takes a function of N arguments and pre-fills some of them, returning a new function that takes the remaining ones — it does not require the underlying function to be one-argument-at-a-time.
+
+In React-Redux, `connect(mapStateToProps, mapDispatchToProps)(Component)` is a curried function: the first call returns a new function, which we then call with the component.
 
 Example:
 
@@ -422,7 +426,7 @@ console.log(addition(3));
 //4
 ```
 
-Note: We have 3 functions and we are returning 2 (take this as a general rule)
+Note: In this example we have 2 functions (the outer `a => ...` and the inner `b => ...`); the outer call returns the inner function, which when called returns the value.
 
 ---
 
@@ -710,6 +714,8 @@ case FETCH_COMMENTS:
 
 Using the same `Action`, dispatch. You can see the difference. Now, you are preserving the previous state appending the new Object. The more you dispatch the action we have in our Redux Dispatcher, the more times you will see the property of that object on screen. I did it 3 times and this is what my component is rendering...
 
+*Note*: the duplication you see when dispatching the same action repeatedly is intentional in this demo — we want to *show* that `[...state, ...action.payload.data]` appends rather than replaces. In a real reducer fetching the same list from an API you would normally replace the slice (`return action.payload.data;`) or normalize by id so that re-fetching produces the same shape.
+
 ```
 List of comments
 id labore ex et quam laborum
diff --git a/09_packages.md b/09_packages.md
index 265995cb..383cd4f2 100644
--- a/09_packages.md
+++ b/09_packages.md
@@ -3,8 +3,8 @@
 ### PropTypes
 
 Used to check props passed to our components against definitions.
-This dependency works just in `development`
-If *we want* to use validation in `production` (we should not), we can choose to use the development version by importing/requiring prop-types/prop-types instead of prop-types.
+This dependency works just in `development`.
+If you want to use validation in `production` as well (we generally do not recommend it), you can opt in to the development bundle by importing `prop-types/prop-types` instead of `prop-types`.
 *More info:* https://www.npmjs.com/package/prop-types
 
 CMD or terminal:
@@ -290,7 +290,7 @@ ReactDOM.render(
 );
 ```
 
-Why we use exact for "/"...?
+Why do we use exact for "/"...?
 If we don´t add the exact attribute, both screens will render when we go to the main route "/".
 
 An example to clarify.
@@ -343,7 +343,7 @@ Now...
 What happens if we try: http://localhost:3000/animals/cat...?
 It will render **App0**.
 
-Add `<Route path="/animals/:animal" component={App1} />` at the top. Now, everything that matches the patten `/animals/:animal` (including `/animals/dogs`) will render **App1**.
+Add `<Route path="/animals/:animal" component={App1} />` at the top. Now, everything that matches the pattern `/animals/:animal` (including `/animals/dogs`) will render **App1**.
 
 Note: When we use ReactRouter we are rendering a Router component and passing to it a history prop.
 
@@ -353,7 +353,7 @@ If you open the React DevTools you will see something like this...
 
 Route component takes a path and renders its proper UI.
 
-Let´s go back to our `<Switch>` example for a moment. Through the URI we can get the `animal` that the user is passing (`/animals/:animal`) and execute some operation. For example, make a request to x-API to retrieve all the information related to that animal. To ilustrate the point, in **App1** I´m, adding...
+Let´s go back to our `<Switch>` example for a moment. Through the URI we can get the `animal` that the user is passing (`/animals/:animal`) and execute some operation. For example, make a request to x-API to retrieve all the information related to that animal. To illustrate the point, in **App1** I´m adding...
 
 ```javascript
 class App1 extends Component {
@@ -389,7 +389,7 @@ In the JSX, I´m printing as well the `match` property which its parsed-value wo
 
 ---
 
-We don´t use <a> if not Link which keeps sync with BrowserRouter; Link renders an anchor tag.
+We don´t use <a> but rather, Link which keeps sync with BrowserRouter; Link renders an anchor tag.
 We can pass parameters to Link using an object instead of a string as value.
 
 ```javascript
@@ -486,6 +486,8 @@ Example:
 **Action creator**
 
 ```javascript
+import axios from 'axios';
+
 export const FETCH_COMMENTS = 'FETCH_COMMENTS';
 
 export const fetchComments = () => {
@@ -493,7 +495,7 @@ export const fetchComments = () => {
   const request = axios.get(api);
 
   return {
-    type: FETCH_WEATHER,
+    type: FETCH_COMMENTS,
     payload: request
   };
 };
@@ -517,4 +519,6 @@ export default (state = [], action) => {
 
 Remember that `axios` returns a `promise` (in our example passed it as the value of payload property) that we have to resolve.
 
-Note: In some of our examples we use `redux-promise` which, with `axios`, it "checks" the `payload` property of the `actions`, and if this payload is a `promise`, redux-promise (middleware) stops the action, wait until the request finishes and **then** dispatches a **NEW action** but with the **same type** property and for payload, the request properly resolved. This new action will follow its logic course and hit the reducers.
+Note: In some of our examples we use `redux-promise` which, with `axios`, it "checks" the `payload` property of the `actions`, and if this payload is a `promise`, redux-promise (middleware) stops the action, waits until the request finishes and **then** dispatches a **NEW action** but with the **same type** property and for payload, the request properly resolved. This new action will follow its logic course and hit the reducers.
+
+*Heads up*: `redux-promise` is archived/unmaintained. The standard alternative for async work in classic Redux is `redux-thunk` (covered later in the Redux chapter). For new projects, the canonical recommendation is **Redux Toolkit** (`@reduxjs/toolkit`) with `createAsyncThunk` or `RTK Query`.
diff --git a/10_unit-tests.md b/10_unit-tests.md
index 8459900d..002c19ba 100644
--- a/10_unit-tests.md
+++ b/10_unit-tests.md
@@ -100,7 +100,7 @@ describe('<App />', () => {
 ---
 
 Notes:
-We use `describe` to group test. We can nest describes to tie (as well) sub-groups. We will see this in behavioral tests.
+We use `describe` to group tests. We can nest describes to tie (as well) sub-groups. We will see this in behavioral tests.
 We use `it` for each test.
 
 ---
@@ -258,7 +258,7 @@ We have to test the behavior or functionality.
 <!-- TODO: pollution issues
 -->
 
-Note: beforeEach(() => {} and afterEach(() => {} will execute functionality before/ater each IT on their scope.
+Note: beforeEach(() => {} and afterEach(() => {} will execute functionality before/after each `it` on their scope.
 
 <!-- TODO: Maybe an example can clarify the scope -->
 
diff --git a/11_webpack.md b/11_webpack.md
index eb1892cc..983cc0cf 100644
--- a/11_webpack.md
+++ b/11_webpack.md
@@ -96,7 +96,7 @@ touch app.js index.js other.js
 **index.js**
 
 ```javaScript
-import App, { someFunction } from './app';
+import { someFunction } from './app';
 
 console.log('index.js');
 
@@ -241,8 +241,8 @@ At the beginning of the React´s Introduction, we saw how we could reuse and enh
 This topic (JS Module Systems) is extremely close to the compositional POV: just replace components with modules and you will have a clear inaugural understanding.
 
 Daily, we write logic (or logic plus UI). It´s not strange that, with some recurrence, if we architected our projects in the right way ("standardization") we will find ourselves reusing previous code.
-During your first steps, copying and pasting code between files was something forgivable: far away from a good practice, nor an useful methodology, but, in those moments you were struggling with bigger priorities. Now, however, having a deeper understanding imagine if every time you want to consume "x-function" you manually ad its code to the particular file, and, one day, you have to update or enhance your function. Yes, global search will help you but this approach will never scale.
-With this in mind, we could create a module (or package) use it, share it and re-use it. You have been doing it through React, but also, at the time of consuming `npm packages`: you import the entire package or part of it (x-function) and call it in as many places (aka, files) as necessary. And, if a new version is released, you just have to update the version of the packaging (having the possibility of anchor or lock to a particular version in case of issues related to compatibility).
+During your first steps, copying and pasting code between files was something forgivable: far away from a good practice, nor a useful methodology, but, in those moments you were struggling with bigger priorities. Now, however, having a deeper understanding imagine if every time you want to consume "x-function" you manually add its code to the particular file, and, one day, you have to update or enhance your function. Yes, global search will help you but this approach will never scale.
+With this in mind, we could create a module (or package) use it, share it and re-use it. You have been doing it through React, but also, at the time of consuming `npm packages`: you import the entire package or part of it (x-function) and call it in as many places (aka, files) as necessary. And, if a new version is released, you just have to update the version of the packaging (having the possibility of anchoring or locking to a particular version in case of issues related to compatibility).
 
 At a "high-level" Module Systems are "rules" to define how we are going to "include" files in our project or application.
 
@@ -313,7 +313,7 @@ define([], function() {
 Result: `index.js | app.js | app.js > someFunction`
 
 **ES2015 modules** (also known as ECMAScript 6)
-Sight: Standarization. Both client and server side.
+Sight: Standardization. Both client and server side.
 Behavior: sync/async compatible.  
 As we did with CommonJS invert the order of the 2 first lines of code: results don´t change since import is static and we cannot define freely where to call it.
 `app.js | index.js | app.js > someFunction`
@@ -477,7 +477,7 @@ module.exports = {
           {
             loader: 'babel-loader',
             options: {
-              presets: ['@babel/preset-env', '@babel/react']
+              presets: ['@babel/preset-env', '@babel/preset-react']
             }
           }
         ]
@@ -673,7 +673,7 @@ mode: 'development',
 ```
 
 Now, run both commands (scripts) again.
-Everything should be working... And it should be working as before. However, if you compare the ouput (size of the bundled files)
+Everything should be working... And it should be working as before. However, if you compare the output (size of the bundled files)
 
 ```
 ./mainbundle.js > Now: 155 KB - Before: 1.16 MiB  
@@ -1098,7 +1098,7 @@ mkdir server && cd server
 Init the server project and install express (plus body-parser)
 
 ```
-npm init - y
+npm init -y
 npm install express body-parser
 ```
 
@@ -1186,7 +1186,7 @@ const webpackDevMiddleware = require('webpack-dev-middleware')(
   config.devServer
 );
 
-const webpackHotMiddlware = require('webpack-hot-middleware')(
+const webpackHotMiddleware = require('webpack-hot-middleware')(
   compiler,
   config.devServer
 );
@@ -1209,7 +1209,7 @@ class RouterAndMiddlewares {
     this.app.use(bodyParser.json());
 
     this.app.use(webpackDevMiddleware);
-    this.app.use(webpackHotMiddlware);
+    this.app.use(webpackHotMiddleware);
 
     const staticMiddleware = express.static('public');
     this.app.use(staticMiddleware);
@@ -1470,17 +1470,17 @@ Also add example with css``
 -->
 
 Time for handling images.
-Let´s create a new dir `srcimages/` and add any image. In my case, `rPI-400x400.jpg`.
+Let´s create a new dir `src/images/` and add any image. In my case, `rPI-400x400.jpg`.
 Now, let´s import that image in our `src/App.js`
 
 ```javascript
-import rPI from '.images/rPI-400x400.jpg';
+import rPI from './images/rPI-400x400.jpg';
 ```
 
 We receive an error similar to the previous one:
 
 ```html
-ERROR in ./srcimages/rPI-400x400.jpg 1:0 Module parse failed: Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type. (Source code omitted for this binary file)
+ERROR in ./src/images/rPI-400x400.jpg 1:0 Module parse failed: Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type. (Source code omitted for this binary file)
 ```
 
 And yes, it ´s indeed related to a missing loader.
@@ -1564,7 +1564,7 @@ const isProd = process.env.NODE_ENV === 'production';
 And wrap everything that we don´t need in `production` inside the condition: `!isProd`. Also, declare the variables outside the if statement:
 
 ```javascript
-let webpackDevMiddleware, webpackHotMiddlware;
+let webpackDevMiddleware, webpackHotMiddleware;
 if (!isProd) {
   ...
   webpackDevMiddleware = require('webpack-dev-middleware')(
@@ -1863,10 +1863,10 @@ And, finally, we are going to replace the rule for `\.css` with:
 
 Let´s test that everything is behaving properly:
 
-* `npm star`
+* `npm start`
 * `npm run build`
 
-Congratulations! But (and yes, always is a but) our `css outpout` is not optimized for a `prod env` (at least, we would want to minimize the code)
+Congratulations! But (and yes, always is a but) our `css output` is not optimized for a `prod env` (at least, we would want to minimize the code)
 If you open the \*.css file, you will see:
 
 ```css
@@ -1973,7 +1973,7 @@ with this...
 this.app.use(
   expressStaticGzip('public', {
     enableBrotli: true,
-    prefere: ['br']
+    orderPreference: ['br']
   })
 );
 ```
@@ -2084,7 +2084,7 @@ optimization: {
     chunks: 'all',
     cacheGroups: {
       vendor: {
-        filename: '[name].bundle.js'
+        filename: '[name].bundle.js',
         chunks: 'initial',
         minChunks: 2
       }
@@ -2119,7 +2119,7 @@ Great! Everything is working properly and now, we have our code separated from v
 
 ---
 
-##From a Client Side Rendering (Traditional React App) to Server Side rendering
+## From a Client Side Rendering (Traditional React App) to Server Side rendering
 
 At the moment, we have the following scripts
 
@@ -2141,7 +2141,7 @@ Before diving into SSR, I want to make a change to preserve the HTML build funct
 Now, we are using `HTMLWebpackPlugin`, passing an HTML template and generating (via this plugin) our HTML document, `index.html`, the one that we serve as root access point of our `static site`.
 As we said, we are going to delegate the creation and rendering of the markup (HTML) to the express server.
 
-What happen if you want to make a build as we have been doing it previously...?
+What happens if you want to make a build as we have been doing it previously...?
 Let´s use an "environment variable" and some conditional logic to satisfy the needs of both cases: static and dynamic HTML.
 
 Create at the root level the file `.env`
@@ -2478,13 +2478,12 @@ We have been "playing" with our configuration files doing and undoing changes. T
 * [config\webpack.config.prod.server.js](./react-redux-webpack-client-server-scripts/config/webpack.config.prod.server.js)
 
 In our `server/server.js` we are going to make some changes to our if (!isProd) conditional. I will keep the previous code commented.
-In either case (if is prod or not) we are going to require the client and server configuration files, and, instead of passing one argument to webpack() method we are going to pass an array with both (client and server). The output that we are holding in the variable compiler will be an object; withing its properties, we will find compilers which data type is an array and it holds 2 elements. We can easily refer to each one doing: compiler.
-array with 2 elements: so we can easily refer to each one doing compiler.compilers[index].
+In either case (if is prod or not) we are going to require the client and server configuration files, and, instead of passing one argument to webpack() method we are going to pass an array with both (client and server). The output that we are holding in the variable compiler will be an object; within its properties, we will find compilers which data type is an array and it holds 2 elements. We can easily refer to each one doing: compiler.compilers[index].
 
 Let´s start with the first part of our condition if (!isProd), when we are in DEV mode.
 To webpack-dev-middleware we are going to pass both compilers.
 To webpack-hot-middleware, just the configuration related to our client.
-For both, we are going to use the devServer property configuratin that we have in ../config/webpack.config.dev.client.js
+For both, we are going to use the devServer property configuration that we have in ../config/webpack.config.dev.client.js
 
 In package.json replace the dev script with...
 
diff --git a/12_full-client-app.md b/12_full-client-app.md
index 47b8fffa..6ac1d3c0 100644
--- a/12_full-client-app.md
+++ b/12_full-client-app.md
@@ -151,4 +151,4 @@ const About = () => {
 export default About;
 ```
 
-Now, run you project and go to http://localhost:3000/about
+Now, run your project and go to http://localhost:3000/about
diff --git a/LICENSE b/LICENSE
index 8e376d27..e7029164 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018  React
+Copyright (c) 2018-2026 Al Diaz
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/README.md b/README.md
index a371bff1..e7d59857 100644
--- a/README.md
+++ b/README.md
@@ -1,12 +1,44 @@
 # React
 
-[![Greenkeeper badge](https://badges.greenkeeper.io/alpersonalwebsite/react.svg)](https://greenkeeper.io/)
 [![License: MIT](https://img.shields.io/badge/License-MIT-brightgreen.svg)](https://opensource.org/licenses/MIT)
 
 **Original MOTTO:** An easy way to learn React through examples.
 
 **Updated MOTTO:** Learning React topic by topic.
 
+## Table of contents
+
+### Intro
+
+- [00.0 Intro to React](./00_0_intro.md)
+- [00.1 JS beyond JavaScript](./00_1_intro_JS.md)
+- [00.2 Functional Programming patterns](./00_2_intro_JS-patterns.md)
+- [00.3 ES2015 / ES6 essentials](./00_3_intro_es2015.md)
+
+### Getting started
+
+- [01.0 First steps with React](./01_0_starting.md)
+- [01.1 React Elements](./01_1_elements.md)
+- [01.2 JS Module Systems](./01_2_JS-module-systems.md)
+
+### Components & data
+
+- [02.0 Components](./02_0_components.md)
+- [02.1 Props](./02_1_props.md)
+- [03 Local state](./03_local-state.md)
+- [04 Methods](./04_methods.md)
+- [05 Controlled components & forms](./05_controlled-components.md)
+- [06 Lifecycle events](./06_lifecycle-events.md)
+- [07 Conditional rendering](./07_conditional-rendering.md)
+
+### Ecosystem
+
+- [08 Redux](./08_redux.md)
+- [09 Packages (PropTypes, React Router, Redux Logger, Redux Thunk, Axios)](./09_packages.md)
+- [10 Unit tests](./10_unit-tests.md)
+- [11 Webpack (custom toolchain, SSR)](./11_webpack.md)
+- [12 Full client app — layouts](./12_full-client-app.md)
+
 ## Before starting
 
 ---
@@ -18,18 +50,27 @@ Many things happened in `React` and its ecosystem. I will try to update the sect
 
 After several years of contributing, mentoring and working with `JS` and `React`, I decided to “put together” some notes linked to recurrent doubts and obstacles that friends and co-workers have to face daily.
 
-This is a pure practical guide (*ps*, it was at the beginning): please, keep the `practical intention` present during the course of these "shared notes"; I don´t have the intent of challenging the great and plentiful coaching classes; neither the books/"white papers" that today, you can easily find anywhere (starting with the own Facebook´s proprietary documentation).
+This is a pure practical guide (*ps*, it was at the beginning): please, keep the `practical intention` present during the course of these "shared notes"; I don´t have the intent of challenging the great and plentiful coaching classes, nor the books/"white papers" that today, you can easily find anywhere (starting with Facebook´s own proprietary documentation).
 
-My aim, as I stated before (even with the latests addons and updates), is -still- clearly pragmatic. You will see some concepts and technicalities (as general and well-needed context) but you should (perhaps must) complement this "joint exercise" with other materials (I try to avoid quoting or referencing given that, an important part of your training is discovering good sources and picking those that satisfy your own and extremely personal "way to learn".
-However, taking a look the the mother source will not hurt you: [react](https://github.com/facebook/react)).
+My aim, as I stated before (even with the latest add-ons and updates), is -still- clearly pragmatic. You will see some concepts and technicalities (as general and well-needed context), but you should (perhaps must) complement this "joint exercise" with other materials. I try to avoid quoting or referencing, given that an important part of your training is discovering good sources and picking those that satisfy your own and extremely personal "way to learn". However, taking a look at the mother source will not hurt you: [react](https://github.com/facebook/react).
 
 ## Getting Started
 
 ### Pre-requisites
 
-You DO need to have an intermediate knowledge of `JavaScript` and, preferably, some exposure to [es2015 or ES6](http://es6-features.org).
-Even when "more complex topics" (not ordinary ones) are addressed as needed as part of the "lessons" (for example *leaks*, *currying*) not having an underlying `JS` base at all will generate more doubts and it could guide you to frustration, and ultimately, a premature failure. 
-If you don´t have experience with `JavaScript`, some familiarity with `Functional Programming` and `Prototypes`... Please, first resolve the context of `this` and `then` come back (btw, if this made you smile, you should be good).
+You should have an intermediate knowledge of `JavaScript`, including some exposure to [ES2015 / ES6](http://es6-features.org). The lessons introduce more advanced topics (closures, currying, the event loop) as needed, but a missing JS foundation will make the React parts much harder than they need to be.
+
+Concretely, before starting you should be comfortable with:
+
+- ES6+ syntax: `let`/`const`, arrow functions, template literals, default parameters, rest/spread.
+- Destructuring (objects and arrays) and shorthand object properties.
+- Modules: `import`/`export` (default and named).
+- Higher-order functions and array methods: `.map()`, `.filter()`, `.reduce()`.
+- Asynchronous JavaScript: callbacks, promises, `async`/`await`.
+- The `this` keyword and how its value is determined.
+- Prototypes and class syntax.
+
+If any of these are unfamiliar, work through the [Intro](./00_0_intro.md) chapters first and come back when they feel comfortable.
 
 Before proceeding with the tutorial, be sure that you have installed or, install...
 
@@ -49,6 +90,6 @@ Before proceeding with the tutorial, be sure that you have installed or, install
 * yarn https://yarnpkg.com/lang/en/docs/install/
   
   Alternative to `npm`. I will be using `yarn`
-  (At the moment of writing this `doc` there are no major differences between the two, as it used to...)
+  (At the moment of writing this `doc` there are no major differences between the two.)
 
   Learn more about the [npm registry](https://docs.npmjs.com/misc/registry) consumed by both, `yarn` and `npm`
\ No newline at end of file
diff --git a/greenkeeper.json b/greenkeeper.json
deleted file mode 100644
index a3a90fd3..00000000
--- a/greenkeeper.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "groups": {
-    "default": {
-      "packages": [
-        "examples/basic-react-example-lifecycle/package.json",
-        "examples/basic-react-example-state/package.json",
-        "examples/basic-react-example[map-with-key]/package.json",
-        "examples/basic-redux-example[redux-promise]/package.json",
-        "examples/basic-redux-example[redux-thunk]/package.json",
-        "examples/basic-webpack[default]/package.json",
-        "examples/react-redux-webpack-client-server-scripts/package.json",
-        "examples/react-redux-webpack-client-server-scripts/server/package.json",
-        "examples/react-redux-webpack-client-server/package.json",
-        "examples/react-redux-webpack-client-server/server/package.json",
-        "examples/react-redux-webpack-client/package.json"
-      ]
-    }
-  }
-}
diff --git a/notesToPlace.md b/notesToPlace.md
deleted file mode 100644
index e730d1b2..00000000
--- a/notesToPlace.md
+++ /dev/null
@@ -1,24 +0,0 @@
-**Coercion**
-
-Is when we force one data type into another. This is 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 1 int/number into 1 string
-
-The following operators convert data types values into `numbers`: `- * / %`
-However, `+` as we saw, converts by default into a `string`.
-
-```javascript
-console.log('1' + 1);
-console.log('1' - 1);
-```
-
-Result:
-11
-0
diff --git a/notesToPlace_primitive-and-reference-types.md b/notesToPlace_primitive-and-reference-types.md
deleted file mode 100644
index 23ec4093..00000000
--- a/notesToPlace_primitive-and-reference-types.md
+++ /dev/null
@@ -1,89 +0,0 @@
-**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, if not, a pointer that is going to reference to 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 an 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".
-
-```
-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.
-
-```
-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 an 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.
-
-```
-var a = 1;
-var b = 1;
-a === b;
-```
-
-This returns `'true'`
-
-However, this is false for Reference (where the comparison is between the spaces in the heap that each one is occupying)
-
-```
-var a = { a: 1};
-var b = { a: 1};
-a === b;
-```
-
-This returns `'false'`

From 4c45fe056f0c301c6f3e9810d791086898962843 Mon Sep 17 00:00:00 2001
From: Al Diaz <mypersonalwebsite@outlook.com>
Date: Fri, 8 May 2026 17:38:11 -0700
Subject: [PATCH 2/4] Address CodeRabbit feedback on PR #183
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 03_local-state.md: correct `.bind(null)` strict-mode claim — `this` is
  `null`, not `undefined` (only implicit `this` is coerced; explicit bind
  passes the value through verbatim).
- 06_lifecycle-events.md: note that `forceUpdate()` bypasses
  `shouldComponentUpdate()` in the Updating phase.
- 02_0_components.md: clarify intrinsic JSX tags are lowercase (`<div>`,
  `<section>`); camelCase applies to handlers / methods / prop names,
  not DOM tag names.
- 10_unit-tests.md: balance the `beforeEach(() => {})` and
  `afterEach(() => {})` parens in the example note.
- 00_0_intro.md: replace stale "More than 5 years" with date-stable
  "Since React's official release (March 2013), …".
- 05_controlled-components.md: wrap `<App />` reference in backticks;
  align Debounce note state reference with surrounding examples
  (this.state.yourName).
- 09_packages.md: "works just in development" → "works only in development".
- All lessons + README: typography pass replacing the acute accent
  (´, U+00B4) with a standard ASCII apostrophe (') in every
  contraction/possessive (`React´s` → `React's`, `It´s` → `It's`,
  `don´t` → `don't`, etc.). Verified zero U+00B4 remain.
---
 00_0_intro.md               |  14 ++---
 00_1_intro_JS.md            |  12 ++---
 00_3_intro_es2015.md        |   2 +-
 01_0_starting.md            |   6 +--
 01_1_elements.md            |   4 +-
 01_2_JS-module-systems.md   |  14 ++---
 02_0_components.md          |   4 +-
 02_1_props.md               |  34 ++++++------
 03_local-state.md           |  22 ++++----
 04_methods.md               |   4 +-
 05_controlled-components.md |  20 +++----
 06_lifecycle-events.md      |   4 +-
 07_conditional-rendering.md |   2 +-
 08_redux.md                 |  26 ++++-----
 09_packages.md              |  16 +++---
 10_unit-tests.md            |  38 +++++++-------
 11_webpack.md               | 102 ++++++++++++++++++------------------
 12_full-client-app.md       |   4 +-
 README.md                   |   2 +-
 19 files changed, 165 insertions(+), 165 deletions(-)

diff --git a/00_0_intro.md b/00_0_intro.md
index 3c091ea1..b4e0ecc7 100644
--- a/00_0_intro.md
+++ b/00_0_intro.md
@@ -2,7 +2,7 @@
 
 **A JavaScript library for building user interfaces.**
 
-More than 5 years have passed since React´s official 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,9 +24,9 @@ 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
@@ -61,16 +61,16 @@ Later, we are going to address `routing` and how to keep *UI and URL in sync* wi
 
 ---
 
-### 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 it coherent to have a strict relation between `logic` and `markup` in the same small unit or component, or, 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 an 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 {
diff --git a/00_1_intro_JS.md b/00_1_intro_JS.md
index 714ca400..fb976b63 100644
--- a/00_1_intro_JS.md
+++ b/00_1_intro_JS.md
@@ -25,11 +25,11 @@ 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 variables of our example are part of the Window (global) context.
-You can check the Window´s context executing:
+You can check the Window's context executing:
 
 ```console
 console.log(this);
@@ -41,11 +41,11 @@ However, something important to remember is that each time one of our functions
 
 ### 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.
+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.
+* 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**
 
@@ -72,7 +72,7 @@ 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.
+Now, let's try to do something similar with a Reference Type.
 
 ```javascript
 let person = { name: "Peter" };
diff --git a/00_3_intro_es2015.md b/00_3_intro_es2015.md
index f2173b67..bbcbb80f 100644
--- a/00_3_intro_es2015.md
+++ b/00_3_intro_es2015.md
@@ -7,7 +7,7 @@
 `myArray.reduce(callback[, initialValue])`
 
 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.
+It's the base of one of the vital parts of Redux's flow: reducers.
 
 Example: reduce years collection into TOTAL years
 
diff --git a/01_0_starting.md b/01_0_starting.md
index 42319d44..da62bca4 100644
--- a/01_0_starting.md
+++ b/01_0_starting.md
@@ -1,7 +1,7 @@
 # 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 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
diff --git a/01_1_elements.md b/01_1_elements.md
index 9f12d264..1f53184e 100644
--- a/01_1_elements.md
+++ b/01_1_elements.md
@@ -49,7 +49,7 @@ const element = React.createElement(
 
 **ReactDOM.render()**
 
-Let´s first `render` our previous element.
+Let's first `render` our previous element.
 
 ```javascript
 const element = React.createElement(
@@ -101,7 +101,7 @@ An element is a plain JavaScript object that describes what we want to show on t
 const element = <div>Im an element!</div>;
 ```
 
-Through components (we will cover this on the next chapter) we return the created elements. Let´s go back to our `Hello world!` example...
+Through components (we will cover this on the next chapter) we return the created elements. Let's go back to our `Hello world!` example...
 
 ```javascript
 const element = React.createElement(
diff --git a/01_2_JS-module-systems.md b/01_2_JS-module-systems.md
index 145bc197..c4843d99 100644
--- a/01_2_JS-module-systems.md
+++ b/01_2_JS-module-systems.md
@@ -1,8 +1,8 @@
 ## JS Module Systems
 
-We are going to review `Module Systems` in depth in a future lesson, however, if you are totally new to `Node.js` and `JS` in general... Having a vague idea of what we´re doing with "import/export" will make things easier.
+We are going to review `Module Systems` in depth in a future lesson, however, if you are totally new to `Node.js` and `JS` in general... Having a vague idea of what we're doing with "import/export" will make things easier.
 
-So... Let´s forget about `React` for a moment and create some `vanilla JS` files:
+So... Let's forget about `React` for a moment and create some `vanilla JS` files:
 
 **/test/model.js**
 
@@ -38,7 +38,7 @@ import { sayHi, showHobbies } from './controller';
 console.log(sayHi(data.name));
 ```
 
-**Do you understand what´s going on here...?** If so, feel free to move to the next lesson. If not, let´s think together.
+**Do you understand what's going on here...?** If so, feel free to move to the next lesson. If not, let's think together.
 
 You can see that we are separating concerns or "parts" of our code:
 1. *Model* holds the data
@@ -47,7 +47,7 @@ You can see that we are separating concerns or "parts" of our code:
 
 This makes your code modular, understandable and easy to update and reuse.
 
-You can see that we have the following pipeline: `render` imports both, data and functionality and it renders through the functionality or logic (aka, `controller`) the formatted piece of `data`. We can say there isn´t a strict relation between data and render but rather, a connection between some kind of middleware interpreted by controller. Don´t worry! We will come back to this.
+You can see that we have the following pipeline: `render` imports both, data and functionality and it renders through the functionality or logic (aka, `controller`) the formatted piece of `data`. We can say there isn't a strict relation between data and render but rather, a connection between some kind of middleware interpreted by controller. Don't worry! We will come back to this.
 
 If you try to execute our tiny app with `node render`, you will be prompted with the following error:
 
@@ -59,11 +59,11 @@ C:\test\render.js:1
                                                               ^^^^^^
 ```
 
-**What´s going on...?** Node uses `CommonJS` but we are utilizing `ES2015 modules` to "deal with our modules" (files).
+**What's going on...?** Node uses `CommonJS` but we are utilizing `ES2015 modules` to "deal with our modules" (files).
 
-There are several ways of solving this issue. Since we will resume this topic in the future, I´m picking the easiest one: `esm`
+There are several ways of solving this issue. Since we will resume this topic in the future, I'm picking the easiest one: `esm`
 
-1. Let´s init our project: `npm init -y`
+1. Let's init our project: `npm init -y`
 2. Install `esm`: `npm install --save esm`
 3. Create a new file as the `entrypoint` of our app. Example: `index.js`
 4. Add the following content to `index.js`
diff --git a/02_0_components.md b/02_0_components.md
index 79dc57f6..89614e8a 100644
--- a/02_0_components.md
+++ b/02_0_components.md
@@ -6,7 +6,7 @@ We use components to split our UI into reusable "blocks" that can receive `props
 
 You should name your component following the *PascalCase* (sometimes called *UpperCamelCase*) convention — i.e. each word starts with a capital, including the first one.
 
-Example: `<ListOfRecords />`; use *camelCase* (sometimes called *lowerCamelCase*) for `DOM elements`, `HOC`/`HOF` and `methods` in general.
+Example: `<ListOfRecords />`. Intrinsic DOM elements are written in **lowercase** (`<div>`, `<section>`, `<input>` …) — that's how JSX tells them apart from components. Use *camelCase* (sometimes called *lowerCamelCase*) for `HOC`/`HOF`, methods, event handlers (`onClick`, `onSubmit`) and prop names in general.
 
 *Note:* Some people also name *functional components* following the *camelCase* standard, but, once they import them they rename them switching to *PascalCase*. They keep the filename with *PascalCase*
 
@@ -201,7 +201,7 @@ const App = () => (
 );
 ```
 
-Remember that **small components** contribute to the re-usable nature of React and its compositional view. However, try to avoid being extremely granular and always preserve the logic´s context and usage.
+Remember that **small components** contribute to the re-usable nature of React and its compositional view. However, try to avoid being extremely granular and always preserve the logic's context and usage.
 Example:
 
 * A Car could be the main (or App) component
diff --git a/02_1_props.md b/02_1_props.md
index f9c213a6..caf429b9 100644
--- a/02_1_props.md
+++ b/02_1_props.md
@@ -26,14 +26,14 @@ import React from 'react';
 
 const Child = props => (
   <div>
-    <div>I´m receiving... {props.onShowingHello}</div>
+    <div>I'm receiving... {props.onShowingHello}</div>
   </div>
 );
 
 export default Child;
 ```
 
-If you go to http://localhost:3000/ you will see: `I´m receiving... Hello`
+If you go to http://localhost:3000/ you will see: `I'm receiving... Hello`
 
 Passing an array and `Each child in an array or iterator should have a unique "key" prop.` warning.
 Imagine that rather than passing a `string` we pass an `array` and we loop it with `.map()` on our `child component`
@@ -46,7 +46,7 @@ import React, { Component } from 'react';
 const Child = props => (
   <div>
     <div>
-      I´m receiving...{' '}
+      I'm receiving...{' '}
       {props.onShowingHello.map(eachGreeting => <li>{eachGreeting}</li>)}
     </div>
   </div>
@@ -69,10 +69,10 @@ export default App;
 
 ![React DevTools: Checking props](images/map-array-warning.png)
 
-What´s going on...?
+What's going on...?
 When we are looping an array, each child (no matter the element) must have a **UNIQUE key** property which will allow React to preserve the Component>DOM relation used in the reconciliation process, letting React know which element changed. Having a key is a stable way of referring to x-element (see it as your Passport ID).
 
-**We can "fix" this adding a key to the element**. For our example, we are going to use the `item index` since we don´t have other "stable value" (I don´t recommend using it in a real project).
+**We can "fix" this adding a key to the element**. For our example, we are going to use the `item index` since we don't have other "stable value" (I don't recommend using it in a real project).
 
 If we try to use the own element/item, like "Hi", and, if our array has the element twice: `['Hi', 'Hello', 'Hola', 'Hi']` we will end with a similar warning but now referring to "key duplication".
 
@@ -89,7 +89,7 @@ import React, { Component } from 'react';
 
 const Child = props => (
   <div>
-    <div>I´m receiving...</div>
+    <div>I'm receiving...</div>
     <ul>
       {props.onShowingHello.map((eachGreeting, index) => (
         <li key={index}>
@@ -200,11 +200,11 @@ After:
 Third, in your `Child component` destructure the object and use `timestamp` as value for the `key`.
 Now, try again checking x-checkbox and clicking on Add.
 
-I´m attaching the entire example with all the needed code in the folder: `examples/basic-react-example[map-with-key]`
+I'm attaching the entire example with all the needed code in the folder: `examples/basic-react-example[map-with-key]`
 
 _Remember_: each key should be `unique` and `static` in the `context` of x-array. This means that if we have 2 different arrays that we are mapping, we can have same key values since these "IDs" are referring to elements of different array (just a shared addresses but on different States).
 
-Let´s say that we want to pass down a state property of App.js to Child.js as props.
+Let's say that we want to pass down a state property of App.js to Child.js as props.
 
 **src/App.js**
 
@@ -243,15 +243,15 @@ state = {
 };
 ```
 
-However, in practice, usually our data is going to be dynamic. Think of an input where the user introduces some value (for example message) which is going to be passed down as prop. We would start with an empty string (`message: ''`), then a Controlled Form would update the value of the state property (`message: 'Hola'`) what would result in... `I´m receiving... Hola`
-But, until your parent Component pass "something" down, different than the default empty string, the Child one will render: `I´m receiving...`
-Not a great user experience... I´m rendering... Nothing...?
+However, in practice, usually our data is going to be dynamic. Think of an input where the user introduces some value (for example message) which is going to be passed down as prop. We would start with an empty string (`message: ''`), then a Controlled Form would update the value of the state property (`message: 'Hola'`) what would result in... `I'm receiving... Hola`
+But, until your parent Component pass "something" down, different than the default empty string, the Child one will render: `I'm receiving...`
+Not a great user experience... I'm rendering... Nothing...?
 
 We can fix this replacing...
 
 ```html
 ...
-<div>I´m receiving... {props.onShowingHello}</div>
+<div>I'm receiving... {props.onShowingHello}</div>
 ...
 ```
 
@@ -259,11 +259,11 @@ With this...
 
 ```javascript
 ...
-{onShowingHello !== '' ? `I´m receiving... ${onShowingHello}` : null}
+{onShowingHello !== '' ? `I'm receiving... ${onShowingHello}` : null}
 ...
 ```
 
-Now, we are only going to display our message if it´s different than the default one (empty string).
+Now, we are only going to display our message if it's different than the default one (empty string).
 
 ## Going from the data to the UI
 
@@ -381,7 +381,7 @@ Of course, you can move each component to a new file and make the proper `import
 #### Props and document.title
 
 If you go to your public (or dist) folder, the one where you have the boilerplate `index.html`, you will see that CRA set a "static title" for your App: `<title>React App</title>`. With one screen (in this case the root one) you could replace and set the title there without bigger issues; however, as your application starts to scale (or grow) a pre-hardcoded title will not always satisfy your needs.
-Later, we will try a more complex way of dealing with `HTML header´s tags`, but for the moment, we can add some code to our `componentDidMount()` lifecycle method utilizing as well, the `componentDidUpdate()`.
+Later, we will try a more complex way of dealing with `HTML header's tags`, but for the moment, we can add some code to our `componentDidMount()` lifecycle method utilizing as well, the `componentDidUpdate()`.
 
 We have a list of users where we are rendering just emails; so, we can set a title like: `E-mail list: x results` where x is a dynamic number.
 
@@ -408,7 +408,7 @@ Open your Web Developer Console, inspect the DOM and... Yes... You will see the
 ```
 
 Now, imagine that we have the ability to remove some of the emails of our list or, a programmatic function calling our API which could retrieve less | more objects (aka, emails).
-That´s why we will also use `componentDidUpdate()` which will not render the first time or first render (where we are using `componentDidMount()`) but, every other time our component re-renders.
+That's why we will also use `componentDidUpdate()` which will not render the first time or first render (where we are using `componentDidMount()`) but, every other time our component re-renders.
 
 ```javascript
 componentDidUpdate(prevProps, prevState, snapshot) {
@@ -418,7 +418,7 @@ componentDidUpdate(prevProps, prevState, snapshot) {
 }
 ```
 
-We use a conditional to be sure that, if other state property is updated or props are received, we will not change the title of our document, or what´s worse when we are working with sync/async methods and timers... End in a loop-hole. Our code will only be executed if a change on a particular property state, `users`, happens.
+We use a conditional to be sure that, if other state property is updated or props are received, we will not change the title of our document, or what's worse when we are working with sync/async methods and timers... End in a loop-hole. Our code will only be executed if a change on a particular property state, `users`, happens.
 
 <!-- TODO:
 Add more about this... Composition... PureComponent...
diff --git a/03_local-state.md b/03_local-state.md
index 6158408b..2d2bcf0f 100644
--- a/03_local-state.md
+++ b/03_local-state.md
@@ -1,11 +1,11 @@
 ## Local State
 
 Previously, we saw `props` as read-only or immutable data (passed from a parent to a child component). Now, we are going to see data that can "mutate" inside the component: `state`.
-Let´s imagine for a moment a TODO list.
+Let's imagine for a moment a TODO list.
 We have several items and boxes to check as "done".
 The original state of each item would be `false` and, when the user or "some logic" clicks (aka, checks) on a particular "check-box" the property state associated to it would change its value to `true` (the process could be reversed un-checking the box what would set the state to its original value: `false`).
 
-Remember: our `state` defines the UI of our App. Any "change" on the update will impact the UI. Also, that `state` is something related to the component which has and sets it, that´s why we talk about `local state`.
+Remember: our `state` defines the UI of our App. Any "change" on the update will impact the UI. Also, that `state` is something related to the component which has and sets it, that's why we talk about `local state`.
 
 ### Set state
 
@@ -65,7 +65,7 @@ ES6: string and variable concatenation
 ```javascript
 const name = 'Peter';
 
-// Here we don´t care about single or double quotes
+// Here we don't care about single or double quotes
 console.log(`His 'name' is "${name}"`);
 ```
 
@@ -99,7 +99,7 @@ We can freely pass down `state` as `props`.
 
 ### How to "update" or set new state Value
 
-If we *don´t care* about the previous state, we can do the following...
+If we *don't care* about the previous state, we can do the following...
 
 ```javascript
 componentDidMount() {
@@ -110,7 +110,7 @@ componentDidMount() {
 ```
 
 Note: `setState()` will merge the object that we pass in into the current state. The merge is **shallow** — it only merges the top level. If you have a nested object in state and only pass one of its inner keys, the rest of the nested object is replaced, not merged. For nested updates you must spread the existing nested object yourself: `this.setState({ user: { ...this.state.user, name: 'Wendy' } })`.
-BTW, I´m using the lifecycle `componentDidMount()` to force a change in the state without any user interaction and just for demo purposes. In a *tiny app* where a call to an API is done in this "stage", a method or a callback to that API call could set the new data for the state properties through `this.setState()`.
+BTW, I'm using the lifecycle `componentDidMount()` to force a change in the state without any user interaction and just for demo purposes. In a *tiny app* where a call to an API is done in this "stage", a method or a callback to that API call could set the new data for the state properties through `this.setState()`.
 
 
 If the "new state" depends on the "previous one" (like `booleans` or `adding/subtracting`)
@@ -196,7 +196,7 @@ class App extends Component {
 export default App;
 ```
 
-Maybe you are thinking... Why do we use `() => this.deleteFriend('Wendy')`...? Simple answer: Just to avoid context issues. We want to be sure that we are referring to the Component´s context. For this, we have 2 options...
+Maybe you are thinking... Why do we use `() => this.deleteFriend('Wendy')`...? Simple answer: Just to avoid context issues. We want to be sure that we are referring to the Component's context. For this, we have 2 options...
 
 1. Wrap our event handler inside a fat arrow function (previous example)
 2. Binding the context of `deleteFriend()` at the time we reference it.
@@ -215,9 +215,9 @@ With...
 <button onClick={this.deleteFriend.bind(null, 'Wendy')}>Delete friend!</button>
 ```
 
-In this example, the `new function` that `.bind()` returns has its `this` set to whatever the first argument was — `null` in our case. Two caveats: in strict mode (which ES modules use by default) `this` ends up as `undefined`, not the global object, and in this particular code `deleteFriend` is defined as a class field arrow function, so `this` is already lexically bound to the component and the value passed to `.bind()` is irrelevant. We are really only using `bind` for its second job: pre-filling `'Wendy'` as the first argument.
+In this example, the `new function` that `.bind()` returns has its `this` set to whatever the first argument was — `null` in our case. Two caveats: with `.bind(null)`, `this` inside the bound function is literally `null` (in non-strict mode it would only be coerced to the global object for *implicit* `this`, not for explicit binding), and in this particular code `deleteFriend` is defined as a class field arrow function, so `this` is already lexically bound to the component and the value passed to `.bind()` is irrelevant. We are really only using `bind` for its second job: pre-filling `'Wendy'` as the first argument.
 
-... there´re others but these two are the most used ones.
+... there're others but these two are the most used ones.
 
 ---
 
@@ -314,14 +314,14 @@ class App extends Component {
 }
 ```
 
-... and, since in this tutorial we are using `create-react-app` you don´t have to worry about wiring up Babel. It´s part of the package!!!
+... and, since in this tutorial we are using `create-react-app` you don't have to worry about wiring up Babel. It's part of the package!!!
 
 ### Lifting state
 
 Sometimes, you will have more than one component trying to access to the same "piece of data".
-If you know `redux` or `react context API` (among others) forget them for a moment. Think about hard-coded data (as initial properties state) or a user supplying info through a form. You don´t need to make a long persistence... Just share that data between components.
+If you know `redux` or `react context API` (among others) forget them for a moment. Think about hard-coded data (as initial properties state) or a user supplying info through a form. You don't need to make a long persistence... Just share that data between components.
 
-If there´s no deeply nested need (ComponentA -> ComponentB -> ComponentC -> ComponentD) a good approach would be to "host" that state on the nearest parent.
+If there's no deeply nested need (ComponentA -> ComponentB -> ComponentC -> ComponentD) a good approach would be to "host" that state on the nearest parent.
 Example:
 
 ```javascript
diff --git a/04_methods.md b/04_methods.md
index ab5c3696..7c073571 100644
--- a/04_methods.md
+++ b/04_methods.md
@@ -1,8 +1,8 @@
 ## Methods
 
-Let´s grab the previous example and use a `Global Event Handler` (for this case, onClick) with setState() and a custom method.
+Let's grab the previous example and use a `Global Event Handler` (for this case, onClick) with setState() and a custom method.
 
-Note: In React events (like onClick), methods and component´s attributes (aka, props) are named using `lower camelCase`.
+Note: In React events (like onClick), methods and component's attributes (aka, props) are named using `lower camelCase`.
 
 ### Setting state with onClick
 
diff --git a/05_controlled-components.md b/05_controlled-components.md
index 3f35a6f8..c76a8323 100644
--- a/05_controlled-components.md
+++ b/05_controlled-components.md
@@ -28,7 +28,7 @@ export default App;
 ```
 
 You can use React Developer Tools to check the state of your Component.
-Open your browser Developer Tools, click on the React tab and select your Component, in this case <App />
+Open your browser Developer Tools, click on the React tab and select your Component, in this case `<App />`.
 At the right you will find:
 
 * props
@@ -65,14 +65,14 @@ Before proceeding, you should know that `Controlled Components` refer to:
 * inputs
 * selects
 * textareas
-  ... all of them, have their own state which is based on the user´s action (the information he provides, the option that he selects, the checkbox that he checks, etc.).
+  ... all of them, have their own state which is based on the user's action (the information he provides, the option that he selects, the checkbox that he checks, etc.).
 
-Selects: To avoid the warning, `` Warning: Use the`defaultValue`or`value`props on <select> instead of setting `selected`on <option>. ``, we use the attribute value on select instead of the selected one on the particular option. Remember that there´s a strict relation between state and element, so if you want to start showing (aka, selecting) a particular option, you should initialize your state with it.
+Selects: To avoid the warning, `` Warning: Use the`defaultValue`or`value`props on <select> instead of setting `selected`on <option>. ``, we use the attribute value on select instead of the selected one on the particular option. Remember that there's a strict relation between state and element, so if you want to start showing (aka, selecting) a particular option, you should initialize your state with it.
 
 For easy handling of "radio" and "check-boxes" you can use `react-radio-group` and `react-checkbox-group`.
 
 Quick radio example: `react-radio-group`
-With this dependency you will avoid: code duplication, repetitive in-line conditional to determine if input should be checked, complex logic to update state in relation to user´s selection.
+With this dependency you will avoid: code duplication, repetitive in-line conditional to determine if input should be checked, complex logic to update state in relation to user's selection.
 
 ```javascript
 import React, { Component } from 'react';
@@ -149,10 +149,10 @@ export default App;
 
 #### .map() and key attribute
 
-Before jumping to other topic, let´s address one possible issue in our code setting a context.
-Daily, we interact with lists that filter (aka, update) their composition or results. Example: Amazon search and suggested keys/terms/products. However, as you probably noticed, there´s "some kind of delay" that allows you to receive suggestions per words or terms and not per letters.
+Before jumping to other topic, let's address one possible issue in our code setting a context.
+Daily, we interact with lists that filter (aka, update) their composition or results. Example: Amazon search and suggested keys/terms/products. However, as you probably noticed, there's "some kind of delay" that allows you to receive suggestions per words or terms and not per letters.
 
-Let´s modify our previous example.
+Let's modify our previous example.
 Before closing the div, add...
 
 ```javascript
@@ -176,7 +176,7 @@ For more information (also Throttling): https://www.npmjs.com/package/react-thro
 1. Install `react-throttle` package
 2. Destructure and import Debounce
 3. Add the Debounce component with the proper configuration wrapping the input
-   (... and remove `value={yourName}` from your input, if not, it will not work. Don´t worry, Debounce will take care of showing the proper data/value)
+   (... and remove `value={this.state.yourName}` from your input, otherwise it will not work. Don't worry, Debounce will take care of showing the proper data/value)
 
 ```javascript
 <Debounce time="400" handler="onChange">
@@ -192,7 +192,7 @@ Try now to type your name... A lot better, no...?
 
 #### Destructuring
 
-In React you will use destructuring (ES6) a lot. Even when it´s not a functional requirement, it makes your code look cleaner and it follows the Community´s standards.
+In React you will use destructuring (ES6) a lot. Even when it's not a functional requirement, it makes your code look cleaner and it follows the Community's standards.
 
 So... What is Destructuring...?
 Just a convenient way of pulling out values from object and array objects.
@@ -386,7 +386,7 @@ Well, since there is not another way than the own user selecting the file and in
 
 You will find some tutorials explaining the agnostic benefits (cases like when you are using multiple frameworks and libraries) of turning all elements into uncontrolled components. However, remember that this goes against React nature: taking as "Source of Truth" the DOM node instead of a particular state tied to the element.
 
-Try to avoid as much as you can the use of "uncontrolled components"... However, if you are thinking what would be an "uncontrolled component" with an "input of type text element"... Here´s your answer...
+Try to avoid as much as you can the use of "uncontrolled components"... However, if you are thinking what would be an "uncontrolled component" with an "input of type text element"... Here's your answer...
 
 Example:
 
diff --git a/06_lifecycle-events.md b/06_lifecycle-events.md
index 3796c361..82437ad8 100644
--- a/06_lifecycle-events.md
+++ b/06_lifecycle-events.md
@@ -1,6 +1,6 @@
 ## Life-cycle events
 
-These are methods that allow us to execute certain functionality during the Component´s life-cycle (this is for `Class-based Components`. We will see as well `hooks` which are the "equivalent" for `Functional Components`). 
+These are methods that allow us to execute certain functionality during the Component's life-cycle (this is for `Class-based Components`. We will see as well `hooks` which are the "equivalent" for `Functional Components`). 
 
 A Component goes through three phases — **Mounting**, **Updating** and **Unmounting** — and the methods called in each phase are different. The lists below are split that way; do not assume the methods always run in the same order across phases.
 
@@ -14,7 +14,7 @@ A Component goes through three phases — **Mounting**, **Updating** and **Unmou
 **Updating** (every render after the first one — triggered by new props, `setState()`, or `forceUpdate()`):
 
 1. `static getDerivedStateFromProps(props, state)`
-2. `shouldComponentUpdate(nextProps, nextState)` > We can stop or prevent unnecessary re-renders improving performance.
+2. `shouldComponentUpdate(nextProps, nextState)` > We can stop or prevent unnecessary re-renders improving performance. *(Skipped when the update is triggered by `forceUpdate()`.)*
 3. `render()`
 4. `getSnapshotBeforeUpdate(prevProps, prevState)` > Returns a snapshot (object) handed to `componentDidUpdate` as its third argument.
 5. `componentDidUpdate(prevProps, prevState, snapshot)` > Side-effects in response to a prop/state change (e.g. fetching data when the URL params change). Always guard with a comparison or you will loop.
diff --git a/07_conditional-rendering.md b/07_conditional-rendering.md
index 425198da..ae48fb29 100644
--- a/07_conditional-rendering.md
+++ b/07_conditional-rendering.md
@@ -104,4 +104,4 @@ const App = () => (
 export default App;
 ```
 
-Note: You will see that some people return empty elements like `<span>` or `<div>`. This is totally valid, however, in most cases you don´t want to "return something" (aka, add some element to the DOM) so, start always returning `null`, and switch to elements in case you want to render and show a particular message to the user.
+Note: You will see that some people return empty elements like `<span>` or `<div>`. This is totally valid, however, in most cases you don't want to "return something" (aka, add some element to the DOM) so, start always returning `null`, and switch to elements in case you want to render and show a particular message to the user.
diff --git a/08_redux.md b/08_redux.md
index 52376f3a..3dac1753 100644
--- a/08_redux.md
+++ b/08_redux.md
@@ -1,18 +1,18 @@
 ## Redux
 
-<!-- What´s Redux
+<!-- What's Redux
 State in a predictable way.
 -->
 
 <!-- TODO: First we should define the store. We have to think how the app will use that data -->
 
-In Redux there´s a single Source of Truth: the store.
+In Redux there's a single Source of Truth: the store.
 The state is read-only (immutable); components cannot write directly into the state.
 Reducers create and return a new copy of the state.
 
 When to use Redux...
 
-1. Shared state through multiple Components. Let´s say that we have ComponentA with one child, ComponentB. We can easily pass data down with props. But, if we need to pass the data across several components (example of "prop threading": from A->B->-C->D) we should consider the global state or Redux store so we can instruct (without nesting) which components will have access to that data.
+1. Shared state through multiple Components. Let's say that we have ComponentA with one child, ComponentB. We can easily pass data down with props. But, if we need to pass the data across several components (example of "prop threading": from A->B->-C->D) we should consider the global state or Redux store so we can instruct (without nesting) which components will have access to that data.
 2. Caching: when we want to cache API requests/responses.
 
 For other cases, we should opt for Local State.
@@ -25,7 +25,7 @@ What are Pure Functions...?
 
 1. They depend just in the arguments that we pass.
 2. Same arguments should return same results (this makes pure functions easy to test).
-3. They don´t produce side effects (aka, NO interaction between the function and its outside scope. Example: HTTP calls)
+3. They don't produce side effects (aka, NO interaction between the function and its outside scope. Example: HTTP calls)
 
 One common example of pure and impure functions...
 
@@ -188,7 +188,7 @@ The `Store` has the following methods:
 
 <!-- TODO: add example for store.replaceReducer(reducer) --->
 
-IMPORTANT: In Redux (as in React or programming in general) you don´t duplicate data. Remember that you have `one Source of Truth`: the Store. Also, put special attention to the shape of the Store... Try to keep it as simple and shallow as you can obviating complex nested structures.
+IMPORTANT: In Redux (as in React or programming in general) you don't duplicate data. Remember that you have `one Source of Truth`: the Store. Also, put special attention to the shape of the Store... Try to keep it as simple and shallow as you can obviating complex nested structures.
 
 ---
 
@@ -232,7 +232,7 @@ If you want to easily reuse your components in other projects, you should probab
 ```
 
 Sometimes (aka, generally) you are going to have deeply nested paths.
-Let´s think in the following case.
+Let's think in the following case.
 We are working in our `Homepage`: `/home/yourUser/yourProject/src/pages/Homepage/index.js` and we want to include our `Footer`: `/home/yourUser/yourProject/src/components/Footer/index.js`
 
 We would do something like...
@@ -253,7 +253,7 @@ Note about `.gitignore`: a `.env` file commonly contains secrets (API keys, toke
 
 Now, rather than using `../../components/Footer/index.js` we will use `./components/Footer/index.js` starting always from our `src/`
 
-If we place our Components in different folders (let´s say that we move Homepage to `/home/yourUser/yourProject/src/pages/main/Homepage/index.js`) our import statements will not be affected.
+If we place our Components in different folders (let's say that we move Homepage to `/home/yourUser/yourProject/src/pages/main/Homepage/index.js`) our import statements will not be affected.
 
 <!-- TODO: A little more about .env file -->
 
@@ -348,7 +348,7 @@ Until `this.props.comments[0]` is something (or, is different than `undefined`),
 
 <!-- TODO: Add `ownProps` from React Notes 7 -->
 
-Whether we use `export default connect(mapStateToProps, actions)(App);` (actions object) or `export default connect(mapStateToProps, mapDispatchToProps)(App);` (mapDispatchToProps method), `mapStateToProps` must be something. If we don´t need access to the store, just to `dispatch` we should set it as `null`
+Whether we use `export default connect(mapStateToProps, actions)(App);` (actions object) or `export default connect(mapStateToProps, mapDispatchToProps)(App);` (mapDispatchToProps method), `mapStateToProps` must be something. If we don't need access to the store, just to `dispatch` we should set it as `null`
 Example: `export default connect(null, actions)(App);`
 
 Alternatively, you can replace mapStateToProps with an anonymous function.
@@ -430,7 +430,7 @@ Note: In this example we have 2 functions (the outer `a => ...` and the inner `b
 
 ---
 
-Now... Let´s install some libraries.
+Now... Let's install some libraries.
 
 ```
 npm install axios react-redux redux-promise redux --save
@@ -667,7 +667,7 @@ case FETCH_COMMENTS:
 ```
 
 <!-- TODO: Explain WHY return [...state, ...action.payload.data];
-We are receiving an array of objects. That´s why in our test payload we use payload: [{}] -->
+We are receiving an array of objects. That's why in our test payload we use payload: [{}] -->
 
 with...
 
@@ -737,7 +737,7 @@ TESTING
 
 #### Architectural advice...
 
-Currently, our `comments` piece of state is an array of objects. This is "good enough" for this App, however, it doesn´t scale neither perform properly for big projects. You should always opt for objects with IDs as keys (aka, normalized state) instead of array.
+Currently, our `comments` piece of state is an array of objects. This is "good enough" for this App, however, it doesn't scale neither perform properly for big projects. You should always opt for objects with IDs as keys (aka, normalized state) instead of array.
 
 Using `lodash`, we can take advantage of `_.mapKeys(object, key)`. So, in our reducer first we will import `import _ from "lodash";` and then, we will change...
 
@@ -803,7 +803,7 @@ Note: `key` is the property of the object that we want for our new object proper
 
 At this point -probably- you are thinking... How will I map that object state...?
 
-And here´s where we use `lodash` (or `_`) again.
+And here's where we use `lodash` (or `_`) again.
 Having the piece of state with a new shape we can use `_.map(object)`
 So, for example, in our `App.js` we are going to include as first step. Next, we will create a method for render our comments and we will call that function from our JSX.
 
@@ -922,6 +922,6 @@ Several times we referred to Middlewares...
 In Redux we use Middlewares to intercept dispatched
 actions modifying them (or not) before they hit the reducers. We can also dispatch other actions or execute some logic at the dispatching time or layer.
 
-What is `redux-thunk`...? It´s a thunk middleware for Redux. We can use it for async HTTP requests (Redux only supports synchronous data flow) for example, when we are dealing/interacting with a server, delaying, dispatching, or dispatching if certain condition is met (like a response to our request).
+What is `redux-thunk`...? It's a thunk middleware for Redux. We can use it for async HTTP requests (Redux only supports synchronous data flow) for example, when we are dealing/interacting with a server, delaying, dispatching, or dispatching if certain condition is met (like a response to our request).
 
 With thunks we can return from the action creator a function instead of an object and intercept these actions before dispatching.
diff --git a/09_packages.md b/09_packages.md
index 383cd4f2..3d36adef 100644
--- a/09_packages.md
+++ b/09_packages.md
@@ -3,7 +3,7 @@
 ### PropTypes
 
 Used to check props passed to our components against definitions.
-This dependency works just in `development`.
+This dependency works only in `development`.
 If you want to use validation in `production` as well (we generally do not recommend it), you can opt in to the development bundle by importing `prop-types/prop-types` instead of `prop-types`.
 *More info:* https://www.npmjs.com/package/prop-types
 
@@ -47,7 +47,7 @@ Child.propTypes = {
 export default App;
 ```
 
-If you don´t have installed React Developer Tools, please, install it now:
+If you don't have installed React Developer Tools, please, install it now:
 
 * Firefox:https://addons.mozilla.org/en-US/firefox/addon/react-devtools/
 * Chrome: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en
@@ -102,7 +102,7 @@ Warning: Failed prop type: Invalid prop `yourAge` of type `number` supplied to `
     in App (at index.js:7)
 ```
 
-Excellent! Everything is working as expected (aka, every time you use a type different than the one defined, you will see a warning in your console). Change other properties and ensure that you understand what´s happening. Once you finish, please, be sure that you are setting the right types.
+Excellent! Everything is working as expected (aka, every time you use a type different than the one defined, you will see a warning in your console). Change other properties and ensure that you understand what's happening. Once you finish, please, be sure that you are setting the right types.
 
 ##### Most used types...
 
@@ -126,7 +126,7 @@ Child.propTypes = {
 };
 ```
 
-In this case, if you don´t have that property you console will show something like...
+In this case, if you don't have that property you console will show something like...
 
 ```javascript
 Warning: Failed prop type: The prop `yourAge` is marked as required in `Child`, but its value is `undefined`.
@@ -291,7 +291,7 @@ ReactDOM.render(
 ```
 
 Why do we use exact for "/"...?
-If we don´t add the exact attribute, both screens will render when we go to the main route "/".
+If we don't add the exact attribute, both screens will render when we go to the main route "/".
 
 An example to clarify.
 All these routes will match http://localhost:3000/animals/dogs
@@ -353,7 +353,7 @@ If you open the React DevTools you will see something like this...
 
 Route component takes a path and renders its proper UI.
 
-Let´s go back to our `<Switch>` example for a moment. Through the URI we can get the `animal` that the user is passing (`/animals/:animal`) and execute some operation. For example, make a request to x-API to retrieve all the information related to that animal. To illustrate the point, in **App1** I´m adding...
+Let's go back to our `<Switch>` example for a moment. Through the URI we can get the `animal` that the user is passing (`/animals/:animal`) and execute some operation. For example, make a request to x-API to retrieve all the information related to that animal. To illustrate the point, in **App1** I'm adding...
 
 ```javascript
 class App1 extends Component {
@@ -374,7 +374,7 @@ class App1 extends Component {
 
 In the Lifecycle `componentDidMount()` we are making the request via `this.props.fetchPost(animal);`.
 
-In the JSX, I´m printing as well the `match` property which its parsed-value would be:
+In the JSX, I'm printing as well the `match` property which its parsed-value would be:
 
 ```javascript
 {
@@ -389,7 +389,7 @@ In the JSX, I´m printing as well the `match` property which its parsed-value wo
 
 ---
 
-We don´t use <a> but rather, Link which keeps sync with BrowserRouter; Link renders an anchor tag.
+We don't use <a> but rather, Link which keeps sync with BrowserRouter; Link renders an anchor tag.
 We can pass parameters to Link using an object instead of a string as value.
 
 ```javascript
diff --git a/10_unit-tests.md b/10_unit-tests.md
index 002c19ba..9d71786c 100644
--- a/10_unit-tests.md
+++ b/10_unit-tests.md
@@ -1,6 +1,6 @@
 ## Unit Tests
 
-<!-- TODO: What´s Unit Test -->
+<!-- TODO: What's Unit Test -->
 
 I recommend you to follow the TDD (Test Driven Development)
 You start writing the boiler-plate of your Unit Test, then you run the test which will fail and it will determine the feature that you should add to your script/program... and so on.
@@ -28,7 +28,7 @@ Yes... We are saving it as a dev dependency. So, if you go to your package.json
 }
 ```
 
-Note: At the moment I´m writing this tutorial the last Jest version is 23.4.1, however, react-scripts is locked at 20.0.4 so other will not work.
+Note: At the moment I'm writing this tutorial the last Jest version is 23.4.1, however, react-scripts is locked at 20.0.4 so other will not work.
 
 We are going to create **src/tempPolyfills.js**
 
@@ -136,7 +136,7 @@ As it says, just hit u (update) and all your test will be green (status = passed
 
 ### Coverage
 
-We can use Jest´s functionality to corroborate the coverage (%) of our UT.
+We can use Jest's functionality to corroborate the coverage (%) of our UT.
 
 CMD or terminal:
 
@@ -212,7 +212,7 @@ I will start testing...
 * That I have an input which type is text
 * That I have JUST ONE button
 
-You can also check the existence of the form tag. I´m letting this one as homework :)
+You can also check the existence of the form tag. I'm letting this one as homework :)
 
 **src/App.test.js**
 
@@ -258,11 +258,11 @@ We have to test the behavior or functionality.
 <!-- TODO: pollution issues
 -->
 
-Note: beforeEach(() => {} and afterEach(() => {} will execute functionality before/after each `it` on their scope.
+Note: `beforeEach(() => {})` and `afterEach(() => {})` execute functionality before/after each `it` in their scope.
 
 <!-- TODO: Maybe an example can clarify the scope -->
 
-Let´s include the new tests to **src/App.test.js**
+Let's include the new tests to **src/App.test.js**
 
 ```javascript
 import React from 'react';
@@ -296,9 +296,9 @@ describe('<App />', () => {
     // Initial state
     console.log(wrapper.state());
 
-    // We add to the peter to the `friend` state´s property
+    // We add to the peter to the `friend` state's property
     beforeEach(() => {
-      // I´m adding the name to keep the behavior of my method: updateStateProperty
+      // I'm adding the name to keep the behavior of my method: updateStateProperty
       wrapper.find('input').simulate('change', {
         target: { name: 'friend', value: theFriend }
       });
@@ -306,7 +306,7 @@ describe('<App />', () => {
       wrapper.update();
     });
 
-    it('updates the value of `friend` state´s property', () => {
+    it('updates the value of `friend` state's property', () => {
       console.log(wrapper.state());
       expect(wrapper.state().friend).toEqual(theFriend);
     });
@@ -318,15 +318,15 @@ describe('<App />', () => {
     describe('and adding the new friend to the list', () => {
       beforeEach(() => {
         // Yes... We simulate the event from the button
-        // Our submit handler will clear as well `friend` state´s property
+        // Our submit handler will clear as well `friend` state's property
         wrapper.find('button').simulate('submit');
       });
 
-      it('adds the new friend to `friends` state´s property', () => {
+      it('adds the new friend to `friends` state's property', () => {
         console.log(wrapper.state());
         expect(wrapper.state().friends[0]).toEqual(theFriend);
       });
-      // Now we want to clear our `friends` state´s property or set it to the initial state
+      // Now we want to clear our `friends` state's property or set it to the initial state
       afterEach(() => {
         wrapper.setState({ friends: [] });
         console.log(wrapper.state());
@@ -344,7 +344,7 @@ Notes:
 
 ```javascript
 beforeEach(() => {
-  // I´m adding the name to keep the behavior of my method: updateStateProperty
+  // I'm adding the name to keep the behavior of my method: updateStateProperty
   wrapper.find('input').simulate('change', {
     target: { name: 'friend', value: theFriend }
   });
@@ -386,7 +386,7 @@ it('renders an h1 title', () => {
 
 #### Shallow Rendering (Shallow), Full Rendering (Mount) and Static Rendering (Render)
 
-Let´s add first a functional component to the previous **src/App.js** code
+Let's add first a functional component to the previous **src/App.js** code
 
 ```javascript
 const Child = () => {
@@ -400,7 +400,7 @@ It uses a third party HTML parsing and traversal library [cheerio](https://cheer
 
 <!-- TODO: When to use each one, particularly Render -->
 
-Now, let´s console the structure of the Component using `shallow` and `mount`
+Now, let's console the structure of the Component using `shallow` and `mount`
 
 **Shallow**
 It renders the provided Component but NOT its children.
@@ -438,7 +438,7 @@ Result:
 </div>
 ```
 
-Note: Remember that console.log(wrapper.debug()); prints in the console (aka, your CMD or terminal) the component´s structure.
+Note: Remember that console.log(wrapper.debug()); prints in the console (aka, your CMD or terminal) the component's structure.
 
 **Render**
 
@@ -492,7 +492,7 @@ You will see...
 
 ![Unit Test: Store issue](images/unit-test-redux-app.png)
 
-So first, let´s delimit the context changing (in our test) mount with shallow.
+So first, let's delimit the context changing (in our test) mount with shallow.
 Now, we are going to export our class (or function) to test the component itself rather than the connected component.
 
 We will have 2 exports (one by default, the connected component)
@@ -534,7 +534,7 @@ Now, replace the UT...
 ```javascript
 beforeEach(() => {
   // Yes... We simulate the event from the button
-  // Our submit handler will clear as well `friend` state´s property
+  // Our submit handler will clear as well `friend` state's property
   wrapper.find('button').simulate('submit');
   wrapper.update();
 });
@@ -557,7 +557,7 @@ Remember that we exported the class to fix the issue related with the context of
 
 We can also create a separated component for our store (initializing it with the `Provider` tag or Component) and including it in both, our main file, example `src/index.js` and the "connected component tests".
 
-In this case (aka, how to fix the issue with the store´s context option b) we can enhance `Provider`.
+In this case (aka, how to fix the issue with the store's context option b) we can enhance `Provider`.
 
 <!-- TODO: HOC of a HOC -->
 
diff --git a/11_webpack.md b/11_webpack.md
index 983cc0cf..47bfbf63 100644
--- a/11_webpack.md
+++ b/11_webpack.md
@@ -2,12 +2,12 @@
 
 <!-- TODO:
 What is
-What´s a bundle.
+What's a bundle.
 Others like Webpack >  Browserify
 -->
 
 Quoting _Webpack_ documentation (which you should check regularly), "_webpack is a static module bundler for modern JavaScript applications_".
-It takes all the files (let´s just care, at least for the moment, only about `\*.js`) wired up in our project and generates a bundle(s) that will be used as our "static files or assets".
+It takes all the files (let's just care, at least for the moment, only about `\*.js`) wired up in our project and generates a bundle(s) that will be used as our "static files or assets".
 
 As always, the best way to illustrate this statement is through a basic example.
 Hands at work!
@@ -156,7 +156,7 @@ A new static file will be hosted on your `dist/`; the file: `bundle.js`
 Open that file. Among with webpack (and related dependencies) code, you will find our transpiled and "bundled code".
 
 So...
-We have a configuration file, `webpack.config.js`, where we are defining our entry point, or the file which will wire (directly or indirectly) the other ones resulting in `bundle.js`; this bundle contains the code of the entry or main file `index.js` and also `app.js` which is imported on `index.js`. However, we have the file `other.js` which was not included since it´s not part of the "cabling". As soon as we wire it up to index.js or app.js, it will be included in our bundle.
+We have a configuration file, `webpack.config.js`, where we are defining our entry point, or the file which will wire (directly or indirectly) the other ones resulting in `bundle.js`; this bundle contains the code of the entry or main file `index.js` and also `app.js` which is imported on `index.js`. However, we have the file `other.js` which was not included since it's not part of the "cabling". As soon as we wire it up to index.js or app.js, it will be included in our bundle.
 
 We could also add it to our entry object
 
@@ -230,17 +230,17 @@ other.js  962 bytes       1  [emitted]  other
 ```
 
 All this, just adding the webpack dependency to our project and setting a few options.
-Even when this configuration is probably the most basic one, you can start seeing the power and flexibility of webpack. Also, its "discernment"... Everything outside the entry points that´s not indexed as part of the project, will not be part of the output.
+Even when this configuration is probably the most basic one, you can start seeing the power and flexibility of webpack. Also, its "discernment"... Everything outside the entry points that's not indexed as part of the project, will not be part of the output.
 
 ---
 
 ### JS Module Systems
 
-At the beginning of the React´s Introduction, we saw how we could reuse and enhance our code through components and (forgive the redundancy) compose "as a whole" more complex units. Anew, the idea of blocks of different shapes, colors and sizes encasing with each other (in a direct or intermediate relation) comes to our attention.
+At the beginning of the React's Introduction, we saw how we could reuse and enhance our code through components and (forgive the redundancy) compose "as a whole" more complex units. Anew, the idea of blocks of different shapes, colors and sizes encasing with each other (in a direct or intermediate relation) comes to our attention.
 
 This topic (JS Module Systems) is extremely close to the compositional POV: just replace components with modules and you will have a clear inaugural understanding.
 
-Daily, we write logic (or logic plus UI). It´s not strange that, with some recurrence, if we architected our projects in the right way ("standardization") we will find ourselves reusing previous code.
+Daily, we write logic (or logic plus UI). It's not strange that, with some recurrence, if we architected our projects in the right way ("standardization") we will find ourselves reusing previous code.
 During your first steps, copying and pasting code between files was something forgivable: far away from a good practice, nor a useful methodology, but, in those moments you were struggling with bigger priorities. Now, however, having a deeper understanding imagine if every time you want to consume "x-function" you manually add its code to the particular file, and, one day, you have to update or enhance your function. Yes, global search will help you but this approach will never scale.
 With this in mind, we could create a module (or package) use it, share it and re-use it. You have been doing it through React, but also, at the time of consuming `npm packages`: you import the entire package or part of it (x-function) and call it in as many places (aka, files) as necessary. And, if a new version is released, you just have to update the version of the packaging (having the possibility of anchoring or locking to a particular version in case of issues related to compatibility).
 
@@ -254,7 +254,7 @@ Differences, examples, encapsulation, dependency... revealing module pattern
 We have 3 main JS Module Systems: `CommonJS`, `AMD` and `ES2015 modules`.
 
 **CommonJS**: require/exports (module.exports)
-Sight: Server side development (Node´s default)
+Sight: Server side development (Node's default)
 Behavior: sync > modules are loaded in the consigned order and at the particular moment (on the next example, on index.js, invert the order of the 2 first lines of code to illustrate the case). Remember, no import on-demand/async/runtime.
 Result: `index.js | app.js | app.js > someFunction` Instead of: `app.js | index.js | app.js > someFunction`
 
@@ -315,7 +315,7 @@ Result: `index.js | app.js | app.js > someFunction`
 **ES2015 modules** (also known as ECMAScript 6)
 Sight: Standardization. Both client and server side.
 Behavior: sync/async compatible.  
-As we did with CommonJS invert the order of the 2 first lines of code: results don´t change since import is static and we cannot define freely where to call it.
+As we did with CommonJS invert the order of the 2 first lines of code: results don't change since import is static and we cannot define freely where to call it.
 `app.js | index.js | app.js > someFunction`
 
 Example:
@@ -379,7 +379,7 @@ What happens behind the scenes is easy: we return a Promise that will be resolve
 
 Until now, our focus was only on the App (aka, our code)... `CRA` has been effectively in charge of the rest <!--TODO:; Extend what rest is --> A good way of having a "taste" of the big picture without compromising your current work, would be: create a new app with CRA, add one Component and eject your project: `npm run eject`
 
-Here´s a screen capture comparing both `package.json`: before and after ejecting just to delight your own curiosity in case you decided to not eject a project.
+Here's a screen capture comparing both `package.json`: before and after ejecting just to delight your own curiosity in case you decided to not eject a project.
 ![Redux DevTools Dispatching](images/eject-comp.png)
 
 However, the "biggest change" will be inside `config/` and `scripts/`
@@ -410,7 +410,7 @@ We are going to move the following folders/ and files from `examples/[basic-redu
 * .gitignore
 * README.md
 
-Now... Let´s install some dependencies:
+Now... Let's install some dependencies:
 
 * nodemon
 * webpack
@@ -498,7 +498,7 @@ And create (as well) at the root level `.babelrc`
 
 Edit your public/index.html and add after your `<div id="root"></div>`
 
-Now, let´s run our `webpack-dev-server`
+Now, let's run our `webpack-dev-server`
 
 ```
 npm start
@@ -513,7 +513,7 @@ If you go to your DevConsole and open the Network tab, these request will appear
 
 The current size of our bundle.js is: 1.49 MB
 
-Let´s go back to our package.json and add a build script
+Let's go back to our package.json and add a build script
 
 ```
 "build": "webpack --config=config/webpack.config.js"
@@ -552,7 +552,7 @@ plugins: [
 ];
 ```
 
-Before proceeding, let´s add another "entry point".
+Before proceeding, let's add another "entry point".
 
 In webpack.config.js we are going to replace the value of entry with an object setting as many properties as entries we want.
 
@@ -572,10 +572,10 @@ filename: './[name]-bundle.js';
 Now, create the file: /src/other.js
 
 ```javascript
-console.log('I´m the other entry!');
+console.log('I'm the other entry!');
 ```
 
-Let´s try both:
+Let's try both:
 
 * webpack-dev-server with npm start at http://localhost:8080/
 * webpack with npm run build at file:///C:/nocra/public/index.html
@@ -610,7 +610,7 @@ stats: {
 
 This new option should just be available for webpack (webpack-dev-server is doing by default). Something similar occurs for mode: webpack should take production and webpack-dev-server development.
 
-The temptation of cloning the file and setting one for dev and other for prod could be big. But, there´s a much better way to do it and without duplicating code.
+The temptation of cloning the file and setting one for dev and other for prod could be big. But, there's a much better way to do it and without duplicating code.
 
 Install: webpack-merge
 npm install --save-dev webpack-merge
@@ -735,7 +735,7 @@ clean-webpack-plugin: 3 file(s) excluded - favicon.ico, manifest.json, template.
 
 And as you can see, all the dummy files were removed. Also, our bundles (\*.js) which were deleted (by clean-webpack-plugin) and re-generated (by webpack).
 
-Let´s continue installing dependencies. Testing time:
+Let's continue installing dependencies. Testing time:
 
 * jest
 * enzyme
@@ -795,7 +795,7 @@ Then, in package.json we will add a new script...
 }
 ```
 
-Create a simple component (we don´t care about testing in this particular moment, if not, Jest and Enzyme functionalities)
+Create a simple component (we don't care about testing in this particular moment, if not, Jest and Enzyme functionalities)
 
 src/Intro.js
 
@@ -898,7 +898,7 @@ Snapshots:   0 total
 Time:        1.9s
 ```
 
-Now, let´s reformat our UT with Enzyme: Intro.test.js
+Now, let's reformat our UT with Enzyme: Intro.test.js
 
 ```javascript
 import React from 'react';
@@ -999,7 +999,7 @@ Create the file `config/jest/jest.config.json`
 touch config/jest/jest.config.json
 ```
 
-Also, we are going to move the jest´s configuration that we have in `src/package.json` to `config/jest/jest.config.json`.
+Also, we are going to move the jest's configuration that we have in `src/package.json` to `config/jest/jest.config.json`.
 
 ```json
 {
@@ -1089,7 +1089,7 @@ Refresh your browser... Great! Now we even support IE9!
 
 ### Server Part
 
-Let´s create the folder server
+Let's create the folder server
 
 ```
 mkdir server && cd server
@@ -1236,7 +1236,7 @@ If we make a change, for example, in src/App.js we modify the h1 text, webpack w
 ![webpack-dev-middleware re-compiling](images/webpackDevMiddleware-reCompiles-express.png)
 
 However, we lost the socket connection and in consequence, the "hot reloading feature". Every time that you make a change, YOU have to reload the browser-tab manually.
-This is ok, but, impractical. So, let´s add hot-reloading through `webpack-hot-middleware`
+This is ok, but, impractical. So, let's add hot-reloading through `webpack-hot-middleware`
 
 In webpack.config.dev.js add at the top (aka, require webpack)
 
@@ -1268,7 +1268,7 @@ require('webpack-hot-middleware/client?reload=true');
 
 Run: `npm run dev`
 
-You will see in the browser´s console:
+You will see in the browser's console:
 
 ```
 [HMR] connected | client.js:88:22
@@ -1277,7 +1277,7 @@ You will see in the browser´s console:
 
 Make a change, for example, on the text of the H1 tag that we have in `src/App.js`
 
-Now, you will see in the browser´s console:
+Now, you will see in the browser's console:
 
 ```
 [HMR] bundle rebuilding | client.js:230:9
@@ -1307,7 +1307,7 @@ entry: {
 Now, everything should be working properly.
 -->
 
-We didn´t deal with `CSS` yet. So, create the file `src/App.css`
+We didn't deal with `CSS` yet. So, create the file `src/App.css`
 
 ```css
 h1 {
@@ -1326,7 +1326,7 @@ You should see the following error (in both, console and screen and in your Node
 ![Missing CSS loadeR](images/missing-css-loader.png)
 
 The message is pretty clear: webpack needs the proper loader to process other files than \*.js.
-Let´s install:
+Let's install:
 
 * style loader
 * css-loader
@@ -1423,13 +1423,13 @@ Then in `src/App.js` we are going to add the following variable
 * Import: `import cssInJs from './App.css.js';`
 * Add the style tag: `<h1 style={cssInJs.sectionTitle}>List of comments 101</h1>`
 
-There´re several CSS-in-JS libraries. Here is a graph showing the "trends" between 2017/2018 in relation to 4 of those dependencies.
+There're several CSS-in-JS libraries. Here is a graph showing the "trends" between 2017/2018 in relation to 4 of those dependencies.
 
 ![Missing CSS loadeR](images/cssInJs-trends.png)
 
 For more information: https://www.npmtrends.com/radium-vs-styled-components-vs-glamorous-vs-emotion
 
-Note: [npm trends](https://www.npmtrends.com/) is a pretty useful tool to compare "npm package´s popularity" on a certain period of time.
+Note: [npm trends](https://www.npmtrends.com/) is a pretty useful tool to compare "npm package's popularity" on a certain period of time.
 
 We are going to try [emotion](https://github.com/emotion-js/emotion)
 
@@ -1470,8 +1470,8 @@ Also add example with css``
 -->
 
 Time for handling images.
-Let´s create a new dir `src/images/` and add any image. In my case, `rPI-400x400.jpg`.
-Now, let´s import that image in our `src/App.js`
+Let's create a new dir `src/images/` and add any image. In my case, `rPI-400x400.jpg`.
+Now, let's import that image in our `src/App.js`
 
 ```javascript
 import rPI from './images/rPI-400x400.jpg';
@@ -1483,7 +1483,7 @@ We receive an error similar to the previous one:
 ERROR in ./src/images/rPI-400x400.jpg 1:0 Module parse failed: Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type. (Source code omitted for this binary file)
 ```
 
-And yes, it ´s indeed related to a missing loader.
+And yes, it 's indeed related to a missing loader.
 
 For this, we are going to install file-loader
 
@@ -1561,7 +1561,7 @@ Now, before testing the scripts, add the following in `server/index.js`
 const isProd = process.env.NODE_ENV === 'production';
 ```
 
-And wrap everything that we don´t need in `production` inside the condition: `!isProd`. Also, declare the variables outside the if statement:
+And wrap everything that we don't need in `production` inside the condition: `!isProd`. Also, declare the variables outside the if statement:
 
 ```javascript
 let webpackDevMiddleware, webpackHotMiddleware;
@@ -1584,7 +1584,7 @@ Time to test our `scripts`!
 3. `npm run dev` >> OK
 4. `npm run prod` >> ERROR: 'NODE_ENV' is not recognized as an internal or external command (\* If you are under Windows OS)
 
-If this is your case, you can adapt the script to set the variable in the "Windows´way" (something like: `SET NODE_ENV=production & node server/index.js`), however, we want to be as agnostic as we can avoiding particular "blocks of code" for x-OSs.
+If this is your case, you can adapt the script to set the variable in the "Windows'way" (something like: `SET NODE_ENV=production & node server/index.js`), however, we want to be as agnostic as we can avoiding particular "blocks of code" for x-OSs.
 
 So... As you can imagine, we are going to install a new package: cross-env
 
@@ -1604,7 +1604,7 @@ Run again: `npm run prod` >> OK
 
 5. `npm run build` >> OK
 
-Now... Let´s check that "hot reload" functionality (libraries and code) are just included in "test environments".
+Now... Let's check that "hot reload" functionality (libraries and code) are just included in "test environments".
 
 1. `npm start` >> Works, however, you will see in your browser console, example: `Firefox can’t establish a connection to the server at http://localhost:8080/__webpack_hmr.` Remember that we are not running the server (node + express >> node server/index.js) if not the client (webpack-dev-server --config config/webpack.config.dev.js).
 
@@ -1675,7 +1675,7 @@ And, inside `server/index.js`, `webpack.config.dev.js` with `webpack.config.dev.
 Try again: `npm start`. Voilà! Congratulations!
 
 2. `npm run dev` >> OK
-3. `npm run prod` >> OK (Remember that in prod you don´t have the hot reloader feature)
+3. `npm run prod` >> OK (Remember that in prod you don't have the hot reloader feature)
 4. `npm run build` >> OK
 5. `npm run build:dev` >> OK
 
@@ -1715,7 +1715,7 @@ You can limit the size of your bundles by using import() or require.ensure to la
 For more info visit https://webpack.js.org/guides/code-splitting/
 ```
 
-Don´t worry about this for the moment... Soon we will fix it, but, before addressing this point, we are going to return to how we are handling styles.
+Don't worry about this for the moment... Soon we will fix it, but, before addressing this point, we are going to return to how we are handling styles.
 Now, all our styles are part of our header:
 
 ```html
@@ -1861,7 +1861,7 @@ And, finally, we are going to replace the rule for `\.css` with:
 },
 ```
 
-Let´s test that everything is behaving properly:
+Let's test that everything is behaving properly:
 
 * `npm start`
 * `npm run build`
@@ -1932,7 +1932,7 @@ In our example we will go from 253 KiB to 252 KiB. Remember... Everything counts
 
 ---
 
-We are minifying and uglifying our CSS and JS. Now, let´s think about compression.
+We are minifying and uglifying our CSS and JS. Now, let's think about compression.
 
 Why Brotli...?
 For 5 paragraphs of lorem ipsum, Brotli beats gzip by 5%. If I run the same experiment with the front page of reddit.com from 10/01/2015, Brotli beats gzip by 22%! Note that both measurements were using the compressors out of the box without any tweaking of configuration values.
@@ -2041,7 +2041,7 @@ For the following scripts: `npm start`, `npm run dev`, `npm run build:dev` add `
 
 ---
 
-If you open, for example, `main-bundle.js` (one of webpack´s output) you will see that we have both: `vendor` (or third party) code and our `application code`. To make this "human-readable" or "human-visible" we can install `webpack-bundle-analyzer` which allows us to "visualize size of webpack output files with an interactive zoomable treemap".
+If you open, for example, `main-bundle.js` (one of webpack's output) you will see that we have both: `vendor` (or third party) code and our `application code`. To make this "human-readable" or "human-visible" we can install `webpack-bundle-analyzer` which allows us to "visualize size of webpack output files with an interactive zoomable treemap".
 
 ```
 npm install --save-dev webpack-bundle-analyzer
@@ -2064,7 +2064,7 @@ https://www.npmjs.com/package/webpack-bundle-analyzer
 
 We are going to use `SplitChunksPlugin`
 
-Before, let´s check the size of our `main-bundle.js`
+Before, let's check the size of our `main-bundle.js`
 
 ```
 npm run build
@@ -2113,7 +2113,7 @@ Result:
 ./vendors~main-bundle.js  1.61 MiB
 ```
 
-Great! Everything is working properly and now, we have our code separated from vendor´s.
+Great! Everything is working properly and now, we have our code separated from vendor's.
 
 ---
 
@@ -2142,7 +2142,7 @@ Now, we are using `HTMLWebpackPlugin`, passing an HTML template and generating (
 As we said, we are going to delegate the creation and rendering of the markup (HTML) to the express server.
 
 What happens if you want to make a build as we have been doing it previously...?
-Let´s use an "environment variable" and some conditional logic to satisfy the needs of both cases: static and dynamic HTML.
+Let's use an "environment variable" and some conditional logic to satisfy the needs of both cases: static and dynamic HTML.
 
 Create at the root level the file `.env`
 Before proceeding, **be sure that you are excluding that file from "version controlling" adding it to `.gitignore`**
@@ -2272,7 +2272,7 @@ const renderToString = require('react-dom/server').renderToString;
 const TestingSSR = require('../src/TestingSSR').default;
 ```
 
-3. Add allRoutes() to the class´s constructor.
+3. Add allRoutes() to the class's constructor.
 
 ```javascript
 constructor(app) {
@@ -2382,7 +2382,7 @@ Add the `build:server script`
 "cross-env NODE_ENV=production webpack --config config/webpack.config.prod.server.js --env.NODE_ENV=production --watch"
 ```
 
-Check that we are adding the `flag --watch` to our `build:server` script, so, every time we make a change in our `entry point file server/index.js` or any file wired up through this one, `webpack` will re-generate the bundle. Doing this, webpack will not exit and remain in watch mode (so, don´t close your terminal).
+Check that we are adding the `flag --watch` to our `build:server` script, so, every time we make a change in our `entry point file server/index.js` or any file wired up through this one, `webpack` will re-generate the bundle. Doing this, webpack will not exit and remain in watch mode (so, don't close your terminal).
 
 Also, update the `prod script`
 
@@ -2414,14 +2414,14 @@ We have 2 scripts related to our express server:
 2. `npm run prod` > node runs our server/index.js bundle: build/server-prod-bundle.js
 
 However... We want to preserve practicality, so...
-We are going to create a new script for development in the server side which is going to watch for changes, re-build the bundle and re-start the server. Remember, this is not a dev server... It´s a server which is going to work/operate/execute with our production output letting us work without having to spend too much time in the console.
+We are going to create a new script for development in the server side which is going to watch for changes, re-build the bundle and re-start the server. Remember, this is not a dev server... It's a server which is going to work/operate/execute with our production output letting us work without having to spend too much time in the console.
 For this reason we are going to call it `build:server:flex` to prevent confusions linked to the `dev` reference.
 
 ```
 "build:server:flex":"cross-env nodemon --watch build build/server-prod-bundle.js",
 ```
 
-Let´s state again our workflow:
+Let's state again our workflow:
 
 1. Generate bundle for the client side of our project: `npm run build`
 2. Generate the bundle for the server side of our project: `npm run build:server` (process should remain active)
@@ -2440,8 +2440,8 @@ Server Listening for port: 8080
 
 Bravo!
 
-If you try to run `npm start` it is NOT going to work as you may expect if you don´t have the `index.html` file in `public/`
-There´re several ways to fix this. One, is passing in our script a global variable (cross-env makes the things easier for us)
+If you try to run `npm start` it is NOT going to work as you may expect if you don't have the `index.html` file in `public/`
+There're several ways to fix this. One, is passing in our script a global variable (cross-env makes the things easier for us)
 
 In our main `package.json`
 
@@ -2458,7 +2458,7 @@ _Note_: If you have multiple instances running, you PORT may change. So, always
 
 ---
 
-At the moment we have 2 scripts running and watching for changes. This is a valid approach, however... We can simplify this to just 2 scripts: one for DEV, one for PROD (both, including the bundling and serving, or what´s the same, client and server part).
+At the moment we have 2 scripts running and watching for changes. This is a valid approach, however... We can simplify this to just 2 scripts: one for DEV, one for PROD (both, including the bundling and serving, or what's the same, client and server part).
 
 Just in case you want to easily reuse the `/examples/react-redux-webpack-client-server` example, I will clone it and do the following changes in `examples/react-redux-webpack-client-server-scripts`. All the upcoming topics, like imports, routing, etc, are going to be done in this folder.
 
@@ -2480,7 +2480,7 @@ We have been "playing" with our configuration files doing and undoing changes. T
 In our `server/server.js` we are going to make some changes to our if (!isProd) conditional. I will keep the previous code commented.
 In either case (if is prod or not) we are going to require the client and server configuration files, and, instead of passing one argument to webpack() method we are going to pass an array with both (client and server). The output that we are holding in the variable compiler will be an object; within its properties, we will find compilers which data type is an array and it holds 2 elements. We can easily refer to each one doing: compiler.compilers[index].
 
-Let´s start with the first part of our condition if (!isProd), when we are in DEV mode.
+Let's start with the first part of our condition if (!isProd), when we are in DEV mode.
 To webpack-dev-middleware we are going to pass both compilers.
 To webpack-hot-middleware, just the configuration related to our client.
 For both, we are going to use the devServer property configuration that we have in ../config/webpack.config.dev.client.js
@@ -2503,7 +2503,7 @@ IMAGE here...
 TODOOOO
 
 Earlier we said that we are using @babel/preset-env to support the last JavaScript; also, that we want an isomorphic application where we can write the same code for the "front" and the "back-end".
-So... Let´s refactor the server files: `server.js` and `BasicController.js`
+So... Let's refactor the server files: `server.js` and `BasicController.js`
 
 `server/index.js`
 
diff --git a/12_full-client-app.md b/12_full-client-app.md
index 6ac1d3c0..06e0da65 100644
--- a/12_full-client-app.md
+++ b/12_full-client-app.md
@@ -60,7 +60,7 @@ Our skeleton...
 ```
 
 You can see the full example on examples/[basic-react-redux-client-app]
-Anyway, I will add the main parts of the needed code and files to highlight the layout´s implementation.
+Anyway, I will add the main parts of the needed code and files to highlight the layout's implementation.
 
 src/index.js
 
@@ -110,7 +110,7 @@ export default Header;
 ```
 
 src/layouts/index.js
-I´m using a class component since I´ll be adding logic and some life cycles hooks/methods.
+I'm using a class component since I'll be adding logic and some life cycles hooks/methods.
 
 ```javaScript
 import Header from '../components/Header';
diff --git a/README.md b/README.md
index e7d59857..e6bf3e0d 100644
--- a/README.md
+++ b/README.md
@@ -50,7 +50,7 @@ Many things happened in `React` and its ecosystem. I will try to update the sect
 
 After several years of contributing, mentoring and working with `JS` and `React`, I decided to “put together” some notes linked to recurrent doubts and obstacles that friends and co-workers have to face daily.
 
-This is a pure practical guide (*ps*, it was at the beginning): please, keep the `practical intention` present during the course of these "shared notes"; I don´t have the intent of challenging the great and plentiful coaching classes, nor the books/"white papers" that today, you can easily find anywhere (starting with Facebook´s own proprietary documentation).
+This is a pure practical guide (*ps*, it was at the beginning): please, keep the `practical intention` present during the course of these "shared notes"; I don't have the intent of challenging the great and plentiful coaching classes, nor the books/"white papers" that today, you can easily find anywhere (starting with Facebook's own proprietary documentation).
 
 My aim, as I stated before (even with the latest add-ons and updates), is -still- clearly pragmatic. You will see some concepts and technicalities (as general and well-needed context), but you should (perhaps must) complement this "joint exercise" with other materials. I try to avoid quoting or referencing, given that an important part of your training is discovering good sources and picking those that satisfy your own and extremely personal "way to learn". However, taking a look at the mother source will not hurt you: [react](https://github.com/facebook/react).
 

From 04f65355d875a4a7f37a378bbbb2f2a9a286aa64 Mon Sep 17 00:00:00 2001
From: Al Diaz <mypersonalwebsite@outlook.com>
Date: Fri, 8 May 2026 17:46:52 -0700
Subject: [PATCH 3/4] Address CodeRabbit round-2 feedback on PR #183
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 11_webpack.md: fix two stale `src/package.json` references — both
  steps actually mean the project-root `package.json` (CRA stores
  package.json at the root, not under `src/`).
- 11_webpack.md: add a `test: /[\\/]node_modules[\\/]/` matcher to the
  `vendor` cacheGroup, plus a `name`. Without `test`, `minChunks: 2`
  would also capture app modules shared between chunks. Lowered
  `minChunks` to 1 (canonical webpack guidance for vendor isolation)
  and added a one-line note explaining the matcher.
- 11_webpack.md: convert `app.js` from `module.exports.someFunction`
  to `export const someFunction = …` so it matches the ESM named
  import in `index.js` (`import { someFunction } from './app'`); a
  named CommonJS export is not reliably importable as a named ESM
  symbol.
- 11_webpack.md: tag the previously bare ```` ``` ```` fence around
  the `build:server:flex` script with `json` (markdownlint MD040).
- README.md: "during the course of these shared notes" → "throughout
  these shared notes" (drop wordy phrasing).
---
 11_webpack.md | 16 ++++++++++------
 README.md     |  2 +-
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/11_webpack.md b/11_webpack.md
index 47bfbf63..1eeadbb1 100644
--- a/11_webpack.md
+++ b/11_webpack.md
@@ -108,7 +108,7 @@ someFunction();
 ```javaScript
 console.log('app.js');
 
-module.exports.someFunction = () => {
+export const someFunction = () => {
   console.log('app.js > someFunction');
 };
 ```
@@ -999,7 +999,7 @@ Create the file `config/jest/jest.config.json`
 touch config/jest/jest.config.json
 ```
 
-Also, we are going to move the jest's configuration that we have in `src/package.json` to `config/jest/jest.config.json`.
+Also, we are going to move the jest's configuration that we have in the project-root `package.json` to `config/jest/jest.config.json`.
 
 ```json
 {
@@ -1147,9 +1147,9 @@ Create file `server/BasicController.js`
 
 ```
 
-In our main package.json, src/package.json add a new script:
+In our main `package.json` (at the project root), add a new script:
 
-```
+```json
 "dev": "node src/server/index.js"
 ```
 
@@ -2084,15 +2084,19 @@ optimization: {
     chunks: 'all',
     cacheGroups: {
       vendor: {
+        test: /[\\/]node_modules[\\/]/,
+        name: 'vendors',
         filename: '[name].bundle.js',
         chunks: 'initial',
-        minChunks: 2
+        minChunks: 1
       }
     }
   }
 }
 ```
 
+Note the `test: /[\\/]node_modules[\\/]/` — without it, the `vendor` group would also pick up app code shared between chunks. Pinning the matcher to `node_modules` is what isolates third-party libraries.
+
 Now we will have:
 
 ```
@@ -2417,7 +2421,7 @@ However... We want to preserve practicality, so...
 We are going to create a new script for development in the server side which is going to watch for changes, re-build the bundle and re-start the server. Remember, this is not a dev server... It's a server which is going to work/operate/execute with our production output letting us work without having to spend too much time in the console.
 For this reason we are going to call it `build:server:flex` to prevent confusions linked to the `dev` reference.
 
-```
+```json
 "build:server:flex":"cross-env nodemon --watch build build/server-prod-bundle.js",
 ```
 
diff --git a/README.md b/README.md
index e6bf3e0d..05b3dc46 100644
--- a/README.md
+++ b/README.md
@@ -50,7 +50,7 @@ Many things happened in `React` and its ecosystem. I will try to update the sect
 
 After several years of contributing, mentoring and working with `JS` and `React`, I decided to “put together” some notes linked to recurrent doubts and obstacles that friends and co-workers have to face daily.
 
-This is a pure practical guide (*ps*, it was at the beginning): please, keep the `practical intention` present during the course of these "shared notes"; I don't have the intent of challenging the great and plentiful coaching classes, nor the books/"white papers" that today, you can easily find anywhere (starting with Facebook's own proprietary documentation).
+This is a pure practical guide (*ps*, it was at the beginning): please, keep the `practical intention` present throughout these "shared notes"; I don't have the intent of challenging the great and plentiful coaching classes, nor the books/"white papers" that today, you can easily find anywhere (starting with Facebook's own proprietary documentation).
 
 My aim, as I stated before (even with the latest add-ons and updates), is -still- clearly pragmatic. You will see some concepts and technicalities (as general and well-needed context), but you should (perhaps must) complement this "joint exercise" with other materials. I try to avoid quoting or referencing, given that an important part of your training is discovering good sources and picking those that satisfy your own and extremely personal "way to learn". However, taking a look at the mother source will not hurt you: [react](https://github.com/facebook/react).
 

From 98a9bc4fa9d6a8d85e98394f291e1e8fd3af86cc Mon Sep 17 00:00:00 2001
From: Al Diaz <mypersonalwebsite@outlook.com>
Date: Fri, 8 May 2026 22:38:54 -0700
Subject: [PATCH 4/4] Address CodeRabbit round-3 feedback on PR #183
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

All three findings are in 11_webpack.md npm script snippets:

- Line 1153 — `"dev": "node src/server/index.js"` → `"dev": "node server/index.js"`.
  The walkthrough creates `server/` at the project root (not under `src/`),
  so the original path would module-not-found. Last round I corrected the
  surrounding prose ("project-root package.json") but left the script body
  stale; this finishes the fix.
- Line 2425 — `build:server:flex` is run against the production server
  bundle, so it needs `NODE_ENV=production`. Added `cross-env
  NODE_ENV=production` to the existing nodemon invocation. Server logic
  branching on `process.env.NODE_ENV` would otherwise see `undefined`.
- Line 2495 — `"dev": "cross-env NODE_ENV=development nodemon --watch config --watch server"`
  is missing the entrypoint after the watch options; nodemon would fall
  back to package.json `main`. Added `server/index.js` after the watches
  so it runs the same entry used elsewhere in the chapter.
---
 11_webpack.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/11_webpack.md b/11_webpack.md
index 1eeadbb1..c587668f 100644
--- a/11_webpack.md
+++ b/11_webpack.md
@@ -1150,7 +1150,7 @@ Create file `server/BasicController.js`
 In our main `package.json` (at the project root), add a new script:
 
 ```json
-"dev": "node src/server/index.js"
+"dev": "node server/index.js"
 ```
 
 We are going to install the following middle-wares:
@@ -2422,7 +2422,7 @@ We are going to create a new script for development in the server side which is
 For this reason we are going to call it `build:server:flex` to prevent confusions linked to the `dev` reference.
 
 ```json
-"build:server:flex":"cross-env nodemon --watch build build/server-prod-bundle.js",
+"build:server:flex":"cross-env NODE_ENV=production nodemon --watch build build/server-prod-bundle.js",
 ```
 
 Let's state again our workflow:
@@ -2492,7 +2492,7 @@ For both, we are going to use the devServer property configuration that we have
 In package.json replace the dev script with...
 
 ```json
-"dev":"cross-env NODE_ENV=development nodemon --watch config --watch server",
+"dev":"cross-env NODE_ENV=development nodemon --watch config --watch server server/index.js",
 ```
 
 Nodemon will run our server and will be watching for changes in both directories: config and server, and, if something changes, it will re-run.