routing, context and suspense module

docs/markdown/06-routing-context-suspense/00-TITLE.md

@@ -0,0 +1,5 @@
+<!-- .slide: class="transition" -->
+
+# Routing, Context et Suspense
+
+Notes: 2h15

docs/markdown/06-routing-context-suspense/10-routing.md

@@ -0,0 +1,3 @@
+<!-- .slide: class="transition" -->
+
+# Routing

docs/markdown/06-routing-context-suspense/11-client-side-routing.md

@@ -0,0 +1,14 @@
+# Client-side routing
+
+- The App should behave like a website
+  - back button, deep links
+
+##==##
+
+# Client-side routing
+
+- The App should behave like a website
+  - back button, deep links
+- Problems
+  - How to project URL state in the app?
+  - How to avoid that links trigger reloads?

docs/markdown/06-routing-context-suspense/12-history-api.md

@@ -0,0 +1,54 @@
+<!-- .slide: class="with-code" -->
+
+# History API
+
+##==##
+
+<!-- .slide: class="with-code" -->
+
+# History API
+
+```TypeScript
+// navigate
+const url = new URL('/people');
+url.searchParams.set('filter', 'John');
+history.pushState({},'' ,url);
+```
+
+<!-- .element: class="big-code" -->
+
+##==##
+
+<!-- .slide: class="with-code" -->
+
+# History API
+
+```TypeScript
+// navigate
+const url = new URL('/people');
+url.searchParams.set('filter', 'John');
+history.pushState({},'' ,url);
+// go back
+history.back();
+```
+
+<!-- .element: class="big-code" -->
+
+##==##
+
+<!-- .slide: class="with-code" -->
+
+# History API
+
+```TypeScript
+// navigate
+const url = new URL('/people');
+url.searchParams.set('filter', 'John');
+history.pushState({},'' ,url);
+// go back
+history.back();
+// go forward
+history.forward();
+```
+
+<!-- .element: class="big-code" -->

docs/markdown/06-routing-context-suspense/13-react-router.md

@@ -0,0 +1,55 @@
+<!-- .slide: class="transition" -->
+
+# React Router
+
+##==##
+
+# React Router
+
+Will offer high level url / history management
+
+##==##
+
+<!-- .slide: class="with-code" -->
+
+# React Router - plain object version
+
+```TypeScript [1|3-7|4-5|6|9-11]
+import { createBrowserRouter, RouterProvider, Route, Link } from "react-router-dom";
+
+const router = createBrowserRouter([
+    { path: '/', Component: HomePage },
+    { path: '/about', Component: AboutPage },
+    { path: '*', element: <Link to="/">Back to home</Link> },
+]);
+
+createRoot(document.getElementById("root")).render(
+  <RouterProvider router={router} />
+);
+```
+
+<!-- .element: class="big-code" -->
+
+##==##
+
+<!-- .slide: class="with-code" -->
+
+# React Router - components version
+
+```TypeScript [2-8|3,7|4-5|6|11-13]
+function App() {
+    return <Routes>
+        <Route path="/" Component={Layout}>
+          <Route index Component={HomePage} />
+          <Route path="about" Component={AboutPage} />
+          <Route path="*" element={<Link to="/">Back to home</Link>} />
+        </Route>
+      </Routes>
+}
+
+createRoot(document.getElementById("root")).render(
+  <BrowserRouter><App /></BrowserRouter>
+);
+```
+
+<!-- .element: class="big-code" -->

docs/markdown/06-routing-context-suspense/14-other-routers.md

@@ -0,0 +1,10 @@
+# Other routers
+
+- `@swan-io/chicane`: A simple and safe router for React and TypeScript.
+- `@tanstack/react-router`: 🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering.
+- ...
+
+Notes:
+
+- Chicane is a very simple router fully type-safe
+- the TanStack react router is a big alternative to React Router DOM

docs/markdown/06-routing-context-suspense/15-lab-routing.md

@@ -0,0 +1,21 @@
+<!-- .slide: class="exercice" -->
+
+# Routing
+
+## Lab
+
+<small>
+
+- Setup router
+
+- Create three pages component: `HomePage`, `PeopleGridPage` and `NotFoundPage`
+
+- Create link in the top bar with the `Link` component from React Router
+
+</small>
+
+### npm run 08-routing
+
+Notes:
+
+- LIVE CODING

docs/markdown/06-routing-context-suspense/20-context.md

@@ -0,0 +1,123 @@
+<!-- .slide: class="transition" -->
+
+# Context
+
+##==##
+
+# With props
+
+![center](./assets/images/context_passing-data-lifting-state.webp)
+
+##==##
+
+# With props
+
+![center](./assets/images/context_passing-data-prop-drilling.webp)
+
+##==##
+
+# With Context
+
+![center](./assets/images/context_passing-data-context-close.webp)
+
+##==##
+
+# With Context
+
+![center](./assets/images/context_passing-data-context-far.webp)
+
+##==##
+
+<!-- .slide: class="with-code" -->
+
+# Context - create
+
+```TypeScript
+import { createContext } from 'react';
+
+export const ThemeContext = createContext<'light'|'dark'>('light');
+```
+
+<!-- .element: class="big-code" -->
+
+##==##
+
+<!-- .slide: class="with-code" -->
+
+# Context - use it
+
+```TypeScript
+function ShowColorTheme() {
+    const theme = useContext(ThemeContext);
+    return <p>{theme}</p>
+}
+```
+
+<!-- .element: class="big-code" -->
+
+##==##
+
+<!-- .slide: class="with-code" -->
+
+# Context - provide it
+
+```TypeScript
+function App() {
+    const [theme, setTheme] = useState('light');
+    return <ThemeContext.Provider value={theme}>
+        <ShowColorTheme />
+    </ThemeContext.Provider>
+}
+```
+
+<!-- .element: class="big-code" -->
+
+##==##
+
+<!-- .slide: class="with-code" -->
+
+# Context - provide it (multiple times)
+
+```TypeScript [2-11]
+function App() {
+    const [theme1, setTheme1] = useState('light');
+    const [theme2, setTheme2] = useState('dark');
+    return <>
+        <ThemeContext.Provider value={theme1}>
+            <ShowColorTheme />
+        </ThemeContext.Provider>
+        <ThemeContext.Provider value={theme2}>
+            <ShowColorTheme />
+        </ThemeContext.Provider>
+    </>
+}
+```
+
+<!-- .element: class="big-code" -->
+
+##==##
+
+<!-- .slide: class="with-code" -->
+
+# Context - wrap it all!
+
+```TypeScript [3-5|7-9|11-16]
+import { createContext } from 'react';
+
+const ThemeContext = createContext<{
+    theme:'light'|'dark', setTheme(newTheme:'light'|'dark'): void
+}>({ theme: 'light', setTheme() {} });
+
+export function useTheme() {
+    return useContext(ThemeContext);
+}
+
+export ThemeProvider() {
+    const [theme, setTheme] = useState('light');
+    return <ThemeContext.Provider value={{ theme, setTheme }}>
+        {children}
+    </ThemeContext.Provider>
+}
+```
+
+<!-- .element: class="big-code" -->

docs/markdown/06-routing-context-suspense/25-lab-context.md

@@ -0,0 +1,23 @@
+<!-- .slide: class="exercice" -->
+
+# Context
+
+## Lab
+
+<small>
+
+- Create ConfigContext
+
+- Make accessible the Context to the whole app
+
+- Use the context
+
+- Use the context to change theme color on click on the new header button
+
+</small>
+
+### npm run 09-context
+
+Notes:
+
+- LIVE CODING

docs/markdown/06-routing-context-suspense/30-suspense.md

@@ -0,0 +1,47 @@
+<!-- .slide: class="transition" -->
+
+# Suspense
+
+##==##
+
+<!-- .slide: class="with-code" -->
+
+# Suspense
+
+```TypeScript
+<Suspense fallback={<Spinner />}>
+  <LongToLoadComponent />
+</Suspense>
+```
+
+<!-- .element: class="big-code" -->
+
+##==##
+
+<!-- .slide: class="with-code" -->
+
+# Suspense and lazy loading
+
+```TypeScript [1|3|8|7,9]
+import React, { Suspense } from 'react';
+
+const LazyPeopleGrid = React.lazy(() => import('../components/PeopleGrid'));
+
+export function PeopleGridPage() {
+  return (
+    <Suspense fallback={<p>Loading...</p>}>
+        <LazyPeopleGrid />
+    </Suspense>
+  );
+}
+```
+
+<!-- .element: class="big-code" -->
+
+##==##
+
+<!-- .slide: class="with-code" -->
+
+# Suspense and lazy loading
+
+![center](./assets/images/suspense.gif)