diff --git a/training/front-end/01-modern-javascript.md b/training/front-end/01-modern-javascript.md index 9add317..389cd8e 100644 --- a/training/front-end/01-modern-javascript.md +++ b/training/front-end/01-modern-javascript.md @@ -39,7 +39,9 @@ - [Exports](#exports) - [Other features](#other-features) - [Optional chaining](#optional-chaining) + - [Ternary operator](#ternary-operator) - [Self assessment](#self-assessment) + - [References](#references) @@ -694,6 +696,15 @@ let nestedProp = obj.first && obj.first.second; let nestedProp = obj.first?.second; ``` +### Ternary operator + +```javascript +const a = 'a' +const r = a === 'a' ? 'isA' : 'isNotA' + +console.assert(r === 'isA') +``` + ## Self assessment - How old is JavaScript? @@ -707,6 +718,7 @@ let nestedProp = obj.first?.second; - `const a = [1]; const b = [1];`: what does `a == b` evaluates to? - How do you write arrow functions? - `const {a} = {a: 1}`: what does `a` evaluate to? +- How do you write the ternary operator? Advanced: @@ -716,6 +728,13 @@ Advanced: // Write transform1 using a one-line arrow function with object structuring console.assert(_.isEqual(transform1({name: "Foo"}), {FooA:1})) console.assert(_.isEqual(transform1({name: "Bar"}), {Bar:1})) +``` + +The three things you need: + +- Use `let` and `const` +- Object destructuring `const { a } = {a: 1}` +- Arrow functions `const noop = () => { }` Other assessments: diff --git a/training/front-end/02-react.md b/training/front-end/02-react.md new file mode 100644 index 0000000..8991b78 --- /dev/null +++ b/training/front-end/02-react.md @@ -0,0 +1,50 @@ + + +## Table of Contents + +- [An introduction to React](#an-introduction-to-react) + - [Before getting into React...](#before-getting-into-react) + - [Manipulating the DOM](#manipulating-the-dom) + - [The inspiration for React](#the-inspiration-for-react) + - [The shadow DOM](#the-shadow-dom) + - [Learning React](#learning-react) + - [Self-assessment](#self-assessment) + + + +# An introduction to React + +## Before getting into React... + +### Manipulating the DOM + +- https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +- https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction + +### The inspiration for React + +### The shadow DOM + +## Learning React + +Follow the tutorial: https://reactjs.org/docs/hello-world.html + +## Self-assessment + +Basics: + +- What is the difference between elements and components? +- What is JSX? +- Is it ok to modify props? +- How should you modify state? +- What does "the data flows down" mean? +- How do you pass arguments to event handlers? +- How do you put conditionals in JSX? +- How do you put inline if-else in JSX? +- How do you prevent a component from rendering? +- What is the `key` prop? +- What are controlled and uncontrolled components? +- What does it mean to "lift state up"? +- Should you use composition or inheritance with React? + +Advanced: diff --git a/training/front-end/02-the-browser.md b/training/front-end/04-the-browser.md similarity index 89% rename from training/front-end/02-the-browser.md rename to training/front-end/04-the-browser.md index d553196..14a4f43 100644 --- a/training/front-end/02-the-browser.md +++ b/training/front-end/04-the-browser.md @@ -16,3 +16,5 @@ ### Reading and manipulating the DOM ### Events + +https://dmitripavlutin.com/javascript-event-delegation/ diff --git a/training/front-end/04-css-html-restart.md b/training/front-end/05-css-html-restart.md similarity index 99% rename from training/front-end/04-css-html-restart.md rename to training/front-end/05-css-html-restart.md index 99d0292..2b73b5a 100644 --- a/training/front-end/04-css-html-restart.md +++ b/training/front-end/05-css-html-restart.md @@ -1,6 +1,5 @@ - ## Table of Contents - [CSS & HTML: restart](#css--html-restart) diff --git a/training/front-end/05-react.md b/training/front-end/05-react.md deleted file mode 100644 index 32de773..0000000 --- a/training/front-end/05-react.md +++ /dev/null @@ -1,24 +0,0 @@ - - -## Table of Contents - -- [An introduction to React](#an-introduction-to-react) - - [The inspiration for React](#the-inspiration-for-react) - - [The shadow DOM](#the-shadow-dom) - - [React components](#react-components) - - [An introduction to state management in React application](#an-introduction-to-state-management-in-react-application) - - [Testing React applications](#testing-react-applications) - - - -# An introduction to React - -## The inspiration for React - -## The shadow DOM - -## React components - -## An introduction to state management in React application - -## Testing React applications diff --git a/training/front-end/06-front-end-development-practices.md b/training/front-end/06-front-end-development-practices.md index a1aa354..69908ad 100644 --- a/training/front-end/06-front-end-development-practices.md +++ b/training/front-end/06-front-end-development-practices.md @@ -18,8 +18,10 @@ ## Security +- HTTPS - CORS - XSS prevention - CSP +- OWASP ## Dependency management: npm or yarn diff --git a/training/front-end/README.md b/training/front-end/README.md index 11d98a4..c16f1cd 100644 --- a/training/front-end/README.md +++ b/training/front-end/README.md @@ -2,7 +2,7 @@ ## Table of Contents -- [Introduction to front-end programming](#introduction-to-front-end-programming) +- [Introduction to front-end programming for back-end developers](#introduction-to-front-end-programming-for-back-end-developers) - [Goal of this training](#goal-of-this-training) - [Prerequisites](#prerequisites) - [To do before the course](#to-do-before-the-course) @@ -12,7 +12,7 @@ -# Introduction to front-end programming +# Introduction to front-end programming for back-end developers ## Goal of this training @@ -36,10 +36,12 @@ Read the [grab/front-end-guide](https://github.com/grab/front-end-guide) to get ## Curriculum +Instead of going deep in topics, we try to go as fast as possible to front-end programming (i.e. React with TypeScript), and then we go back to address those more specific topics. + 1. The language: writing modern Javascript -2. The environment: the browser +2. React 3. TypeScript -4. React +4. The browser 5. CSS/HTML restart 6. Front-end development practices