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
Sí eres nuevo con React (o con el desarrollo front-end en general) puedes encontrar confuso su ecosistema. Existen unas cuantas razones para ello.
3
+
Sí eres nuevo en React (o con el desarrollo front-end en general) puedes encontrarte con que este ecosistema sea confuso. Existen unas cuantas razones para ello.
4
4
5
-
* Históricamente React se ha enfocado en early-adopters y expertos
6
-
* Facebook sólo libera lo que realmente usa, por lo que no se centra en herramientas para proyectos "más pequeños que Facebook"
5
+
* Históricamente React se ha enfocado en early-adopters y expertos.
6
+
* Facebook sólo libera lo que realmente usa, por lo que no se centra en herramientas para proyectos "más pequeños que Facebook"
7
7
* Hay muchos artículos de marketing enmascarados como guías de React
8
8
9
-
A lo largo de este documento, asumiré que has construido una página con HTML, CSS y JavaScript.
9
+
A lo largo de este documento, asumiré que tienes preparada una página con HTML, CSS y JavaScript.
10
10
11
11
## ¿Por qué escucharme a mí?
12
12
13
-
Hay un montón de consejos conflictivos sobre React ahí fuera, ¿por qué escucharme a mí?
13
+
Hay un montón de consejos confusos sobre React ahí fuera, entonces ¿por qué escucharme a mí?
14
14
15
-
Fui uno de los miembros del equipo original de Facebook que construyo y libero React. Ya no estoy en Facebook, ahora estoy en una pequeña startup, por lo que tengo también una perspectiva "no-Facebook".
15
+
Fui miembro del equipo inicial de Facebook que construyó y liberó React. Ya no estoy en Facebook, ahora estoy en una pequeña StartUp, por lo que tengo también una perspectiva "no-Facebook".
16
16
17
-
## Cómo abordar el ecosistema de React
17
+
## Cómo iniciar con React y su ecosistema
18
18
19
-
Todo software se construye con un stack tecnológico, y es necesario entender lo suficiente de ese stack para construir una aplicación. La razón por la que el ecosistema de herramientas de React parece abrumador es porque siempre ha sido explicado en el orden incorrecto.
19
+
Todo software se construye con un stack tecnológico, y es necesario entender lo suficiente de ese stack como para construir una aplicación. La razón por la que el ecosistema de herramientas de React parece abrumador es porque siempre ha sido explicado en el orden incorrecto.
20
20
21
21
Debes aprenderlo en este orden, **sin saltarte ningún paso o hacerlo concurrentemente**:
22
22
@@ -27,83 +27,84 @@ Debes aprenderlo en este orden, **sin saltarte ningún paso o hacerlo concurrent
27
27
*[Enrutamiento](#aprendiendo-enrutamiento)
28
28
*[Flux](#aprendiendo-flux)
29
29
30
-
**No necesitas aprender todas ellas para ser productivo con React.** Sólo muévete al siguiente paso si tienes un problema que necesita ser resuelto.
30
+
**No necesitas aprender todas ellas para ser productivo con React.** Sólo dirígete al siguiente paso si tienes algún problema que necesita ser resuelto.
31
31
32
-
Adicionalmente, hay unos cuantos temas que a menudo son categorizados en la comunidad de React como "bleeding edge"<sup>[1](#f1)</sup>. Los temas de abajo son interesantes, pero difíciles de entender, de lejos menos populares que los de arriba y **no son requeridos para la mayoría de aplicaciones**.
32
+
Adicionalmente, hay unos cuantos temas que a menudo son categorizados en la comunidad de React como "bleeding edge"<sup>[1](#f1)</sup>. Los temas de abajo son interesantes, pero difíciles de entender, de lejos menos populares que los de arriba y **no son requeridos por la mayoría de las aplicaciones**.
33
33
*[Estilos inline](#aprendiendo-estilos-inline)
34
34
*[Renderizado en el servidor](#aprendiendo-renderizado-en-el-servidor)
Es un error común pensar que se necesita perder mucho tiempo preparando un entorno para comenzar a aprender React. En la documentación oficial encontrarás una [plantilla HTML de copia y pega](https://facebook.github.io/react/docs/getting-started.html#quick-start-without-npm) que puedes guardar en un fichero `.html` y empezar inmediatamente. **No se necesita ninguna herramienta para este paso, y no empieces a aprender herramientas extras hasta que no te sientas cómodo con lo básico de React.**
40
+
Es un error común pensar que se necesita perder mucho tiempo preparando un entorno para iniciar el aprendizaje de React. En la documentación oficial la encontrarás en una [plantilla HTML de copia y pega](https://facebook.github.io/react/docs/getting-started.html#quick-start-without-npm) que puedes guardar en un fichero `.html` y empezar inmediatamente. **No se necesita ninguna herramienta para este paso, y no empieces a aprender sobre herramientas extras hasta que no te sientas cómodo con lo básico de React.**
41
41
42
42
Todavía pienso que la forma más fácil de aprender React es [el tutorial oficial](https://facebook.github.io/react/docs/tutorial.html).
43
43
44
44
## Aprendiendo `npm`
45
45
46
-
`npm` es el gestor de paquetes de Node.js y la forma más popular en la que diseñadores y desarrolladores de front-end comparten código JavaScript. Incluye un módulo de sistema llamado `CommonJS` y te permite instalar herramientas de línea de comando escritas en JavaScript. Lee [este artículo](http://0fps.net/2013/01/22/commonjs-why-and-how/) para entender porque `CommonJS` es necesario en los navegadores, o la [CommonJS Spec Wiki](http://wiki.commonjs.org/wiki/Introduction) para más información en la API de `CommonJS`.
46
+
`npm` es el gestor de paquetes de Node.js y la forma más popular en la que diseñadores y desarrolladores de front-end comparten código JavaScript. Incluye un módulo de sistema llamado `CommonJS`, que te permite instalar herramientas de línea de comando escritas en JavaScript. Lee [este artículo](http://0fps.net/2013/01/22/commonjs-why-and-how/) para entender porque `CommonJS` es necesario en los navegadores, o la [CommonJS Spec Wiki](http://wiki.commonjs.org/wiki/Introduction) para más información en la API de `CommonJS`.
47
47
48
48
La mayoría de componentes reusables, librerías y herramientas en el ecosistema de React están disponibles como módulos `CommonJS` y se instalan con `npm`.
49
49
50
50
## Aprendiendo JavaScript bundlers
51
51
52
-
Por un buen número de razones técnicas los módulos `CommonJS` (p.ej. cualquiera en `npm`) no puede ser usado nativamente en el navegador. Necesitas un JavaScript “bundler” para "convertir" estos módulos en ficheros `.js` que puedas incluir en tus páginas web con un tag `<script>`.
52
+
Hay muchas razones razones técnicas por la que los módulos `CommonJS` (p.ej. cualquiera en `npm`) no pueden ser usados nativamente en el navegador. Necesitas un JavaScript “bundler” para "convertir" estos módulos en ficheros `.js` que puedas incluir en tus páginas web con un tag `<script>`.
53
53
54
-
Ejemplos de JavaScript bundlers incluye `webpack` y `browserify`. Ambos son buenas opciones, pero prefiero `webpack` ya que tiene muchas características que hacen el desarrollo de aplicaciones grandes más sencillo. Ya que su documentación puede ser confusa, tengo una [plantilla plug-and-play para empezar](https://github.com/petehunt/react-webpack-template) y escribí una [guía how-to para webpack](https://github.com/petehunt/webpack-howto) para casos de uso más complejos.
54
+
Ejemplos de JavaScript bundlers incluye `webpack` y `browserify`. Ambos son buenas opciones, pero prefiero `webpack` ya que tiene muchas características que hacen que el desarrollo de aplicaciones grandes se más sencillo. Ya que su documentación puede ser confusa, les traigo una [plantilla plug-and-play para empezar](https://github.com/petehunt/react-webpack-template) y una [guía how-to para webpack](https://github.com/petehunt/webpack-howto) para usos mas complejos.
55
55
56
-
Una cosa a tener en cuenta: `CommonJS` utiliza la función `require()` para importar modules, por lo que mucha gente se confunde y piensa que tiene algo que ver con un proyecto llamado `require.js`. Por una cuantas razones técnicas, te sugiero evites utilizar `require.js`. Además no es muy popular en el ecosistema de React.
56
+
Una cosa a tener en cuenta: `CommonJS` utiliza la función `require()` para importar modules, por lo que mucha gente se confunde y piensa que tiene algo que ver con un proyecto llamado `require.js`. Por unas cuantas razones técnicas, te sugiero que evites utilizar `require.js`. Además, no es muy popular en el ecosistema de React.
57
57
58
58
## Aprendiendo ES6
59
59
60
-
Aparte de JSX (el cual has aprendido en el tutorial de React), puede que encuentres sintaxis "divertida" en ejemplos de React. Esto se llama ES6, y es la última versión de JavaScript así que seguramente no lo hayas aprendido aún. Al ser tan nuevo, no está soportado en los navegadores aún, pero tu bundler puede traducirlo por ti con la configuración adecuada.
60
+
Aparte de JSX (el cual has aprendido en el tutorial de React), Es posible que aparezca alguna sintaxis "divertida" en ejemplos de React. Esto se llama ES6, y es la última versión de JavaScript así que seguramente no lo hayas aprendido aún. Al ser tan nuevo, no está soportado en los navegadores aún, pero tu bundler puede traducirlo por ti con la configuración adecuada.
61
61
62
-
Si únicamente quieres terminar las cosas con React, **puedes saltarte ES6**, o tratar de incorporarlo en el camino.
62
+
Si lo que desea es hacer las cosas con React, **puedes omitir el aprendizaje ES6**, o tratar de aprenderlo en el camino.
63
63
64
64
## Aprendiendo enrutamiento
65
65
66
-
Las “single-page applications” (o aplicaciones de página única) son lo más estos días. Estas son páginas que se cargan una vez, y cuando el usuario hace click en un enlace o botón, el JavaScript corriendo en la página actualizar la barra de direcciones, pero la página web no es recargada. La gestión de la barra de direcciones es hecha por algo llamado **router**.
66
+
Las “single-page applications” (o aplicaciones de página única) son las que están de moda estos días. Se trata de páginas que se cargan una vez, y cuando el usuario hace click en un enlace o botón, el JavaScript que está corriendo en la página actualiza la barra de direcciones, pero la página web no es recargada. La gestión de la barra de direcciones es hecha por algo llamado **router**.
67
67
68
68
El router más popular en el ecosistema de React es [react-router](https://github.com/rackt/react-router). Si estás haciendo una aplicación de página única, úsalo a no ser que tengas una buena razón para no hacerlo.
69
69
70
-
**No uses un router si no estás construyendo una aplicación de página única**. De cualquier manera la mayoría de proyectos comienzan cómo pequeños componentes dentro de una aplicación más grande.
70
+
**No uses un router si no estás construyendo una aplicación de página única**. De cualquier manera la mayoría de proyectos comienzan como pequeños componentes dentro de una aplicación más grande.
71
71
72
72
## Aprendiendo Flux
73
73
74
74
Probablemente habrás oído hablar de Flux. Hay un *montón* de información errónea sobre Flux ahí fuera.
75
75
76
-
Mucha gente se sienta a construir una aplicación y quiere definir su modelo de datos, y piensan que necesitan Flux para hacerlo. **Esta es la manera incorrecta de adoptar Flux. Flux sólo debería ser añadido una vez se han hecho ya algunos componentes.**
76
+
Muchas personas se sientan a construir una aplicación y quiere definir su modelo de datos, y piensan que necesitan Flux para hacerlo. **Esta es la manera incorrecta de adoptar Flux. Flux debería ser añadido sólo una vez que se han hecho ya algunos componentes.**
77
77
78
78
Los componentes de React están organizado en una jerarquía. La mayoría de las veces, tu modelo de datos también sigue una jerarquía. Es estas situaciones Flux no te aporta demasiado. A veces, sin embargo, tu modelo de datos no es jerárquico. Cuando tus componentes de React empiezan a recibir `props` que parecen extrañas, o tienes un pequeño número de componentes que empiezan a ser muy complejos, entonces puede que quieras considerar usar Flux.
79
79
80
-
**Sabrás cuando necesitas Flux. Sí no estás seguro de si lo necesitas, es que no lo necesitas.**
80
+
**Sabrás cuando necesitas Flux. Si no estás seguro de si lo necesitas, es que no lo necesitas.**
81
81
82
-
Si has decidido usar Flux, la librería más popular y bien documentada es [Redux](http://redux.js.org/). Hay *muchas* alternativas, y estarás tentado a evaluar muchas de ellas, pero mi consejo es que te quedes sólo con la más popular.
82
+
Si has decidido usar Flux, la librería más popular y bien documentada es [Redux](http://redux.js.org/). Hay *muchas* alternativas, y estarás tentado a revisar muchas de ellas, pero mi consejo es que te quedes sólo con la más popular.
83
83
84
-
## Aprendiendo estilos inline
84
+
## Aprendiendo estilos Inline
85
85
86
-
Antes de React, mucha gente reusaba estilos de CSS con complicadas hojas de estilos construidas con preprocesadores cómo SASS. Ya que React hace sencillo escribir componentes reusables, tus hojas de estilo pueden ser menos complicadas. Muchos en la comunidad (incluido yo) están experimentando con deshacerse de las hojas de estilo del todo.
86
+
Antes de React, mucha gente reutilizaba hojas de estilos CSS con complicados estilos construidos con preprocesadores como SASS. React hace que escribir componentes reutilizables sea sencillo, tus hojas de estilo pueden ser menos complicadas. Muchos usuarios de la comunidad (incluido yo) están pensando deshacerse del todo de las hojas de estilo.
87
87
88
-
Esta es una idea bastante loca por un buen número de razones. Hace las media queries más complicadas, y es posible que existan limitaciones de rendimiento usando esta técnica. **Cuando empieces con React, sólo pone el estilo a las cosas de la forma que normalmente lo harías.**
88
+
Puede parecer una idea bastante loca pero hay muchas razones. Hace las media queries más complicadas, y es posible que existan limitaciones en cuanto a rendimiento usando esta técnica. **Cuando empieces con React, sólo pone el estilo a las cosas de la forma que normalmente lo harías.**
89
89
90
-
Una vez entiendes cómo funciona React, puedes considerar técnicas alternativas. Una de las más populares es [BEM](https://en.bem.info/). Te recomiendo reducir gradualmente tus pre-procesadores CSS, ya que React te ofrece una manera más potente de reusar los estilos (reutilizando componentes) y tu bundler de JavaScript puede generar hojas de estilos más eficientes por ti (di [una charla sobre esto en la OSCON](https://www.youtube.com/watch?v=VkTCL6Nqm6Y)). Dicho esto, React, como cualquier otra librería de JavaScript, funcionará bien con un pre-procesador CSS.
90
+
Una vez entiendes cómo funciona React, puedes considerar técnicas alternativas. Una de las más populares es [BEM](https://en.bem.info/). Te recomiendo reducir gradualmente tus pre-procesadores CSS, ya que React te ofrece una manera más potente de reutilizar los estilos (reutilizacion de componentes) y tu bundler de JavaScript puede generar hojas de estilos más eficientes para ti (Yo di [una charla sobre esto en OSCON](https://www.youtube.com/watch?v=VkTCL6Nqm6Y)). Dicho esto, React, como cualquier otra librería de JavaScript, funcionará bien con un preprocesador CSS.
91
91
92
92
## Aprendiendo renderizado en el servidor
93
93
94
-
El renderizado en el servidor (o server rendering) es a menudo llamado JavaScript "universal" o "isomorfo". Esto significa que puedes tomar tus componentes de React y renderizarlos como HTML estático en el servidor. Es mejora el rendimiento de la carga inicial ya que el usuario no necesita esperar a que el JS sea descargado para ver la interfaz inicial, y React puede reusar el HTML renderizado en el servidor así que no necesita generarlo en el lado del cliente.
94
+
El renderizado en el servidor (o server rendering) es a menudo llamado JavaScript "universal" o "isomórfico". Esto significa que puedes tomar tus componentes de React y renderizarlos como HTML estático en el servidor. Esto mejora el rendimiento de la carga inicial ya que el usuario no necesita esperar a que el JS sea descargado para ver la interfaz inicial, y React puede reutilizar el HTML renderizado en el servidor así que no necesita generarlo en el lado del cliente.
95
95
96
-
Necesitas hacer renderizado en el servidor si te das cuentas que renderizado inicial es demasiado lento si quieres mejorar tu ranking en buscadores (Search Engine Ranking). Aunque es verdad que Google ahora indexa el contenido renderizado en el cliente, desde Enero de 2016 cada vez que se ha medido se ha visto que afecta negativamente al ranking, seguramente por la penalización de rendimiento del renderizado en cliente.
96
+
Necesitas hacer el renderizado en el servidor si te das cuentas que renderizado inicial es demasiado lento y además quieres mejorar tu ranking en buscadores (Search Engine Ranking). Aunque, es cierto que Google ahora indexa el contenido renderizado en el cliente, desde Enero de 2016 cada vez que se ha medido se ha visto que afecta negativamente al ranking, seguramente por la penalización de rendimiento del renderizado en el cliente.
97
97
98
-
El renderizado en el servidor todavía requiere de muchas herramientas para hacerlo bien. Ya que React soporta transparentemente que los componentes sean escritos sin el renderizado en servidor en mente, puedes construir una aplicación primero y preocuparte del renderizado en el servidor después. No necesitarás reescribir todos tus componentes para que funcione.
98
+
El renderizado en el servidor todavía requiere de muchas herramientas para hacerlo bien. Ya que React soporta transparentemente que los componentes sean escritos sin el renderizado en el servidor, puedes construir una aplicación primero y preocuparte del renderizado en el servidor después. **No necesitarás re-escribir todos tus componentes para que funcione.**
99
99
100
100
## Aprendiendo Immutable.js
101
101
102
-
[Immutable.js](https://facebook.github.io/immutable-js/) aporta una colección de estructuras de datos que ayudan a resolver ciertos problemas de rendimiento cuando se construyen aplicaciones con React. Es una gran librería, y seguramente la usarás en muchas de tus aplicaciones más adelante, pero es completamente innecesaria hasta que empieces a apreciar problemas de rendimiento.
102
+
[Immutable.js](https://facebook.github.io/immutable-js/) aporta una colección de estructuras de datos que ayudan a resolver ciertos problemas de rendimiento cuando se construyen aplicaciones con React. Es una gran librería, y seguramente la usarás más adelante en muchas de tus aplicaciones, pero es completamente innecesaria hasta que empieces a apreciar problemas de rendimiento.
103
103
104
104
## Aprendiendo Relay, Falcor, etc.
105
105
106
-
Son tecnologías que te ayudan a reducir el número de peticiones AJAX. Son todavía muy innovadoras, así que si no tienes problemas con demasiadas peticiones AJAX, no necesitas Relay o Falcor.
106
+
Estas son tecnologías que te ayudan a reducir el número de peticiones AJAX. Son todavía innovadoras, así que si no tienes problemas con demasiadas peticiones AJAX, no necesitas Relay o Falcor.
0 commit comments