move counter sample to react chapter

Author: fjcalzado

03-bundling/06-vite/07-react/README.md

@@ -147,3 +147,41 @@ Install [Node.js and npm](https://nodejs.org/en/) (20.19.0 || >=22.12.0) if they
   ⚡ Remember that dependencies, which are not likely to change, are pre-bundled in development flow using `esbuild`. This process is useful to harmonize modules format and optimize the number of requests needed to consume these dependencies.
 
   ⚡ With this approach, development gets amazingly light and fast. All of your heavy dependencies are consumed from your browser cache (except an occasional update) and your source code ES modules are ready in record time, just available for your browser to request them when needed.
+
+
+## Optional - HMR
+
+- ℹ️ `@vitejs/plugin-react` package also gives support for Fast Refresh, which is the specific HMR system for React. It properly communicates with React internal API (it is not public) to integrate HMR with Vite in an effective and efficient way, allowing to change code live while dev server is running without hard reloads 
+
+- ℹ️ It means we can change our app source code live, with the dev server running, and changes will be propagated to our browser without having to reload the page nor loosing the state.
+
+- ⚡ In order to demonstrate this, let's implement a simple counter feature that gets updated automatically every second. This can be done with the following code:
+
+  _src/hello.tsx_
+
+  ```diff
+  - import { FC } from "react";
+  + import { FC, useEffect, useState } from "react";
+
+    export const HelloComponent: FC = () => {
+  +   const [counter, setCounter] = useState(0);
+
+  +   useEffect(() => {
+  +     const timer = setInterval(() => {
+  +       setCounter(prev => prev + 1);
+  +     }, 1_000);
+
+  +     return () => clearInterval(timer);
+  +   }, []);
+
+      return (
+        <>
+          <h2>Hello from React</h2>
+  +       <p>Counter state: {counter}</p>
+          <a
+
+  ```
+
+- 🔎 Now see the difference:
+  - If you reload the page manually, counter gets reset to 0 again.
+  - If you change something in your source code, app gets updated but counter does not loose its count.

03-bundling/06-vite/07-react/src/hello.tsx

@@ -1,5 +1,20 @@
-import { FC } from "react";
+import { FC, useEffect, useState } from "react";
 
 export const HelloComponent: FC = () => {
-  return <h2>Hello from React</h2>;
+  const [counter, setCounter] = useState(0);
+
+   useEffect(() => {
+     const timer = setInterval(() => {
+       setCounter(prev => prev + 1);
+     }, 1_000);
+
+     return () => clearInterval(timer);
+   }, []);
+
+  return (
+    <>
+      <h2>Hello from React</h2>
+      <p>Counter state: {counter}</p>
+    </>
+  );
 };

03-bundling/06-vite/10-code-splitting/README.md

@@ -32,38 +32,6 @@ Install [Node.js and npm](https://nodejs.org/en/) (20.19.0 || >=22.12.0) if they
 
 This means parts of the code are only loaded when needed (e.g. when a user navigates to a specific page or triggers a certain action), which reduces the initial bundle size, improves load times, and enhances user experience.
 
-- ⚡ As a pre-step to prepare our sample, let's extend our app functionality with a simple counter feature that gets updated automatically every second. This can be done with the following code:
-
-  _src/hello.tsx_
-
-  ```diff
-  - import { FC } from "react";
-  + import { FC, useEffect, useState } from "react";
-    import config from "./env-config";
-
-    export const HelloComponent: FC = () => {
-  +   const [counter, setCounter] = useState(0);
-
-  +   useEffect(() => {
-  +     const timer = setInterval(() => {
-  +       setCounter(prev => prev + 1);
-  +     }, 1_000);
-
-  +     return () => clearInterval(timer);
-  +   }, []);
-
-      return (
-        <>
-          <h2>Hello from React</h2>
-          <p>Api server is {config.API_BASE}</p>
-          <p>Feature A is {config.IS_FEATURE_A_ENABLED ? "enabled" : "disabled"}</p>
-  +       <p>Counter state: {counter}</p>
-          <a
-
-  ```
-
-  🔎 You can now check the browser to see the counter automatically getting increased.
-
 Now we can go the topic: **code splitting**. In this example we're going to use a module that is loaded on demand.
 
 - Let's add _src/math.ts_ file.