update readme

Miguel Angel Chimali Cobano · Miguel Angel Chimali Cobano · commit 382fa67e01dc · 2025-09-19T22:19:02.000+02:00
diff --git a/04-frameworks/01-react/05-architecture/01-routes/readme.md b/04-frameworks/01-react/05-architecture/01-routes/readme.md
@@ -54,7 +54,7 @@ But if were importing this scene from a subfolder we would start having the
 dot dot hell, we could end up with imports like _../../../scenes/login_, why
 not creating aliases for the root folders that could be accessed in a simple way?
 
-We can defined paths in _tsconfig_ and aliases in _webpack_ uuh wait but then
+We can defined paths in _tsconfig_ and aliases in _vite_ uuh wait but then
 we have to define similar stuff in two places, let's provide a solution that
 would avoid this, first of all we are going to define and _@_ alias in our
 _tsconfig.json_:
@@ -63,58 +63,32 @@ _tsconfig.json_
 
 ```diff
     "esModuleInterop": true,
-+    "baseUrl": "src",
++    "baseUrl": "./src",
 +    "paths": {
 +      "@/*": ["*"]
 +    }
-  },
 ```
 
-Cool now we could add this configuration to webpack (WAIT do not do that):
-
-_webpack.config.json_
-
-```diff
-  resolve: {
-    extensions: [".js", ".ts", ".tsx"],
-+   alias: {
-+     '@': path.resolve(__dirname, 'src'),
-+   },
-  },
-```
-
-But since we don't want to repeat code, let's see if somebody has
-implemented some magic to allow webpack read this configuration from
-the _tsconfig_
-
-We have two approaches:
-
-- Gist source code: https://gist.github.com/nerdyman/2f97b24ab826623bff9202750013f99e
-
-- Webpack plugin: https://www.npmjs.com/package/tsconfig-paths-webpack-plugin
-
-Let's go for the webpack plugin option:
+Let's install the library to allow Vite infer the aliases from the Typescript configuration:
 
 ```bash
-npm install tsconfig-paths-webpack-plugin --save-dev
+npm i vite-tsconfig-paths -D
 ```
 
 Now let's consume this plugin:
 
-_./webpack.config.js_
+_./vite.config.ts_
 
 ```diff
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-+ const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
-const path = require("path");
-const basePath = __dirname;
-
-module.exports = {
-  context: path.join(basePath, "src"),
-  resolve: {
-    extensions: [".js", ".ts", ".tsx"],
-+   plugins: [new TsconfigPathsPlugin()]
-  },
+import { defineConfig } from "vite";
+import checker from "vite-plugin-checker";
+import react from "@vitejs/plugin-react";
++ import tsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+-  plugins: [checker({ typescript: true }), react()],
++  plugins: [tsconfigPaths(), checker({ typescript: true }), react()],
+});
 ```
 
 Now we can update the imports to use the new _@_ alias.
diff --git a/04-frameworks/01-react/05-architecture/01-routes/readme_es.md b/04-frameworks/01-react/05-architecture/01-routes/readme_es.md
@@ -75,6 +75,8 @@ Instalamos la librería para permitir que Vite extraiga los alias de la cofigura
 npm i vite-tsconfig-paths -D
 ```
 
+Usamos el plugin en Vite:
+
 _./vite.config.ts_
 
 ```diff
diff --git a/04-frameworks/01-react/05-architecture/07-css-handling/.babelrc b/04-frameworks/01-react/05-architecture/07-css-handling/.babelrc
diff --git a/04-frameworks/01-react/05-architecture/07-css-handling/index.html b/04-frameworks/01-react/05-architecture/07-css-handling/index.html
@@ -1,12 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>My App Example</title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Architecture</title>
   </head>
+
   <body>
     <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>
diff --git a/04-frameworks/01-react/05-architecture/07-css-handling/package.json b/04-frameworks/01-react/05-architecture/07-css-handling/package.json
@@ -1,45 +1,29 @@
 {
-  "name": "react-example",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
+  "name": "hello-vite",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
   "scripts": {
-    "start": "run-p -l type-check:watch start:dev",
-    "type-check": "tsc --noEmit",
-    "type-check:watch": "npm run type-check -- --watch",
-    "start:dev": "webpack-dev-server --mode development --open",
-    "build": "rimraf dist && webpack --mode development"
+    "start": "vite --host",
+    "build": "vite build",
+    "preview": "vite preview"
   },
-  "author": "",
-  "license": "ISC",
   "devDependencies": {
-    "@babel/cli": "^7.17.10",
-    "@babel/core": "^7.17.10",
-    "@babel/preset-env": "^7.17.10",
-    "@babel/preset-react": "^7.17.12",
-    "@babel/preset-typescript": "^7.16.7",
-    "@types/react": "^18.0.9",
-    "@types/react-dom": "^18.0.4",
-    "babel-loader": "^8.2.5",
-    "css-loader": "^6.7.1",
-    "html-loader": "^3.1.0",
-    "html-webpack-plugin": "^5.5.0",
-    "npm-run-all": "^4.1.5",
-    "rimraf": "^3.0.2",
-    "style-loader": "^3.3.1",
-    "tsconfig-paths-webpack-plugin": "^3.5.2",
-    "typescript": "^4.6.4",
-    "webpack": "^5.72.1",
-    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.9.0"
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react": "^5.0.2",
+    "typescript": "^5.8.3",
+    "vite": "^7.0.4",
+    "vite-plugin-checker": "^0.10.0",
+    "vite-tsconfig-paths": "^5.1.4"
   },
   "dependencies": {
     "@lemoncode/fonk": "^1.5.4",
     "@lemoncode/fonk-formik": "^4.0.1",
-    "classnames": "^2.3.1",
-    "formik": "^2.2.9",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
-    "react-router-dom": "^6.3.0"
+    "classnames": "^2.5.1",
+    "formik": "^2.4.6",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.8.2"
   }
 }
diff --git a/04-frameworks/01-react/05-architecture/07-css-handling/src/app.tsx b/04-frameworks/01-react/05-architecture/07-css-handling/src/app.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import { RouterComponent } from "@/core";
 import { ProfileProvider } from "@/core/profile";
+import "@/global-css/styles.css";
 
 export const App = () => {
   return (
diff --git a/04-frameworks/01-react/05-architecture/07-css-handling/src/core/profile/profile.context.tsx b/04-frameworks/01-react/05-architecture/07-css-handling/src/core/profile/profile.context.tsx
@@ -15,11 +15,9 @@ export const ProfileContext = React.createContext<Context>({
     ),
 });
 
-interface Props {
-  children: React.ReactNode;
-}
-
-export const ProfileProvider: React.FC<Props> = ({ children }) => {
+export const ProfileProvider: React.FC<React.PropsWithChildren> = ({
+  children,
+}) => {
   const [userProfile, setUserProfile] = React.useState<UserProfile>(
     createEmptyUserProfile()
   );
diff --git a/04-frameworks/01-react/05-architecture/07-css-handling/src/global-css/styles.css b/04-frameworks/01-react/05-architecture/07-css-handling/src/global-css/styles.css
@@ -1,4 +1,5 @@
 .layout-center {
+  background-color: red;
   display: grid;
   grid-template-columns: 1fr;
   align-items: center;
diff --git a/04-frameworks/01-react/05-architecture/07-css-handling/src/layouts/app.layout.tsx b/04-frameworks/01-react/05-architecture/07-css-handling/src/layouts/app.layout.tsx
@@ -1,11 +1,7 @@
 import React from "react";
 import { ProfileContext } from "@/core/profile";
 
-interface Props {
-  children: React.ReactNode;
-}
-
-export const AppLayout: React.FC<Props> = ({ children }) => {
+export const AppLayout: React.FC<React.PropsWithChildren> = ({ children }) => {
   const { userName } = React.useContext(ProfileContext);
 
   return (
diff --git a/04-frameworks/01-react/05-architecture/07-css-handling/src/layouts/center.layout.tsx b/04-frameworks/01-react/05-architecture/07-css-handling/src/layouts/center.layout.tsx
@@ -1,9 +1,5 @@
 import React from "react";
 
-interface Props {
-  children: React.ReactNode;
-}
-
-export const CenterLayout: React.FC<Props> = ({ children }) => (
-  <div className="layout-center">{children}</div>
-);
+export const CenterLayout: React.FC<React.PropsWithChildren> = ({
+  children,
+}) => <div className="layout-center">{children}</div>;
diff --git a/04-frameworks/01-react/05-architecture/07-css-handling/src/pods/list/list.component.tsx b/04-frameworks/01-react/05-architecture/07-css-handling/src/pods/list/list.component.tsx
@@ -19,11 +19,11 @@ export const ListComponent: React.FC<Props> = (props) => {
         <span className={css.header}>Id</span>
         <span className={css.header}>Name</span>
         {members.map((member) => (
-          <>
+          <React.Fragment key={member.id}>
             <img src={member.avatar_url} />
             <span>{member.id}</span>
             <Link to={routes.details(member.login)}>{member.login}</Link>
-          </>
+          </React.Fragment>
         ))}
       </div>
     </>
diff --git a/04-frameworks/01-react/05-architecture/07-css-handling/src/pods/login/login.component.tsx b/04-frameworks/01-react/05-architecture/07-css-handling/src/pods/login/login.component.tsx
@@ -13,24 +13,26 @@ export const LoginComponent: React.FC<Props> = (props) => {
   const { onLogin } = props;
 
   return (
-    <Formik
-      onSubmit={onLogin}
-      initialValues={createEmptyLogin()}
-      validate={formValidation.validateForm}
-    >
-      {() => (
-        <Form>
-          <div className={css.container}>
-            <InputFormik name="username" placeholder="Username" />
-            <InputFormik
-              name="password"
-              placeholder="Password"
-              type="password"
-            />
-            <button type="submit">login</button>
-          </div>
-        </Form>
-      )}
-    </Formik>
+    <div className="layout-center">
+      <Formik
+        onSubmit={onLogin}
+        initialValues={createEmptyLogin()}
+        validate={formValidation.validateForm}
+      >
+        {() => (
+          <Form>
+            <div className={css.container}>
+              <InputFormik name="username" placeholder="Username" />
+              <InputFormik
+                name="password"
+                placeholder="Password"
+                type="password"
+              />
+              <button type="submit">login</button>
+            </div>
+          </Form>
+        )}
+      </Formik>
+    </div>
   );
 };
diff --git a/04-frameworks/01-react/05-architecture/07-css-handling/tsconfig.json b/04-frameworks/01-react/05-architecture/07-css-handling/tsconfig.json
@@ -1,22 +1,23 @@
 {
   "compilerOptions": {
-    "target": "es6",
-    "module": "es6",
-    "moduleResolution": "node",
-    "declaration": false,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "lib": ["ESNext", "DOM"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "noEmit": true,
     "noImplicitAny": false,
-    "allowSyntheticDefaultImports": true,
-    "sourceMap": true,
-    "jsx": "react",
-    "noLib": false,
-    "suppressImplicitAnyIndexErrors": true,
+    "noImplicitReturns": true,
+    "resolveJsonModule": true,
     "skipLibCheck": true,
-    "esModuleInterop": true,
-    "baseUrl": "src",
+    "sourceMap": true,
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "baseUrl": "./src",
     "paths": {
       "@/*": ["*"]
     }
   },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules"]
+  "include": ["src"]
 }
diff --git a/04-frameworks/01-react/05-architecture/07-css-handling/vite.config.ts b/04-frameworks/01-react/05-architecture/07-css-handling/vite.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from "vite";
+import checker from "vite-plugin-checker";
+import react from "@vitejs/plugin-react";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+  plugins: [tsconfigPaths(), checker({ typescript: true }), react()],
+});
diff --git a/04-frameworks/01-react/05-architecture/07-css-handling/webpack.config.js b/04-frameworks/01-react/05-architecture/07-css-handling/webpack.config.js

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`.layout-center {`
	`2`	`+ background-color: red;`
`2`	`3`	`display: grid;`
`3`	`4`	`grid-template-columns: 1fr;`
`4`	`5`	`align-items: center;`