Skip to content

Commit 6acabf7

Browse files
LissetteIbnzLissetteIbnz
committed
Update readme files
1 parent da795fc commit 6acabf7

File tree

2 files changed

+301
-0
lines changed

2 files changed

+301
-0
lines changed

‎12_TableHttp_Axios/readme.md‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
# 12 Table Http with Axios
2+
3+
Let's move forward with the table sample, this time we are going to replace the
4+
mock data by real one and we will make calls with the Axios package.
5+
6+
We will take a startup point sample _11 TableMock_:
7+
8+
## Summary steps:
9+
10+
- Configure transpilation and add extra transpile step babel >> es5.
11+
- Update API in order to work with [Axios](https://github.com/axios/axios) and fetch data from Github API.
12+
- Update the _tableComponent_ in order to show this data.
13+
14+
## Prerequisites
15+
16+
Install [Node.js and npm](https://nodejs.org/en/) (v6.6.0 or newer) if they are not already installed on your computer.
17+
18+
> Verify that you are running at least node v6.x.x and npm 3.x.x by running `node -v` and `npm -v` in a terminal/console window. Older versions may produce errors.
19+
20+
## Steps to build it
21+
22+
- Copy the content from _11 TableMock_ and execute:
23+
24+
```
25+
npm install
26+
```
27+
28+
- We install the Axios package:
29+
30+
```
31+
npm install --save axios
32+
```
33+
34+
- Let's remove the file _memberMockData.ts_ in _src/api_ directory.
35+
36+
- Let's replace _memberAPI_ load members with the fetch / promise one:
37+
38+
_./src/api/memberAPI.ts_
39+
40+
```javascript
41+
import { MemberEntity } from '../model/member';
42+
import Axios, { AxiosError, AxiosResponse } from 'axios';
43+
44+
// Sync mock data API, inspired from:
45+
// https://gist.github.com/coryhouse/fd6232f95f9d601158e4
46+
class MemberAPI {
47+
getAllMembers(): Promise<MemberEntity[]> {
48+
const gitHubMembersUrl: string = 'https://api.github.com/orgs/lemoncode/members';
49+
50+
return Axios.get<MemberEntity[]>(gitHubMembersUrl)
51+
.then(this.resolveMembers)
52+
.catch(this.onError);
53+
}
54+
55+
private onError(err: AxiosError): MemberEntity[] {
56+
console.log(err.message);
57+
return [];
58+
}
59+
60+
private resolveMembers({ data }: AxiosResponse<MemberEntity[]>): MemberEntity[] {
61+
const members: MemberEntity[] = data.map(gitHubMember => {
62+
let member: MemberEntity = {
63+
id: gitHubMember.id,
64+
login: gitHubMember.login,
65+
avatar_url: gitHubMember.avatar_url,
66+
};
67+
68+
return member;
69+
});
70+
71+
return members;
72+
}
73+
}
74+
75+
export const memberAPI = new MemberAPI();
76+
77+
```
78+
79+
- Add a new component _memberHead_ to create the table's header:
80+
81+
_./src/memberHead.tsx_
82+
83+
```javascript
84+
import * as React from 'react';
85+
import { MemberEntity } from './model/member';
86+
87+
export const MemberHead = () =>
88+
<tr>
89+
<th>
90+
Avatar
91+
</th>
92+
<th>
93+
Id
94+
</th>
95+
<th>
96+
Name
97+
</th>
98+
</tr>
99+
```
100+
101+
- Now it's time to update our _membersTable_ component.
102+
103+
_./src/membersTable.tsx_
104+
105+
- Import the new component:
106+
107+
```diff
108+
109+
+ import { MemberHead } from './memberHead';
110+
111+
```
112+
113+
- Modify the render function:
114+
115+
```diff
116+
-<thead>
117+
- <tr>
118+
- <th>
119+
- Avatar
120+
- </th>
121+
- <th>
122+
- Id
123+
- </th>
124+
- <th>
125+
- Name
126+
- </th>
127+
- </tr>
128+
- </thead>
129+
+ <thead>
130+
+ <MemberHead />
131+
+ </thead>
132+
```
133+
134+
- Let's consume the new promise base method to retrieve the users:
135+
136+
```diff
137+
// Standard react lifecycle function:
138+
// https://facebook.github.io/react/docs/component-specs.html
139+
public componentDidMount() {
140+
- this.setState({members: memberAPI.getAllMembers()})
141+
+ memberAPI.getAllMembers().then((members) =>
142+
+ this.setState({members: members})
143+
+ );
144+
}
145+
```
146+
147+
- Let's give a try and check the results
148+
149+
```
150+
npm start
151+
```

‎12_TableHttp_Axios/readme_es.md‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
# 12 Table Http con Axios
2+
3+
Sigamos con nuestro ejemplo de la tabla, vamos a cambiar datos falsos por unos reales y realizaremos las llamadas con la librería Axios.
4+
5+
Cogeremos como punto inicial el ejemplo _11 TableMock_:
6+
7+
## Pasos resumidos:
8+
9+
- Configurar transpilación y añadir una transpilación extra babel >> es5.
10+
- Actualizar la API para trabajar con [Axios](https://github.com/axios/axios) y obtener datos de la API de Github.
11+
- Actualizar _tableComponent_ para mostrar los datos.
12+
13+
## Prerrequisitos
14+
15+
Instalar [Node.js y npm](https://nodejs.org/en/) (v6.6.0 o más nuevo) si no están ya instalados.
16+
17+
> Verificar que tienes al menos corriendo la versión de node v6.x.x y npm 3.x.x ejecutando `node -v` y `npm -v` en la terminal de Windows. Versiones más antiguas pueden producir errores.
18+
19+
## Pasos para construirlo
20+
21+
- Copiar el contenido de _11 TableMock_ y ejecutar:
22+
23+
```
24+
npm install
25+
```
26+
27+
- Instalamos la librería Axios:
28+
29+
```
30+
npm install --save axios
31+
```
32+
33+
- Vamos a eliminar el fichero _memberMockData.ts_ del directorio _src/api_ .
34+
35+
- Vamos a reemplazar _memberAPI_ cargando los miembros con promesas:
36+
37+
_./src/api/memberAPI.ts_
38+
39+
```javascript
40+
import { MemberEntity } from '../model/member';
41+
import Axios, { AxiosError, AxiosResponse } from 'axios';
42+
43+
// Sync mock data API, inspired from:
44+
// https://gist.github.com/coryhouse/fd6232f95f9d601158e4
45+
class MemberAPI {
46+
getAllMembers(): Promise<MemberEntity[]> {
47+
const gitHubMembersUrl: string = 'https://api.github.com/orgs/lemoncode/members';
48+
49+
return Axios.get<MemberEntity[]>(gitHubMembersUrl)
50+
.then(this.resolveMembers)
51+
.catch(this.onError);
52+
}
53+
54+
private onError(err: AxiosError): MemberEntity[] {
55+
console.log(err.message);
56+
return [];
57+
}
58+
59+
private resolveMembers({ data }: AxiosResponse<MemberEntity[]>): MemberEntity[] {
60+
const members: MemberEntity[] = data.map(gitHubMember => {
61+
let member: MemberEntity = {
62+
id: gitHubMember.id,
63+
login: gitHubMember.login,
64+
avatar_url: gitHubMember.avatar_url,
65+
};
66+
67+
return member;
68+
});
69+
70+
return members;
71+
}
72+
}
73+
74+
export const memberAPI = new MemberAPI();
75+
76+
```
77+
78+
- Añadimos un nuevo componente _memberHead_ para crear la cabecera de la tabla:
79+
80+
_./src/memberHead.tsx_
81+
82+
```javascript
83+
import * as React from 'react';
84+
import { MemberEntity } from './model/member';
85+
86+
export const MemberHead = () =>
87+
<tr>
88+
<th>
89+
Avatar
90+
</th>
91+
<th>
92+
Id
93+
</th>
94+
<th>
95+
Name
96+
</th>
97+
</tr>
98+
```
99+
100+
- Ahora vamos a actualizar nuestro componente _membersTable_.
101+
102+
_./src/memberTable.tsx_
103+
104+
- Importamos el nuevo componente:
105+
106+
```diff
107+
108+
+ import { MemberHead } from './memberHead';
109+
110+
```
111+
112+
- Modificamos la función render:
113+
114+
```diff
115+
-<thead>
116+
- <tr>
117+
- <th>
118+
- Avatar
119+
- </th>
120+
- <th>
121+
- Id
122+
- </th>
123+
- <th>
124+
- Name
125+
- </th>
126+
- </tr>
127+
- </thead>
128+
+ <thead>
129+
+ <MemberHead />
130+
+ </thead>
131+
```
132+
133+
- Vamos a consumir el nuevo método de promesas para recuperar a los usuarios:
134+
135+
```diff
136+
// Standard react lifecycle function:
137+
// https://facebook.github.io/react/docs/component-specs.html
138+
public componentDidMount() {
139+
- this.setState({members: memberAPI.getAllMembers()})
140+
+ memberAPI.getAllMembers().then((members) =>
141+
+ this.setState({members: members})
142+
+ );
143+
}
144+
```
145+
146+
- Vamos a probar y verificar los resultados
147+
148+
```
149+
npm start
150+
```

0 commit comments

Comments
 (0)