Prep for Spring 2023

A00-welcome-js-recap.md

@@ -1,2 +1,11 @@
-- 🖥  [Slides](https://docs.google.com/presentation/d/1htKCGdroUouI6CP_OsFd0LPuijGOQFFHPe9j80F0Gdc/edit?usp=sharing)
+# Welcome and JavaScript Recap
+
+### Slides and Resources
+
+- 🖥  [Slides](https://docs.google.com/presentation/d/1u-Gq4xjuXUlZx_8fw05dzwyZx9Fqwv71ctFy7I2IXhg/edit#slide=id.gc38bd7d9bd_0_446)
+- 🖥  [Slides (older)](https://docs.google.com/presentation/d/1htKCGdroUouI6CP_OsFd0LPuijGOQFFHPe9j80F0Gdc/edit?usp=sharing)
 - 📝 [Very detailed yet simple explanation of imports and exports in JS](https://javascript.info/import-export)
+
+- 🖥  [Slides](https://docs.google.com/presentation/d/1nW1svdquV8yyv6oOL7eWV99z15BRheMroc1_mXK4s0o/edit#slide=id.gc38bd7d9bd_0_446)
+- 📦 [Object destructuring exercise](https://codesandbox.io/s/object-destructuring-xlj5l?file=/src/App.js)
+- 📦 [Array destructuring exercise](https://codesandbox.io/s/array-destructuring-335bk?file=/src/App.js)

A01-arrow-functions.md

@@ -1,9 +1,9 @@
-# Slides and Exercise
+# Arrow functions
+
+### Slides and Exercise
 - 🖥  [Slides](https://docs.google.com/presentation/d/1MB9AaCyRVAjUNrixk78ezHAVR8d2IZyb44jXdCwxR-0/edit#slide=id.gc566285963_0_219)
 - ✏️ [Fun with Arrays (with answers)](https://codesandbox.io/s/fun-with-arrays-with-answers-3p8tv?file=/src/App.js)
 
-# Arrow functions
-
 Read more: [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions](https://developer.mozilla.org/en-US/docs/Web/)
 
 Arrow functions are a different way of creating functions in JavaScript. Besides a shorter syntax, they offer advantages when it comes to keeping the scope of the this keyword (see here).

A01-const-vs-let.md

@@ -8,11 +8,11 @@ US/docs/Web/JavaScript/Reference/Statements/const](https://developer.mozilla.org
 
 `let` and `const` basically replace `var`. You use `let` instead of `var` and `const` instead of `var` if you plan on never re-assigning this "variable" effectively turning it into a constant therefore).
 
-# Resources
+### Resources
 
 - [Javascript.info: Variables](https://javascript.info/variables)
 
-# Exercises
+### Exercises
 
 - Working with variables: [https://javascript.info/task/hello-variables](https://javascript.info/task/hello-variables)
 - Giving the right name:: [https://javascript.info/task/declare-variables](https://javascript.info/task/declare-variables)

A03-modules-exports-and-imports.md

@@ -26,11 +26,11 @@ When importing **named exports**, you can also import all named exports at once
 
 `upToYou` is - well - up to you and simply bundles all exported variables/functions in one JavaScript object. For example, if you export `export const someData = ...` (`/path/to/file.js`) you can access `upToYou` like this: `upToYou.someData`.
 
-# Resources
+### Resources
 
 - [Javascript.info: Export and Import](https://javascript.info/import-export)
 
-# Exercises
+### Exercises
 
 - [Create a Module Script](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/es6/create-a-module-script)
 - [Use export to Share a Code Block](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/es6/use-export-to-share-a-code-block)

A04-spread-rest-operator.md

@@ -1,10 +1,11 @@
 Credit: [javascript.info](http://javascript.info), [freecodecamp.org](http://freecodecamp.org)
 
 # Exercise
-- 🖥  [Slides](https://docs.google.com/presentation/d/1nW1svdquV8yyv6oOL7eWV99z15BRheMroc1_mXK4s0o/edit#slide=id.gc38bd7d9bd_0_446)
+- 🖥  [Slides](https://docs.google.com/presentation/d/1SxWqPxy146xlfwiC_T1eJwssSmgoSGaudFY9zK85VOs)
 - 📦 [Object destructuring exercise](https://codesandbox.io/s/object-destructuring-xlj5l?file=/src/App.js)
 - 📦 [Array destructuring exercise](https://codesandbox.io/s/array-destructuring-335bk?file=/src/App.js)
 - 📦 [Destructuring and spread exercises](https://codesandbox.io/s/js-for-react-destructuring-and-spread-d1of5)
+- 📦 [Slides examples in sandbox](https://codesandbox.io/p/sandbox/priceless-sky-icjjit?file=%2FREADME.md)
 
 
 # Spread & Rest Operator

A05-forEach-map-filter-reduce-string-interpolation.md

@@ -1,10 +1,10 @@
 Credit: [https://javascript.info/](https://javascript.info/), [https://www.freecodecamp.org/](https://www.freecodecamp.org/)
 
+# Slides and Exercise
 
-# Exercise
+- 🖥 [Slides](https://docs.google.com/presentation/d/1SxWqPxy146xlfwiC_T1eJwssSmgoSGaudFY9zK85VOs)
 - 📦 [forEach, map, reduce, filter exercises](https://codesandbox.io/s/js-for-react-foreach-map-reduce-filter-3pmzx)
-- 
-
+- 📦 [Slides examples in sandbox](https://codesandbox.io/p/sandbox/priceless-sky-icjjit?file=%2FREADME.md)
 
 # Concepts
 
@@ -14,40 +14,50 @@ The [arr.forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refer
 
 The syntax:
 
-```jsx
-arr.forEach(function(item, index, array) {
-	// ... do something with item
-});
+```js
+forEach(function (element, index, array) { /* … */ }, thisArg)
 ```
 
-For instance, this shows each element of the array:
+where,
 
-```jsx
-// for each element call alert
-["Bilbo", "Gandalf", "Nazgul"].forEach(alert);
-```
+*element*
+The current element being processed in the array.
 
-And this code is more elaborate about their positions in the target array:
+*index*
+The index of the current element being processed in the array.
 
-```jsx
+*array*
+The array forEach() was called upon.
+
+
+**examples**
+
+```js
+// This shows each element of the array
+["Bilbo", "Gandalf", "Nazgul"].forEach(element => console.log(element));
+
+```
+
+```js
+// And this code is more elaborate about their positions in the target array
 ["Bilbo", "Gandalf", "Nazgul"].forEach((item, index, array) => {
-	alert(`${item} is at index ${index} in ${array}`);
+	console.log(`${item} is at index ${index} in ${array}`);
 });
 ```
 
 The result of the function (if it returns any) is thrown away and ignored.
 
 ## [Filter](https://javascript.info/array-methods#filter)
 
-The `[find](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find)` method looks for a single (first) element that makes the function return `true`.
-
 If there may be many, we can use [arr.filter(fn)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter).
 
 The syntax is similar to `find`, but `filter` returns an array of all matching elements:
 
 ```jsx
-let results = arr.filter(function(item, index, array) {
-		// if true item is pushed to results and the iteration continue
+filter(function (element, index, array) { /* … */ }, thisArg)
+
+let results = arr.filter(function(element, index, array) {
+		// if true element is pushed to results and the iteration continue
 	// returns empty array if nothing found
 });
 ```
@@ -64,7 +74,7 @@ let users = [
 // returns array of the first two users
 let someUsers = users.filter(item => item.id < 3);
 
-alert(someUsers.length); // 2
+console.log(someUsers.length); // 2
 ```
 
 ## [Transform an array: `map`](https://javascript.info/array-methods#map)
@@ -76,16 +86,31 @@ It calls the function for each element of the array and returns the array of res
 The syntax is:
 
 ```jsx
-let result = arr.map(function(item, index, array) {
-	// returns the new value instead of item
-});
+map(function (element, index, array) { /* … */ }, thisArg)
 ```
 
 For instance, here we transform each element into its length:
 
 ```jsx
 let lengths = ["Bilbo", "Gandalf", "Nazgul"].map(item => item.length);
-alert(lengths); // 5,7,6
+console.log(lengths); // 5,7,6
+```
+
+## [Reduction of an array: `reduce`](https://javascript.info/array-methods#reduce)
+
+The [arr.reduce](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce) method executes a user-supplied "reducer" callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value..
+
+The syntax is:
+
+```jsx
+reduce((accumulator, currentValue, currentIndex, array) => { /* … */ }, initialValue)
+```
+
+Example to calculate sum of all elements of an array
+
+```jsx
+let sum = [1, 2, 3, 4].reduce((accumulator, currentValue) => accumulator + currentValue, 0);
+console.log(sum); // 10
 ```
 
 ## All methods together

B03-jsx.md → B03-intro-to-jsx.md

@@ -1,10 +1,11 @@
-# Exercise and Slides
+# Introduction to JSX
+
 - 🖥  [Slides](https://docs.google.com/presentation/d/1ODDEITggZ5zdOkYu-s-XwZkSBqRqhPuXpuwsE5Ng0oU/edit?usp=sharing)
+- [Exercise](https://codesandbox.io/s/react-jsx-intro-exercise-cfthh)
 - 📦 [Homework](https://codesandbox.io/s/redi-react-2021-jsx-homework-5qu7v)
 - 🌐 [Reference site for homework](https://redi-react-2021-jsx-homework.netlify.app/)
 - ✏️ [One potential solution for the homework](https://codesandbox.io/s/redi-react-2021-jsx-solution-gsli2)
-
-
+- [Exercise: Conditionals](https://codesandbox.io/s/redi-react-jsx-conditionals-mgf0x)
 
 One of the first things you probably noticed about React code is that it looks like the component function is returning HTML. This HTML-like syntax is actually called JSX.
 

B07-conditional-rendering.md

@@ -1,4 +1,6 @@
-# Slides and Resources
-- 🖥  [Slides](https://docs.google.com/presentation/d/1Co3je-0xOGOWNFvoiQjAb3RZhtF4YfOo0kTq0c0asUM/edit#slide=id.g641d900745_8_1)
+# Conditional Rendering, Rendering Lists and Handling Events
+### Slides and Resources
+- 🖥  [Slides](https://docs.google.com/presentation/d/1ofDO5ARwrb8gm-F1wbaJrn6JcBO7i2nGOnL-QB54rtI/edit#slide=id.g641d900745_8_1)
+- 🖥  [Slides (older)](https://docs.google.com/presentation/d/1Co3je-0xOGOWNFvoiQjAb3RZhtF4YfOo0kTq0c0asUM/edit#slide=id.g641d900745_8_1)
 - 📦  [Homework](https://codesandbox.io/s/portfolio-skills-list-unnwl)
 - ✏️ [Anil's solution for the event handling exercise](https://codesandbox.io/s/event-handlers-forked-yd1nd)

B09-event-handling.md

@@ -1,3 +1,6 @@
-# Slides and Resources:
+# Event Handling
+
+### Slides and Resources
+
 - 🏁 [Review quiz](https://kahoot.it/challenge/03404603?challenge-id=ccaf4dd8-8059-4c09-8226-c2affa4f1a45_1617126698005)
 - 📦 [ToDo app exercise](https://codesandbox.io/s/redi-week-05-exercises-wplqq?file=/src/App.js)

C01-components-reusability-props.md

@@ -1,4 +1,5 @@
-# Resources and Exercises
+# Components, Reusability and Props
+## Resources and Exercises
 
 - 🖥  [Slides](https://docs.google.com/presentation/d/1yRmWXFaqVZ1ekhrNV3OGp4t6loph1IHujylr3FjXuWM/edit#slide=id.gc38bd7d9bd_0_446)
 - 📦 [Cool Clicking Game Exercise](https://codesandbox.io/s/cool-clicking-game-exercise-3lrep?file=/src/App.js)