Skip to content

Commit 0a054f3

Browse files
authored
Merge pull request #824 from Lemoncode/refactor/react-03-react-hooks-examples
3º PULL REQUEST- REACT: 03-react-hooks (rest of examples)
2 parents cf51b70 + 9f11735 commit 0a054f3

File tree

114 files changed

+1072
-1533
lines changed

Some content is hidden

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

114 files changed

+1072
-1533
lines changed

04-frameworks/01-react/03-react-hooks/06-ajax-field-change/.babelrc

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

04-frameworks/01-react/03-react-hooks/06-ajax-field-change/Readme.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# 06 Ajax field change
22

3-
## Resume
3+
## Summary
44

55
This example takes as a starting point the example \ \_05-component-update-render.
66

@@ -16,7 +16,7 @@ As a bonus, we will check how to use Debounce (wait a little until the user stop
1616
npm install
1717
```
1818

19-
- Let's open the _demo.js_, and let's add an entry in the state that stores the current search filter, and another state in which we
19+
- Let's open the _demo.tsx_, and let's add an entry in the state that stores the current search filter, and another state in which we
2020
are going to store a list of users.
2121

2222
_./src/demo.tsx_

04-frameworks/01-react/03-react-hooks/06-ajax-field-change/Readme_es.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ así llamadas innecesarias).
2121
npm install
2222
```
2323

24-
- Vamos abrir el fichero _demo.js_ y vamos añadir una entrada en el
24+
- Vamos abrir el fichero _demo.tsx_ y vamos añadir una entrada en el
2525
estado que almacene el filtro actual de busqueda, y otra en la que almacene
2626
una lista de usuarios.
2727

Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
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>
98
<body>
109
<div id="root"></div>
10+
<script type="module" src="/src/index.tsx"></script>
1111
</body>
1212
</html>
Lines changed: 16 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,24 @@
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",
38-
"use-debounce": "^8.0.1"
20+
"react": "^19.1.0",
21+
"react-dom": "^19.1.0",
22+
"use-debounce": "^10.0.5"
3923
}
4024
}
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
}
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+
});

04-frameworks/01-react/03-react-hooks/06-ajax-field-change/webpack.config.js

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

04-frameworks/01-react/03-react-hooks/07-custom-hook/.babelrc

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

04-frameworks/01-react/03-react-hooks/07-custom-hook/Readme.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
# 07 Custom hooks
22

3-
## Resume
3+
## Summary
44

5-
This example takes as its starting point the \ _06-ajax-field-change example.
5+
This example takes as its starting point the _06-ajax-field-change_ example.
66

77
Hooks are cool, but our functional component seems to get cluttered, is
88
there a way to extract functionality outside the functional component?
@@ -53,7 +53,7 @@ export const MyComponent = () => {
5353

5454
A. Encapsulating as well the _UseEffect_
5555

56-
_./src/demo.js_
56+
_./src/demo.tsx_
5757

5858
```diff
5959
import React from "react";

0 commit comments

Comments
 (0)