From 311255c312b365c77cfff46ed22071690aae217e Mon Sep 17 00:00:00 2001
From: Charles-Axel Dein <ca@d3in.org>
Date: Mon, 20 Jul 2020 18:12:51 +0200
Subject: [PATCH] Continue front-end training guide

---
 .../01-modern-javascript-typescript.md        | 81 ++++++++++++++++++-
 training/front-end/02-react.md                |  9 +++
 training/front-end/03-css-html-restart.md     |  7 ++
 .../04-front-end-development-practices.md     |  5 ++
 4 files changed, 100 insertions(+), 2 deletions(-)
 create mode 100644 training/front-end/02-react.md
 create mode 100644 training/front-end/03-css-html-restart.md
 create mode 100644 training/front-end/04-front-end-development-practices.md

diff --git a/training/front-end/01-modern-javascript-typescript.md b/training/front-end/01-modern-javascript-typescript.md
index 7f8e7bd..36a1593 100644
--- a/training/front-end/01-modern-javascript-typescript.md
+++ b/training/front-end/01-modern-javascript-typescript.md
@@ -4,6 +4,13 @@ Note: run code quickly with https://codesandbox.io/s/
 
 ## Quirks
 
+### Printing and interacting with the console
+
+```javascript
+// Do not leave console.log in your code! There are linters such as eslint that will check for their absence
+console.log("hello");
+```
+
 ### Comparing scalar, arrays, and objects
 
 #### Always use triple comparators (`===`) instead of double (`==`)
@@ -38,9 +45,19 @@ import _ from 'lodash'
 
 console.assert(_.isEqual({a: 1}, {a: 1}))
 console.assert(_.isEqual([1, 2], [1, 2]))
+```
 
+### `Object` methods
 
-## Object assignment and destructuring
+#### `Object.assign`, spread operator
+
+`Object.assign` (ES 2015)
+
+### `Array` methods
+
+#### `Array.includes` (ES7)
+
+## Object literals, assignment and destructuring
 
 ### Objects
 
@@ -54,6 +71,25 @@ console.assert(size === 2)
 // Get the rest with ...rest
 const {color, brand, ...rest} = toaster;
 console.assert(_.isEqual(rest, {size: 2}));
+
+// Set default
+const {size2 = 3} = toaster
+console.assert(size2 === 3)
+
+// Rename variables
+const {size: size3} = toaster
+console.assert(size3 === 2)
+
+// Enhances object literals
+const name = 'Louis'
+const person = {name}
+console.assert(_.isEqual(person, {name: 'Louis'}))
+
+// Dynamic properties
+const person2 = {['first' + 'Name']: 'Olympe'}
+console.assert(_.isEqual(person2, {firstName: 'Olympe'}))
+// Btw, you can include quotes although nobody does this
+console.assert(_.isEqual(person2, {'firstName': 'Olympe'}))
 ```
 
 ### Array
@@ -141,10 +177,51 @@ const myFunctionToBeShortenedArrowV2 = a => a
 console.assert(myFunctionToBeShortenedArrowV2(1) === 1)
 ```
 
-Best practices:
+### How `this` works in arrow functions
+
+### Best practices
 
 - I usually keep the parameters parenthesis. If you add a parameter, you'll have to add them back.
 
+## Classes
+
+### Prototypal inheritance
+
+## Template literals
+
+### Template tags
+
+## Loops
+
+### `for... of`
+
+Note: prefer using some functional constructs such as `map`, `reduce`, etc.
+
+## Promises
+
+### Creating a promise
+
+### Consuming a promise
+
+### Chaining promises
+
+## Async functions
+
+## Modules
+
+CommonJS syntax:
+
+ES Module syntax:
+
+- default export and imports
+- renaming imports
+
+## TypeScript
+
+### Differences between TypeScript and JavaScript
+
+### An introduction to TypeScript's type system
+
 ## References
 
 - [ES5 to ESNext — here’s every feature added to JavaScript since 2015](https://www.freecodecamp.org/news/es5-to-esnext-heres-every-feature-added-to-javascript-since-2015-d0c255e13c6e/)
diff --git a/training/front-end/02-react.md b/training/front-end/02-react.md
new file mode 100644
index 0000000..4de5abe
--- /dev/null
+++ b/training/front-end/02-react.md
@@ -0,0 +1,9 @@
+# An introduction to React
+
+## The inspiration for React
+
+## React components
+
+## An introduction to state management in React application
+
+## Testing React applications
diff --git a/training/front-end/03-css-html-restart.md b/training/front-end/03-css-html-restart.md
new file mode 100644
index 0000000..db7122d
--- /dev/null
+++ b/training/front-end/03-css-html-restart.md
@@ -0,0 +1,7 @@
+# CSS & HTML: restart
+
+## An intro to modern technologies and methodologies
+
+## Topics
+
+### Accessibility
diff --git a/training/front-end/04-front-end-development-practices.md b/training/front-end/04-front-end-development-practices.md
new file mode 100644
index 0000000..51cd886
--- /dev/null
+++ b/training/front-end/04-front-end-development-practices.md
@@ -0,0 +1,5 @@
+# Front-end development practices
+
+## Testing
+
+## Code style