feat(docs): rework first slides

Author: Antoine RICHARD

docs/markdown/00-school/00-TITLE.md

@@ -3,22 +3,3 @@
 # **Welcome to SFEIR School**
 
 ## **React**
-
-##==##
-
-# Déroulement de la formation
-
-<p class="center">
-C'est quand la pause ?<br>
-Quand est-ce qu'on mange ?<br>
-Tour de table ...
-</p>
-<br><br>
-
-**Feuille de présence (obligatoire)** <!-- .element: class="center" -->
-
-##==##
-
-# Repository
-
-https://github.com/sfeir-open-source/sfeir-school-react <!-- .element: class="center" -->

docs/markdown/00-school/12-information.md

@@ -0,0 +1,12 @@
+<!-- .slide: class="center" -->
+
+# Practical information
+
+<p class="center">
+When's the break ? <br/>
+When do we eat? <br/>
+Are there any constraints? <br/>
+</p>
+<br><br>
+
+**Attendance sheet (required)** <!-- .element: class="center" -->

docs/markdown/00-school/13-requirements.md

@@ -0,0 +1,15 @@
+<!-- .slide: class="center" -->
+
+# Requirements
+
+<p class="center">
+Basic knowledge of HTML and CSS <br/>
+Basic knowledge of Typescript <br/>
+</p>
+<br/><br/>
+
+## Technical requirements
+
+Node >= v18 <br/>
+npm <br/>
+IDE : VSCode or Webstorm recommanded <br/>

docs/markdown/00-school/01-wifi.md renamed to docs/markdown/00-school/14-wifi.md

@@ -1,11 +1,3 @@
 # Repository
 
 https://github.com/sfeir-open-source/sfeir-school-react <!-- .element: class="center" -->
-
-##==##
-
-# Requirements
-
-- Node v18
-- npm
-- A IDE: VSCode or WebStorm recommanded

docs/markdown/00-school/02-repository.md renamed to docs/markdown/00-school/15-repository.md

@@ -2,18 +2,31 @@
 
 # What we will do
 
-* Explore key concepts of React
+- **Explore key concepts of React**
 
 I will show slides and do some live coding
 
-* Practice with hands-on exercises
+- **Practice with hands-on exercises**
 
 You will code, I will help
 
-* Breaks when appropriate
+- **Breaks when appropriate**
 
 Have lunch, play babyfoot
 
+##==##
 
+# What we will do
 
-
+## Plan
+
+- Module 1 : **Nodes - elements and components**
+- Module 2 : **States and events**
+- Module 3 : **Lifecycles & DOM**
+- Module 4 : **Custom hooks and Higher Order Components**
+- Module 5 : **Routing, Context and Suspense API**
+- Module 6 : **Forms**
+- Module 8 : **Global state management**
+- Module 9 : **Components library and testing**
+- Module 10 : **Code optimization**
+- **Further exploration** : Last React Features (Server Components, Streaming, Partial Hydration ...)

docs/markdown/00-school/20-what-we-will-do.md

@@ -1,35 +1,64 @@
 <!-- .slide: class="center" -->
 
-# Components
+# Some vocabulary
 
-<br />
+**UI = f(state)**<br/>
+user interface is a function of the state. When the state changes, the UI updates.
 
-## UI = f(state)
+##==##
+
+<!-- .slide: class="center" -->
+
+# Some vocabulary
+
+**UI = f(state)**<br/>
+user interface is a function of the state. When the state changes, the UI updates.<br/><br/>
+**Component = (props) => Node**<br/>
+A React component is simply a function that :
+
+- Takes props as input
+- Returns a Node (what you want to render)
 
 ##==##
 
 <!-- .slide: class="center" -->
 
-# Components
+# Some vocabulary
 
-<br />
+**UI = f(state)**<br/>
+user interface is a function of the state. When the state changes, the UI updates.<br/><br/>
+**Component = (props) => Node**<br/>
+A React component is simply a function that :
 
-## UI = f(state)
+<div>
 
-## Element = Component(props)
+- Takes props as input
+- Returns a Node (what you want to render)<br/><br/>
 
+</div>
+
+**type Node = Element | Fragment | string | null | Node[]**<br/>
+This is what you component returns
 ##==##
 
 <!-- .slide: class="center" -->
 
-# Components
+# Some vocabulary
+
+**UI = f(state)**<br/>
+user interface is a function of the state. When the state changes, the UI updates.<br/><br/>
+**Component = (props) => Node**<br/>
+A React component is simply a function that :
 
-<br />
+<div>
 
-## UI = f(state)
+- Takes props as input
+- Returns a Node (what you want to render)<br/><br/>
 
-## Element = Component(props)
+</div>
 
-## Component : (props) => Node
+**type Node = Element | Fragment | string | null | Node[]**<br/>
+This is what you component returns <br/> <br/>
 
-## type Node = Element | Fragment | string | null | Node[]
+**Element = Component(props)**<br/>
+A React Element is an instance of a Component

docs/markdown/02-nodes-elements-components/10-component-theory.md

@@ -5,15 +5,17 @@ function schoolSlides() {
   const dir = '00-school';
   return [
     `${dir}/00-TITLE.md`,
-    `${dir}/01-wifi.md`,
-    `${dir}/02-repository.md`,
     `${dir}/10-speaker-ape.md`,
     `${dir}/10-speaker-jhe.md`,
     `${dir}/10-speaker-jta.md`,
     `${dir}/10-speaker-rto.md`,
     `${dir}/10-speaker-tsl.md`,
     `${dir}/10-speaker-ari.md`,
     `${dir}/11-tour-de-table.md`,
+    `${dir}/12-information.md`,
+    `${dir}/13-requirements.md`,
+    `${dir}/14-wifi.md`,
+    `${dir}/15-repository.md`,
     `${dir}/20-what-we-will-do.md`,
   ];
 }