Skip to content

Commit 6c7771a

Browse files
Miguel Angel Chimali CobanoMiguel Angel Chimali Cobano
Miguel Angel Chimali Cobano
authored and
Miguel Angel Chimali Cobano
committed
update react-03-react-hooks-examples-from-0-to-6
1 parent 83210a9 commit 6c7771a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

67 files changed

+505
-1048
lines changed

‎04-frameworks/01-react/03-react-hooks/00-boilerplate/.babelrc

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎04-frameworks/01-react/03-react-hooks/00-boilerplate/Readme.md

Lines changed: 11 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -1,125 +1,16 @@
1-
# 03 Webpack React
1+
# 02 Vite boiler plate - React
22

33
## Summary
44

5-
This example takes the _02-webpack-boiler_ example as a starting point.
6-
7-
We will go step by step adding the necessary configuration so that we integrate
8-
**React** into our build process.
9-
10-
# Step by Step guide
11-
12-
- First we copy the previous example, and do a _npm install_
13-
14-
```bash
15-
npm install
16-
```
17-
18-
- Let's install _react_ and _react-dom_
19-
20-
```bash
21-
npm install react react-dom --save
22-
```
23-
24-
- Let's install _react_ and _react-dom_ typings
25-
26-
```bash
27-
npm install @types/react @types/react-dom --save-dev
28-
```
29-
30-
This way we have the React library and the bindings to integrate with a web browser.
31-
32-
- In the index.html we are going to put the _div_ that will serve as entry point to instantiate our React application. our React application.
33-
34-
_./src/index.html_
35-
36-
```diff
37-
<body>
38-
- <h1 class="my-text">Hello World !</h1>
39-
+ <div id="root"></div>
40-
</body>
41-
```
42-
43-
- Let's create our first React component.
44-
45-
_./src/app.tsx_
46-
47-
```tsx
48-
import React from "react";
49-
50-
export const App = () => {
51-
return <h1>Hello React !!</h1>;
52-
};
53-
```
54-
55-
- It's time to instantiate that main component, to be able to integrate it with the browser we have to make use of _ReactDOM.render_.
56-
57-
_./src/index.tsx_
58-
59-
```tsx
60-
import React from "react";
61-
import ReactDOM from "react-dom";
62-
import { App } from "./app";
63-
64-
ReactDOM.render(
65-
<div>
66-
<App />
67-
</div>,
68-
document.getElementById("root")
69-
);
70-
```
71-
72-
- We are on the right track, but if we try to run this it will fail, since _babel_ does not know how to transform the _jsx_ (remember that this was a sugar, which was actually an XML) into javaScript, in order for babel to be able to understand this we have to install the _preset_ _@babel/preset-react_
73-
74-
First we install it and the configure it.
75-
76-
```bash
77-
npm install @babel/preset-react --save-dev
78-
```
79-
80-
_.babelrc_
81-
82-
```diff
83-
{
84-
"presets": [
85-
"@babel/preset-env",
86-
"@babel/preset-typescript",
87-
+ "@babel/preset-react"
88-
]
89-
}
90-
```
91-
92-
> By the way the _rc_ suffix is pretty usual in linux it's stands for "runcom"
93-
> (CTSS system 1962-63) Script file containing startup instructions for an application program.
94-
> In other words, "rc" is just something that stuck from back in the sixties, and has been used quite often for configuration files in different sorts of programs since, including Node, Babel and many, many others.
95-
> More info [on stackoverflow](https://stackoverflow.com/questions/36212256/what-are-rc-files-in-nodejs).
96-
97-
> Another curiosity... what is a _preset_ ... let's start with what is a babel plugin: babel transformations are
98-
> enabled by applying plugins, there are plenty of plugins and if you have to go adding one by one it can become a nightmare,
99-
> in order to make this easier, babel has grouped common sets of plugins in _presets_, for instance @babel-preset-react
100-
> includes the following plugins:
101-
102-
- @babel/plugin-syntax-jsx
103-
- @babel/plugin-transform-react-jsx
104-
- @babel/plugin-transform-react-display-name
105-
106-
- Is time to double check the _webpack.config.js_
107-
108-
- We can make sure that we have _ts_ and _tsx_ as valid extensions.
109-
- Also that in the loader we accept both _ts_ and _tsx_.
110-
- And in the app we have as entry point _index.tsx_.
111-
112-
* Let's check that things are working as expected:
113-
114-
```bash
115-
npm start
116-
```
117-
118-
119-
120-
121-
122-
123-
5+
Boiler plate extracted from _02-base/02-vite-react_.
1246

7+
Below, main points. For more info, check the original repo or the Vite module.
1258

9+
- Installation of `typeScript` as a local development dependency.
10+
- Installation of `@vitejs/plugin-react` as a local development dependency (support for `jsx` and `tsx`).
11+
- Installation of `react` and `react-dom` as dependencies.
12+
- Installation of the types `@types/react` and `@types/react-dom` as local development dependencies.
13+
- The project was changed to use ES Modules `package.json`.
14+
- A `tsconfig.json` was created with a minimal configuration, prepared to support `jsx` format.
15+
- Vite uses esbuild for transpilation (fast, no type checking).
16+
- `isolatedModules` and `useDefineForClassFields` were enabled to be compatible with `esbuild`.

‎04-frameworks/01-react/03-react-hooks/00-boilerplate/Readme_es.md

Lines changed: 11 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -1,119 +1,16 @@
1-
# 03 Webpack React
1+
# 02 Vite boiler plate - React
22

33
## Resumen
44

5-
Este ejemplo toma como punto de partida el ejemplo _02-webpack-boiler_.
5+
Boiler plate extraído de _02-base/02-vite-react_.
66

7-
Vamos a ir paso a paso añdiendo la configuración necesaria para que integrar
8-
**React** en nuestro proceso de build.
7+
A continuación, puntos principales. Para más info, acudir a repo original o módulo de vite.
98

10-
## Paso a Paso
11-
12-
- Primero copiamos el ejemplo anterior, y hacemos un _npm install_
13-
14-
```bash
15-
npm install
16-
```
17-
18-
- Vamos a instalar _react_ y _react-dom_
19-
20-
```bash
21-
npm install react react-dom --save
22-
```
23-
24-
- Vamos a instalarnos los typing de _react_ y _react-dom_
25-
26-
```bash
27-
npm install @types/react @types/react-dom --save-dev
28-
```
29-
30-
Así tenemos la librería de React y los bindings para que se integre con un navegador web.
31-
32-
- En el index.html vamos a meter el _div_ que nos servirá como punto de entrada para instanciar
33-
nuestra aplicación React.
34-
35-
_./src/index.html_
36-
37-
```diff
38-
<body>
39-
- <h1 class="my-text">Hello World !</h1>
40-
+ <div id="root"></div>
41-
</body>
42-
```
43-
44-
- Vamos a crear nuestro primero componente React.
45-
46-
_./src/app.tsx_
47-
48-
```tsx
49-
import React from "react";
50-
51-
export const App = () => {
52-
return <h1>Hello React !!</h1>;
53-
};
54-
```
55-
56-
- Es hora de instanciar ese compente principal, para poder integrarlo con el navegador
57-
tenemos que hacer uso a _ReactDOM.render_
58-
59-
_./src/index.tsx_
60-
61-
```tsx
62-
import React from "react";
63-
import { createRoot } from "react-dom/client";
64-
import { App } from "./app";
65-
66-
const container = document.getElementById("root");
67-
const root = createRoot(container);
68-
69-
root.render(<App />);
70-
```
71-
72-
- Vamos por buen camino, pero si intentamos ejecutar esto no va fallar, ya que _babel_ no sabe
73-
como transformar el _jsx_ (recordemos que esto era un azúcar, que en realidad era un XML) a
74-
javaScript, para que babel sea capaz de entender esto tenemos que instalar el _preset_
75-
_@babel/preset-react_
76-
77-
Primero lo instalamos
78-
79-
```bash
80-
npm install @babel/preset-react --save-dev
81-
```
82-
83-
_.babelrc_
84-
85-
```diff
86-
{
87-
"presets": [
88-
"@babel/preset-env",
89-
"@babel/preset-typescript",
90-
+ "@babel/preset-react"
91-
]
92-
}
93-
```
94-
95-
> Por cierto, el sufijo _rc_ es bastante habitual en linux, significa "runcom".
96-
> (Sistema CTSS 1962-63) Archivo de script que contiene instrucciones de inicio para un programa de aplicación.
97-
> En otras palabras, "rc" es algo que se quedó atrás en los años sesenta, y se ha utilizado con bastante frecuencia para los archivos de configuración en diferentes tipos de programas desde entonces, incluyendo Node, Babel y muchos, muchos otros.
98-
> Más información [en stackoverflow](https://stackoverflow.com/questions/36212256/what-are-rc-files-in-nodejs).
99-
100-
> Otra curiosidad... qué es un _preset_ ... empecemos por lo que es un plugin de babel: las transformaciones de babel
101-
> se habilitan aplicando plugins, hay un montón de plugins y si tienes que ir añadiendo uno a uno se puede convertir en una pesadilla,
102-
> para hacer esto más fácil, babel ha agrupado conjuntos comunes de plugins en _presets_, por ejemplo @babel-preset-react
103-
> incluye los siguientes plugins:
104-
105-
- @babel/plugin-syntax-jsx
106-
- @babel/plugin-transform-react-jsx
107-
- @babel/plugin-transform-react-display-name
108-
109-
- Es hora de saltar al _webpack.config.js_
110-
111-
- Nos podemos asegurar de que tenemos como extension valida _ts_ y _tsx_
112-
- También que en el loader aceptamos tanto _ts_ como _tsx_
113-
- Y en el app tenemos como punto de entrada _index.tsx_
114-
115-
* Vamos a comprobar que hemos dejado todo funcionando:
116-
117-
```bash
118-
npm start
119-
```
9+
- Instalación de `typeScript` como dependencia de desarrollo local.
10+
- Instalación de `@vitejs/plugin-react` como dependencia de desarrollo local (soporte `jsx` y `tsx`)
11+
- Instalación de `react` y `react-dom` como dependencias.
12+
- Instalación de los tipos de `@types/react` y `@types/react-dom` como dependencia de desarrollo local.
13+
- Se cambió el proyecto para usar ES Modules `package.json`.
14+
- Se creó un `tsconfig.json` con una configuración mínima, preparada para soportar formato `jsx`.
15+
- Vite utiliza esbuild para la transpilación (rápido, sin comprobación de tipos).
16+
- Se habilitó `isolatedModules` y `useDefineForClassFields` para que sea compatible con `esbuild`.

‎04-frameworks/01-react/03-react-hooks/01-use-state/src/index.html renamed to ‎04-frameworks/01-react/03-react-hooks/00-boilerplate/index.html

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8" />
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1" />
7-
<title>My App Example</title>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>React App - React hooks</title>
87
</head>
8+
99
<body>
1010
<div id="root"></div>
11+
<script type="module" src="/src/index.tsx"></script>
1112
</body>
1213
</html>

‎04-frameworks/01-react/03-react-hooks/00-boilerplate/package.json

Lines changed: 15 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,23 @@
11
{
2-
"name": "react-example",
3-
"version": "1.0.0",
4-
"description": "",
5-
"main": "index.js",
2+
"name": "hello-vite",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
66
"scripts": {
7-
"start": "run-p -l type-check:watch start:dev",
8-
"type-check": "tsc --noEmit",
9-
"type-check:watch": "npm run type-check -- --watch",
10-
"start:dev": "webpack-dev-server --mode development --open",
11-
"build": "rimraf dist && webpack --mode development"
7+
"start": "vite --host",
8+
"build": "vite build",
9+
"preview": "vite preview"
1210
},
13-
"author": "",
14-
"license": "ISC",
1511
"devDependencies": {
16-
"@babel/cli": "^7.17.10",
17-
"@babel/core": "^7.17.10",
18-
"@babel/preset-env": "^7.17.10",
19-
"@babel/preset-react": "^7.17.12",
20-
"@babel/preset-typescript": "^7.16.7",
21-
"@types/react": "^18.0.9",
22-
"@types/react-dom": "^18.0.4",
23-
"babel-loader": "^8.2.5",
24-
"css-loader": "^6.7.1",
25-
"html-loader": "^3.1.0",
26-
"html-webpack-plugin": "^5.5.0",
27-
"npm-run-all": "^4.1.5",
28-
"rimraf": "^3.0.2",
29-
"style-loader": "^3.3.1",
30-
"typescript": "^4.6.4",
31-
"webpack": "^5.72.1",
32-
"webpack-cli": "^4.9.2",
33-
"webpack-dev-server": "^4.9.0"
12+
"@types/react": "^19.1.8",
13+
"@types/react-dom": "^19.1.6",
14+
"@vitejs/plugin-react": "^4.6.0",
15+
"typescript": "^5.8.3",
16+
"vite": "^7.0.4",
17+
"vite-plugin-checker": "^0.10.0"
3418
},
3519
"dependencies": {
36-
"react": "^18.1.0",
37-
"react-dom": "^18.1.0"
20+
"react": "^19.1.0",
21+
"react-dom": "^19.1.0"
3822
}
3923
}

‎04-frameworks/01-react/03-react-hooks/00-boilerplate/src/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from "react";
22
import { createRoot } from "react-dom/client";
33
import { App } from "./app";
44

5-
const container = document.getElementById("root");
6-
const root = createRoot(container);
5+
const rootElement = document.getElementById("root");
6+
const root = createRoot(rootElement);
77

88
root.render(<App />);

‎04-frameworks/01-react/03-react-hooks/00-boilerplate/tsconfig.json

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
11
{
22
"compilerOptions": {
3-
"target": "es6",
4-
"module": "es6",
5-
"moduleResolution": "node",
6-
"declaration": false,
3+
"esModuleInterop": true,
4+
"isolatedModules": true,
5+
"jsx": "react-jsx",
6+
"lib": ["ESNext", "DOM"],
7+
"module": "ESNext",
8+
"moduleResolution": "bundler",
9+
"noEmit": true,
710
"noImplicitAny": false,
8-
"allowSyntheticDefaultImports": true,
9-
"sourceMap": true,
10-
"jsx": "react",
11-
"noLib": false,
12-
"suppressImplicitAnyIndexErrors": true,
11+
"noImplicitReturns": true,
12+
"resolveJsonModule": true,
1313
"skipLibCheck": true,
14-
"esModuleInterop": true
14+
"sourceMap": true,
15+
"target": "ESNext",
16+
"useDefineForClassFields": true
1517
},
16-
"include": ["src/**/*"],
17-
"exclude": ["node_modules"]
18+
"include": ["src"]
1819
}

‎04-frameworks/01-react/03-react-hooks/00-boilerplate/vite.config.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { defineConfig } from "vite";
2+
import checker from "vite-plugin-checker";
3+
import react from "@vitejs/plugin-react";
4+
5+
export default defineConfig({
6+
plugins: [checker({ typescript: true }), react()],
7+
});

0 commit comments

Comments
 (0)