forked from kay-is/react-from-zero
-
Notifications
You must be signed in to change notification settings - Fork 4
/
04-components.html
85 lines (72 loc) · 2.72 KB
/
04-components.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!doctype html>
<title>04 Componentes - React Desde Cero</title>
<script src="https://unpkg.com/react@16.4.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.4.0/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="app"></div>
<script type="text/babel">
// El punto disruptor de React es su sistema de componentes
// Los componentes encapsulan elementos y sus comportamientos
// Puedes verlos como una mezcla de Vista y Controlador del patrón MVC.
// Here we use stand alone elements and some data
// En este ejemplo usamos Elementos independientes y algún dato
var data = "world"
var reactElement =
<div>
<h1>Hello</h1>
<h2>{data}</h2>
</div>
// Aquí encapsulamos a los elementos anteriores en una función componente
// They have to start with a capital letter and
// Deben empezar por una letra Mayúscula
// y devuelve UN único elemento raíz con o sin elementos anidados (antes de React 16)
// en este ejemplo, el componente Raíz es `div`.
function MyComponent() {
var data = "world"
return (
<div>
<h1>Hello</h1>
<h2>{data}</h2>
</div>
)
}
// Desde la versión 16.0.0 de React,
// los componentes también pueden devolver un array de elementos.
// Al hacer esto, no es necesario un elemento raíz, y tampoco será creado automáticamente.
// Hay que tener cuidado y no podemos olvidar incluir la prop `key`
// como identificador único tampoco podemos olvidarnos de la coma
// (Veremos más en la siguiente lección)
function MyComponent() {
var data = "world"
return [
<h1 key="hello">Hello</h1>,
<h2 key="data">{data}</h2>
]
}
// Desde la versión 16.2.0 de React, podemos usar componentes especiales llamados fragments
// los utilizaremos como componentes raíz que no generan ningún elemento en el renderizado
// funciona del mismo modo que si devolviéramos un array,
// pero eliminan la necesidad de incluir `keys` para cada elemento hijo
// tampoco necesitamos el uso de comas.
function MyComponent() {
var data = "world"
return (
<React.Fragment>
<h1>Hello</h1>
<h2>{data}</h2>
</React.Fragment>
)
}
// Una función componente puede ser utilizada como un elemento.
reactElement = <MyComponent/>
// Esto se traduce a una llamada a React.createElement()
// el null indica que no tiene ninguna propiedad.
reactElement = React.createElement(MyComponent, null)
// for reference a react-internal <div> tag
// como ejemplo aquí vemos un componente con un elemento <div>
var anotherElement = <div/>
// que se convierte en
anotherElement = React.createElement("div", null)
var renderTarget = document.getElementById("app")
ReactDOM.render(reactElement, renderTarget)
</script>