Improve front-end training

training/front-end/02-react.md

@@ -0,0 +1,50 @@
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+## 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)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+# 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: