Skip to content

Commit c2f25d9

Browse files
Miguel Angel Chimali CobanoMiguel Angel Chimali Cobano
Miguel Angel Chimali Cobano
authored and
Miguel Angel Chimali Cobano
committed
indentantion
1 parent b5d4777 commit c2f25d9

File tree

4 files changed

+72
-88
lines changed

4 files changed

+72
-88
lines changed

‎04-frameworks/01-react/01-previous/01-concepts/readme.md

Lines changed: 34 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -80,33 +80,14 @@ Now the content is generated by JavaScript. We can confirm that it’s the JavaS
8080

8181
### Components
8282

83-
Let’s start breaking our list into parts. First, we separate the title:
83+
Let’s start breaking our list into parts.We separate the title and the list:
8484

85-
```diff
86-
import "./styles.css";
85+
````diff
86+
import "./styles.css";
8787

8888
+ const Header = () => {
89-
+ return ` <h4>Lista de usuarios</h4>`;
89+
+ return `<h4>Lista de usuarios</h4>`;
9090
+ };
91-
+
92-
document.getElementById("app").innerHTML = `
93-
- <h4>Lista de usuarios</h4>
94-
+ ${Header()}
95-
<div>1955: Rick Sánchez</div>
96-
<div>8765: Beth Harmon</div>
97-
<div>7562: Farrokh Bulsara</div>
98-
```
99-
100-
This function we just created, in React, is a component. That is, **in React, components are functions.** For now, this component returns a piece of our application, in this case the title, which renders something in the DOM.
101-
102-
Let’s continue splitting or componentizing our application. We’ll create a new component that returns just the list..
103-
104-
```diff
105-
import "./styles.css";
106-
107-
const Header = () => {
108-
return `<h4>Lista de usuarios</h4>`;
109-
};
11091

11192
+ const List = () => {
11293
+ return `
@@ -118,14 +99,17 @@ const Header = () => {
11899
+ };
119100

120101
document.getElementById("app").innerHTML = `
121-
${Header()}
122-
- <div>1955: Rick Sánchez</div>
123-
- <div>8765: Beth Harmon</div>
124-
- <div>7562: Farrokh Bulsara</div>
125-
+ ${List()}
102+
+ ${Header()}
103+
+ ${List()}
104+
- <h4>Lista de usuarios</h4>
105+
- <div>1955: Rick Sánchez</div>
106+
- <div>8765: Beth Harmon</div>
107+
- <div>7562: Farrokh Bulsara</div>
126108
`;
127109
```
128110

111+
This functions we just created, in React, are components. That is, **in React, components are functions.** For now, these components return a piece of our application, in this case the title and the list, which render something in the DOM.
112+
129113
### Props
130114

131115
Now let’s create a component that renders each user in the DOM. To do this, we’ll create a component (function) that receives a user object with an `id` and `name`:
@@ -144,20 +128,20 @@ const Header = () => {
144128
const List = () => {
145129
return `
146130
<div>
147-
+ ${User({id: 1955, name 'Rick Sánchez'})}
148-
+ ${User({id: 8765, name 'Beth Harmon'})}
149-
+ ${User({id: 7562, name 'Farrokh Bulsara'})}
150-
- <div>1955: Rick Sánchez</div>
151-
- <div>8765: Beth Harmon</div>
152-
- <div>7562: Farrokh Bulsara</div>
131+
+ ${User({id: 1955, name 'Rick Sánchez'})}
132+
+ ${User({id: 8765, name 'Beth Harmon'})}
133+
+ ${User({id: 7562, name 'Farrokh Bulsara'})}
134+
- <div>1955: Rick Sánchez</div>
135+
- <div>8765: Beth Harmon</div>
136+
- <div>7562: Farrokh Bulsara</div>
153137
</div>`;
154138
};
155139

156140
document.getElementById("app").innerHTML = `
157141
${Header()}
158142
${List()}
159143
`;
160-
```
144+
````
161145

162146
In React jargon, the input arguments we pass to components are known as `props`. A bit later we’ll see that in React, the syntax for running a component is very different from this. However, it’s very important to keep in mind that even though the syntax is different, in the end what we’re doing is invoking functions and passing them input arguments.
163147

@@ -189,10 +173,10 @@ const List = () => {
189173
+ const users = getUsers();
190174
return `
191175
<div>
192-
+ ${users.map(user=>User(user)).join('')}
193-
- ${User({id: 1955, name 'Rick Sánchez'})}
194-
- ${User({id: 8765, name 'Beth Harmon'})}
195-
- ${User({id: 7562, name 'Farrokh Bulsara'})}
176+
+ ${users.map(user=>User(user)).join('')}
177+
- ${User({id: 1955, name 'Rick Sánchez'})}
178+
- ${User({id: 8765, name 'Beth Harmon'})}
179+
- ${User({id: 7562, name 'Farrokh Bulsara'})}
196180
</div>`;
197181
};
198182

@@ -222,8 +206,8 @@ const List = () => {
222206
const users = getUsers();
223207
return `
224208
<div>
225-
- ${users.map((user) => User(user)).join("")}
226-
+ ${users.map((user) => User({ user })).join("")}
209+
- ${users.map((user) => User(user)).join("")}
210+
+ ${users.map((user) => User({ user })).join("")}
227211
</div>`;
228212
};
229213

@@ -249,12 +233,12 @@ If we update it with a setTimeout, we see the value changes in the console, but
249233

250234
```diff
251235
const User = ({ user }) => {
252-
- const randomNumber = Math.random();
253-
+ let randomNumber = Math.random();
254-
+ setTimeout(() => {
255-
+ randomNumber = Math.random();
256-
+ console.log(randomNumber);
257-
+ }, 3000);
236+
- const randomNumber = Math.random();
237+
+ let randomNumber = Math.random();
238+
+ setTimeout(() => {
239+
+ randomNumber = Math.random();
240+
+ console.log(randomNumber);
241+
+ }, 3000);
258242
return `<div>${user.id}: ${user.name} - ${randomNumber}</div>`;
259243
};
260244
```
@@ -302,11 +286,11 @@ To leave the example ready for the next exercise, let’s make the following cha
302286
+ ${Header()}
303287
+ ${List()}
304288
+ `;
305-
}
289+
+ }
306290

307291
+ document.getElementById("app").innerHTML = App();
308292
- document.getElementById("app").innerHTML = `
309-
- ${Header()}
310-
- ${List()}
293+
- ${Header()}
294+
- ${List()}
311295
- `;
312296
```

‎04-frameworks/01-react/01-previous/01-concepts/readme_es.md

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ Ahora el contenido lo genera JavaScript. Comprobamos que es el fichero de JavaSc
8080

8181
### Componentes
8282

83-
Vamos a ir partiendo nuestra lista en partes. Así, vamos a segregar el header y la lista en dos componentes a parte
83+
Vamos a ir partiendo nuestra lista en partes. Así, vamos a segregar el header y la lista en dos componentes a parte.
8484

8585
```diff
8686
import "./styles.css";
@@ -99,16 +99,16 @@ import "./styles.css";
9999
+ };
100100

101101
document.getElementById("app").innerHTML = `
102-
+ ${Header()}
103-
+ ${List()}
104-
- <h4>Lista de usuarios</h4>
105-
- <div>1955: Rick Sánchez</div>
106-
- <div>8765: Beth Harmon</div>
107-
- <div>7562: Farrokh Bulsara</div>
102+
+ ${Header()}
103+
+ ${List()}
104+
- <h4>Lista de usuarios</h4>
105+
- <div>1955: Rick Sánchez</div>
106+
- <div>8765: Beth Harmon</div>
107+
- <div>7562: Farrokh Bulsara</div>
108108
`;
109109
```
110110

111-
A esta funciones que acabamos de crear, en React, las vamos a llamar componentes. Es decir, **en React los componentes son funciones.** Por el momento estos componentes nos devuelven un trocito de nuestra aplicación, en este caso el título y la lista, es decir, renderizan algo en el DOM.
111+
A estas funciones que acabamos de crear, en React, las vamos a llamar componentes. Es decir, **en React los componentes son funciones.** Por el momento estos componentes nos devuelven un trocito de nuestra aplicación, en este caso el título y la lista, es decir, renderizan algo en el DOM.
112112

113113
### Props
114114

@@ -128,12 +128,12 @@ const Header = () => {
128128
const List = () => {
129129
return `
130130
<div>
131-
+ ${User({id: 1955, name 'Rick Sánchez'})}
132-
+ ${User({id: 8765, name 'Beth Harmon'})}
133-
+ ${User({id: 7562, name 'Farrokh Bulsara'})}
134-
- <div>1955: Rick Sánchez</div>
135-
- <div>8765: Beth Harmon</div>
136-
- <div>7562: Farrokh Bulsara</div>
131+
+ ${User({id: 1955, name 'Rick Sánchez'})}
132+
+ ${User({id: 8765, name 'Beth Harmon'})}
133+
+ ${User({id: 7562, name 'Farrokh Bulsara'})}
134+
- <div>1955: Rick Sánchez</div>
135+
- <div>8765: Beth Harmon</div>
136+
- <div>7562: Farrokh Bulsara</div>
137137
</div>`;
138138
};
139139

@@ -173,10 +173,10 @@ const List = () => {
173173
+ const users = getUsers();
174174
return `
175175
<div>
176-
+ ${users.map(user=>User(user)).join('')}
177-
- ${User({id: 1955, name 'Rick Sánchez'})}
178-
- ${User({id: 8765, name 'Beth Harmon'})}
179-
- ${User({id: 7562, name 'Farrokh Bulsara'})}
176+
+ ${users.map(user=>User(user)).join('')}
177+
- ${User({id: 1955, name 'Rick Sánchez'})}
178+
- ${User({id: 8765, name 'Beth Harmon'})}
179+
- ${User({id: 7562, name 'Farrokh Bulsara'})}
180180
</div>`;
181181
};
182182

@@ -206,8 +206,8 @@ const List = () => {
206206
const users = getUsers();
207207
return `
208208
<div>
209-
- ${users.map((user) => User(user)).join("")}
210-
+ ${users.map((user) => User({ user })).join("")}
209+
- ${users.map((user) => User(user)).join("")}
210+
+ ${users.map((user) => User({ user })).join("")}
211211
</div>`;
212212
};
213213

@@ -233,12 +233,12 @@ Si lo actualizamos con un setTimeout, vemos que el valor cambia en consola, pero
233233

234234
```diff
235235
const User = ({ user }) => {
236-
- const randomNumber = Math.random();
237-
+ let randomNumber = Math.random();
238-
+ setTimeout(() => {
239-
+ randomNumber = Math.random();
240-
+ console.log(randomNumber);
241-
+ }, 3000);
236+
- const randomNumber = Math.random();
237+
+ let randomNumber = Math.random();
238+
+ setTimeout(() => {
239+
+ randomNumber = Math.random();
240+
+ console.log(randomNumber);
241+
+ }, 3000);
242242
return `<div>${user.id}: ${user.name} - ${randomNumber}</div>`;
243243
};
244244
```
@@ -267,8 +267,8 @@ const List = () => {
267267

268268
return `
269269
<div>
270-
${users.map((user) => User({ user })).join("")}
271-
+ <button onclick="javascript:handleClick()">Add user</button>
270+
${users.map((user) => User({ user })).join("")}
271+
+ <button onclick="javascript:handleClick()">Add user</button>
272272
</div>`;
273273
};
274274
```
@@ -290,7 +290,7 @@ De cara a dejar el ejemplo preparado para el siguiente ejercicio vamos a hacer e
290290

291291
+ document.getElementById("app").innerHTML = App();
292292
- document.getElementById("app").innerHTML = `
293-
- ${Header()}
294-
- ${List()}
293+
- ${Header()}
294+
- ${List()}
295295
- `;
296296
```

‎04-frameworks/01-react/01-previous/02-basic/readme.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -179,10 +179,10 @@ const User = ({ user }) => {
179179
const [randomNumber, setRandomNumber] = React.useState(Math.random())
180180

181181
+ React.useEffect(()=>{
182-
setTimeout(() => {
183-
setRandomNumber(Math.random());
184-
console.log(randomNumber);
185-
}, 3000);
182+
setTimeout(() => {
183+
setRandomNumber(Math.random());
184+
console.log(randomNumber);
185+
}, 3000);
186186
+ },[])
187187

188188
return (

‎04-frameworks/01-react/01-previous/02-basic/readme_es.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -179,10 +179,10 @@ const User = ({ user }) => {
179179
const [randomNumber, setRandomNumber] = React.useState(Math.random())
180180
181181
+ React.useEffect(()=>{
182-
setTimeout(() => {
183-
setRandomNumber(Math.random());
184-
console.log(randomNumber);
185-
}, 3000);
182+
setTimeout(() => {
183+
setRandomNumber(Math.random());
184+
console.log(randomNumber);
185+
}, 3000);
186186
+ },[])
187187
188188
return (

0 commit comments

Comments
 (0)