You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 02 Properties/readme.md
+62-17Lines changed: 62 additions & 17 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,7 @@ In this sample we will introduce a basic React concept, handling properties.
4
4
5
5
We will add a _userName_ property and display it in the _Hello_ component.
6
6
7
-
We will take as a starting point sample __01 Hello React__:
7
+
We will take as a starting point sample __[01 Hello React](../01%20HelloReact/)__:
8
8
9
9
Summary steps:
10
10
@@ -22,27 +22,72 @@ Install [Node.js and npm](https://nodejs.org/en/) if they are not already instal
22
22
23
23
- Copy the content from _01 HelloReact_ and execute `npm install`.
24
24
25
-
-Let's update __hello.jsx__ in order to reflect the new property added (_userName_) and display it using interpolation (`{props.userName}`):
25
+
-Delete the __[main.js](./src/main.js)__ file. Our webpack configuration will only recognize one of the two and there may be conflict. Remember!!! There should never be two files with the same entry name.
26
26
27
-
```javascript
27
+
- Let's update __[hello.jsx](./src/hello.jsx)__ in order to reflect the new property added (_userName_) and display it using interpolation (`{props.userName}`):
28
+
29
+
_[hello.jsx](./src/hello.jsx)_
30
+
```diff
28
31
import React from 'react';
29
32
30
-
exportconstHelloComponent= (props) => {
31
-
return (
32
-
<h2>Hello user: {props.userName}!</h2>
33
-
);
34
-
}
35
-
```
33
+
-- export const HelloComponent = () =>
34
+
++ export const HelloComponent = (props) =>
35
+
-- <p> Hello React!</p>
36
+
++ <h2>Hello user: {props.userName}!</h2>
37
+
```
38
+
39
+
- Let's update __[main.jsx](./src/main.jsx)__ and inform the _userName_ propery value:
In this example we will only use the `render` method of React-DOM, so we will only import that (` import {render} from 'react-dom'; `).
59
+
60
+
Now we will modify the __[hello.jsx](./src/hello.jsx)__ to check that **properties** stick to a given contract (in this case prop `Username` is of type string and required)
36
61
37
-
- Let's update __main.jsx__ and inform the _userName_ propery value:
62
+
(We can expand information here: [https://github.com/facebook/prop-types](https://github.com/facebook/prop-types))
38
63
39
-
```javascript
64
+
_[hello.jsx](./src/hello.jsx)_
65
+
```diff
40
66
import React from 'react';
41
-
import {render} from'react-dom';
42
-
import {HelloComponent} from'./hello';
67
+
++ import PropTypes from 'prop-types';
43
68
44
-
render(
45
-
<HelloComponent userName="John"/>
46
-
, document.getElementById('root')
47
-
);
69
+
export const HelloComponent = (props) =>
70
+
<h2>Hello user: {props.userName}!</h2>
71
+
72
+
++ HelloComponent.propTypes = {
73
+
++ userName: PropTypes.string.isRequired
74
+
++ };
75
+
```
76
+
77
+
**Important**: Don't forget to import the component that manages it, `import PropTypes from 'prop-types';`.
78
+
79
+
- Execute the example:
80
+
81
+
```bash
82
+
npm run build
48
83
```
84
+
85
+
To generate the dist folder, and its contents, and
86
+
87
+
```bash
88
+
npm start
89
+
```
90
+
91
+
- Then, load http://localhost:8080/ in a browser to see the output.
En esta demo, presentaremos un concepto básico de React, manejo de propiedades.
4
+
5
+
Agregaremos a la propiedad _userName_ y la mostraremos en el componente _Hello_.
6
+
7
+
Tomaremos como punto de partida la muestra __[01 Hello React](../01%20HelloReact/)__:
8
+
9
+
Pasos resumidos:
10
+
11
+
- Cree una propiedad en nuestro componente sin estado _Hello_ que contendrá el valor _userName_.
12
+
13
+
- Informarlo desde nuestro control padre.
14
+
15
+
16
+
## Prerrequisitos
17
+
18
+
Instale [Node.js and npm](https://nodejs.org/en/) si aún no están instalados en su computadora.
19
+
20
+
> Verifique que esté ejecutando al menos los nodos v6.x.x y npm 3.x.x ejecutando `node -v` y` npm -v` en una ventana de terminal / consola. Las versiones anteriores pueden producir errores.
21
+
22
+
## Pasos para construirlo
23
+
24
+
- Copie el contenido de _01 HelloReact_ y ejecute `npm install`.
25
+
26
+
- Eliminar el archivo __[main.js](./src/main.js)__. Nuestra configuración de **webpack** solo reconocerá uno de los dos y puede haber un conflicto. ¡¡¡Recuerda!!! Nunca debe haber dos archivos con el mismo nombre de entrada.
27
+
28
+
- Actualicemos __[hello.jsx](./src/hello.jsx)__ para reflejar la nueva propiedad agregada (_userName_) y mostrarla mediante la interpolación (`{props.userName}`):
29
+
30
+
_[hello.jsx](./src/hello.jsx)_
31
+
```diff
32
+
import React from 'react';
33
+
34
+
-- export const HelloComponent = () =>
35
+
++ export const HelloComponent = (props) =>
36
+
-- <p> Hello React!</p>
37
+
++ <h2>Hello user: {props.userName}!</h2>
38
+
```
39
+
40
+
- Actualicemos __[main.jsx](./src/main.jsx)__ e informemos el valor de propiedad _userName_:
En este ejemplo, solo usaremos el método `render` de React-DOM, por lo que solo lo importaremos (` import {render} from 'react-dom'; `).
60
+
61
+
Ahora modificaremos el __[hello.jsx](./src/hello.jsx)__ para verificar que **propiedades** se adhieren a un contrato determinado (en este caso, la propiedad `Username` es de tipo string y requerida)
62
+
63
+
(Podemos ampliar la información aquí: [https://github.com/facebook/prop-types](https://github.com/facebook/prop-types))
64
+
65
+
_[hello.jsx](./src/hello.jsx)_
66
+
```diff
67
+
import React from 'react';
68
+
++ import PropTypes from 'prop-types';
69
+
70
+
export const HelloComponent = (props) =>
71
+
<h2>Hello user: {props.userName}!</h2>
72
+
73
+
++ HelloComponent.propTypes = {
74
+
++ userName: PropTypes.string.isRequired
75
+
++ };
76
+
```
77
+
78
+
**Importante**: no olvidar importar el componente que lo administra, `import PropTypes from 'prop-types';`.
79
+
80
+
81
+
- Ejecuta el ejemplo:
82
+
83
+
```bash
84
+
npm run build
85
+
```
86
+
87
+
Para generar la carpeta dist, y su contenido, y
88
+
89
+
```bash
90
+
npm start
91
+
```
92
+
93
+
- Luego, carga http://localhost:8080/ en un navegador para ver la salida.
0 commit comments