sfeir-open-source · dujardin-quentin · Dec 23, 2022
diff --git a/apps/docs/markdown/01-fundamentals/02-definition.md b/apps/docs/markdown/01-fundamentals/02-definition.md
@@ -0,0 +1,32 @@
+<!-- .slide: class="center" -->
+
+# **What's React?**
+
+- JavaScript Library for rendering user interfaces (UI) made by Facebook (Meta)
+- Functional approach to the web development (Front)
+- Component oriented
+- Under MIT License
+<!-- .element: class="list-fragment" -->
+
+##==##
+<!-- .slide: class="center" -->
+
+# **Why React?**
+
+- Reactive UI
+- Reusable and composable Components
+- State and Props management
+- Working directly with the DOM may be hard (and a time eater)
+<!-- .element: class="list-fragment" -->
+
+##==##
+<!-- .slide: class="center" -->
+
+# **How React?**
+
+- Virtual DOM (ReactDOM)
+  - The interface between our application and the browser DOM
+  - Builds and modify our Components directly to the DOM
+  - Receives the Events from the DOM (ie: onClick, onChange, ..)
+  - Refresh/re-render the Components based on modifications
+<!-- .element: class="list-fragment" -->
diff --git a/apps/docs/markdown/01-fundamentals/03-example.md b/apps/docs/markdown/01-fundamentals/03-example.md
@@ -0,0 +1,71 @@
+<!-- .slide: class="with-code" -->
+# Say Hello to the World
+
+Index.html
+```html [4-6]
+<html>
+    <head>...</head>
+    <body>
+        <div>
+            Hello World
+        </div>
+    </body>
+</html>
+```
+
+##==##
+<!-- .slide: class="with-code" -->
+# Say Hello to the World
+
+Index.html
+```html [4-8]
+<html>
+    <head>...</head>
+    <body>
+        <div id="root"></div>
+        <script>
+            const root = document.getElementById('root');
+            root.innerHTML = "Hello World";
+        </script>
+    </body>
+</html>
+```
+
+##==##
+<!-- .slide: class="with-code" -->
+# Say Hello to the World
+
+Index.html
+```html [5-9]
+<html>
+    <head>...</head>
+    <body>
+        <div id="root"></div>
+        <script>
+            const root = ReactDOM.createRoot(document.getElementById('root'));
+            root.render("Hello World");
+        </script>
+    </body>
+</html>
+```
+
+##==##
+<!-- .slide: class="with-code" -->
+# Say Hello to the World
+
+Index.html
+```html [5]
+<html>
+    <head>...</head>
+    <body>
+        <div id="root"></div>
+        <script type="text/babel" src="settings.js"></script>
+    </body>
+</html>
+```
+
+settings.js
+```javascript []
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render("Hello World");
+```
diff --git a/apps/docs/markdown/01-fundamentals/04-components.md b/apps/docs/markdown/01-fundamentals/04-components.md
@@ -0,0 +1,64 @@
+<!-- .slide: class="with-code" -->
+# Components
+
+- JavaScript function
+- Independent and isolated pieces of UI
+- Reusable : use them anywhere
+- Composable : use them to create other components
+- Has its own lifecycle
+
+##==##
+<!-- .slide: class="with-code two-column" -->
+
+card.js
+```javascript []
+export function Card() {
+    return "<h1>Hello World</h1>"
+}
+```
+
+settings.js
+```javascript []
+import { Card } from './components/card.js';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<Card />);
+```
+
+index.html
+```html []
+<html>
+    <head>...</head>
+    <body>
+        <div id="root"></div>
+        <script type="text/babel" src="settings.js"></script>
+    </body>
+</html>
+```
+
+##==##
+<b>Preview</b>
+
+\<h1>Hello World\</h1>
+
+<i style="color: red">Oops! the "h1" is not interpreted by my browser, why?</i>
+
+- We rendered this via our Virtual DOM by saying 'I want a string like this: "\<h1>Hello World\</h1>"'
+```javascript []
+export function Card() {
+    return "<h1>Hello World</h1>"
+}
+```
+- We must use another way to describe the fact we want to render a h1 with "Hello World"
+```javascript []
+export function Card() {
+    return React.createElement("h1", { }, "Hello World");
+}
+```
+- React.createElement can be very verbose so we use something better : JSX
+```javascript []
+export function Card() {
+    return (<h1>Hello World</h1>);
+}
+```
+<!-- .element: class="list-fragment" -->
diff --git a/apps/docs/markdown/01-fundamentals/05-jsx.md b/apps/docs/markdown/01-fundamentals/05-jsx.md
@@ -0,0 +1,48 @@
+<!-- .slide: class="center" -->
+# JSX
+
+<i>Syntax extension for JavaScript that lets you write "HTML-Like" markup</i>
+
+Rules
+  1. Return a single root element<br>
+<i>You will have to wrap your elements into a \<div> or a \<React.Fragment> / <></i><br><br>
+  2. Close all the tags<br>
+<i>JSX requires tags like img/li/.. to be explicitly closed</i><br><br>
+  3. Use camelCase for attributes to avoid dashes and reserved words (like class, stroke-width)<br>
+<i>JSX turns into JavaScript and attributes written in JSX become keys of JavaScript objects.<br>(ie: "class" -> "className", "stroke-width" -> "strokeWidth")</i>
+
+##==##
+
+<!-- .slide: class="with-code two-column" -->
+React.createElement
+
+```javascript []
+export function Dashboard() {
+    // Display a div which contains an ordered list of three elements
+
+    return React.createElement("div", { },
+                React.createElement("ol", { },
+                    React.createElement("li", { }, "One"),
+                    React.createElement("li", { }, "Two"),
+                    React.createElement("li", { }, "Three")));
+}
+```
+
+##--##
+JSX
+
+```javascript []
+export function Dashboard() {
+    // Display a div which contains an ordered list of three elements
+
+    return (
+        <div>
+            <ol>
+                <li>One</li>
+                <li>Two</li>
+                <li>Three</li>
+            </ol>
+        </div>
+    );
+}
+```
diff --git a/apps/docs/markdown/01-fundamentals/09-exercice.md b/apps/docs/markdown/01-fundamentals/09-exercice.md
@@ -2,28 +2,38 @@
 # Create your first Component
 ## Ex 01
 
-1.  Create a Component "xxx"
+1.  Create a Component "Card"
 2.  Returns the HTML
 3.  Use the Component in the Parent
 <!-- .element: class="list-fragment" -->
 
 ##--##
-<!-- .slide: class="with-code" -->
-# Solution xx
+<!-- .slide: -->
+# Solution 01
 
-Index.html
-```html [5]
-<html lang="en">
-    <head>...</head>
-    <body>
-        <div id="root">
-            <Card />
-        </div>
-    </body>
-</html>
+card.js
+```javascript []
+export function Card() {
+  return (
+    <div>
+      <span>Nom - Prénom</span>
+    </div>
+  );
+}
 ```
 
-Card.ts
+main.tsx
 ```javascript []
-export function Card() { return <span>Hello World</span> }
+import { createRoot } from 'react-dom/client';
+import { Card } from './components/card/Card';
+
+// Get the root Container
+const rootContainer = document.getElementById('root');
+
+// Create the Root in my Virtual DOM
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+const root = createRoot(rootContainer!);
+
+// Render my Card Component
+root.render(<Card />);
 ```
diff --git a/apps/docs/scripts/slides.js b/apps/docs/scripts/slides.js
@@ -16,7 +16,10 @@ const fundamentals = [
   '01-fundamentals',
   [
     '01-presentation',
-
+    '02-definition',
+    '03-example',
+    '04-components',
+    '05-jsx',
     '09-exercice'
   ],
 ];

diff --git a/apps/exercice01-solution/.babelrc b/apps/exercice01-solution/.babelrc
@@ -0,0 +1,11 @@
+{
+  "presets": [
+    [
+      "@nrwl/react/babel",
+      {
+        "runtime": "automatic"
+      }
+    ]
+  ],
+  "plugins": []
+}
diff --git a/apps/exercice01-solution/.browserslistrc b/apps/exercice01-solution/.browserslistrc
@@ -0,0 +1,16 @@
+# This file is used by:
+# 1. autoprefixer to adjust CSS to support the below specified browsers
+# 2. babel preset-env to adjust included polyfills
+#
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+#
+# If you need to support different browsers in production, you may tweak the list below.
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major version
+last 2 iOS major versions
+Firefox ESR
+not IE 9-11 # For IE 9-11 support, remove 'not'.
diff --git a/apps/exercice01-solution/.env b/apps/exercice01-solution/.env
@@ -0,0 +1 @@
+NX_PEOPLE_API=http://localhost:3000/people
diff --git a/apps/exercice01-solution/.eslintrc.json b/apps/exercice01-solution/.eslintrc.json
@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/apps/exercice01-solution/jest-setup.ts b/apps/exercice01-solution/jest-setup.ts
@@ -0,0 +1 @@
+import '@testing-library/jest-dom';
diff --git a/apps/exercice01-solution/jest.config.js b/apps/exercice01-solution/jest.config.js
@@ -0,0 +1,10 @@
+module.exports = {
+  displayName: 'solution',
+  preset: '../../jest.preset.js',
+  transform: {
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nrwl/react/plugins/jest',
+    '^.+\\.[tj]sx?$': 'babel-jest',
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: '../../coverage/apps/solution',
+};
diff --git a/apps/exercice01-solution/src/assets/.gitkeep b/apps/exercice01-solution/src/assets/.gitkeep
diff --git a/apps/exercice01-solution/src/components/card/Card.tsx b/apps/exercice01-solution/src/components/card/Card.tsx
@@ -0,0 +1,7 @@
+export function Card() {
+  return (
+    <div>
+      <span>Nom - Prénom</span>
+    </div>
+  );
+}
diff --git a/apps/exercice01-solution/src/favicon.ico b/apps/exercice01-solution/src/favicon.ico
diff --git a/apps/exercice01-solution/src/index.html b/apps/exercice01-solution/src/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Exercice 01</title>
+    <base href="/" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/apps/exercice01-solution/src/main.tsx b/apps/exercice01-solution/src/main.tsx
@@ -0,0 +1,12 @@
+import { createRoot } from 'react-dom/client';
+import { Card } from './components/card/Card';
+
+// Get the root Container
+const rootContainer = document.getElementById('root');
+
+// Create the Root in my Virtual DOM
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+const root = createRoot(rootContainer!);
+
+// Render my Card Component
+root.render(<Card />);
diff --git a/apps/exercice01-solution/src/polyfills.ts b/apps/exercice01-solution/src/polyfills.ts
@@ -0,0 +1,7 @@
+/**
+ * Polyfill stable language features. These imports will be optimized by `@babel/preset-env`.
+ *
+ * See: https://github.com/zloirock/core-js#babel
+ */
+import 'core-js/stable';
+import 'regenerator-runtime/runtime';