first version of spanish translation

Author: catirado

README-es.md

@@ -1,106 +1,108 @@
 # react-howto
 
-If you’re new to React (or frontend in general) you may find the ecosystem confusing. There are a few reasons for this.
+Sí eres nuevo con React (o con el desarrollo front-end en general) puedes encontrar confuso su ecosistema. Existen unas cuantas razones para ello.
 
-* React has historically been targeted at early-adopters and experts
-* Facebook only open-sources what it actually uses, so it doesn’t focus on tooling for smaller-than-Facebook projects
-* There’s a lot of bad marketing masquerading as React guides
+* Históricamente React se ha enfocado en early-adopters y expertos
+* Facebook sólo libera lo que realmente usa, por lo que no  se centra en herramientas para proyectos "más pequeños que Facebook"
+* Hay muchos artículos de marketing enmascarados como guías de React
 
-Throughout this document, I’ll assume you’ve built a web page with HTML, CSS and JavaScript.
+A lo largo de este documento, asumiré que has construido una página con HTML, CSS y JavaScript.
 
-## Why should you listen to me?
+## ¿Por qué escucharme a mí?
 
-There’s a ton of conflicting advice about React out there; why listen to me?
+Hay un montón de consejos conflictivos sobre React ahí fuera, ¿por qué escucharme a mí?
 
-I was one of the original members of the Facebook team that built and open-sourced React. I’m no longer at Facebook and I’m now at a small startup, so I have a non-Facebook perspective as well.
+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".
 
-## How to tackle the React ecosystem
+## Cómo abordar el ecosistema de React
 
-All software is built on a stack of technologies, and you need to understand enough of that stack to build your app. The reason why the React ecosystem of tooling seems overwhelming is because it’s always explained in the wrong order.
+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.
 
-You should learn, in this order, **without skipping ahead or learning concurrently**:
+Debes aprenderlo en este orden, **sin saltarte ningún paso o hacerlo concurrentemente**:
 
-* [React itself](#learning-react-itself)
+* [React en sí](#learning-react-itself)
 * [`npm`](#learning-npm)
 * [JavaScript “bundlers”](#learning-javascript-bundlers)
 * [ES6](#learning-es6)
-* [Routing](#learning-routing)
+* [Enrutamiento](#learning-routing)
 * [Flux](#learning-flux)
 
-**You don't need to learn all of these to be productive with React.** Only move to the next step if you have a problem that needs to be solved.
+**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.
 
-Additionally, there are a few topics that are often mentioned in the React community that are "bleeding edge". The topics below are interesting, but they're difficult to understand, are far less popular than the above topics and **aren't required for most apps**.
-* [Inline styles](#learning-inline-styles)
-* [Server rendering](#learning-server-rendering)
+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**.
+* [Estilos inline](#learning-inline-styles)
+* [Renderizado en el servidor](#learning-server-rendering)
 * [Immutable.js](#learning-immutablejs)
-* [Relay, Falcor, etc](#learning-relay-falcor-etc)
+* [Relay, Falcor, etc.](#learning-relay-falcor-etc)
 
-## Learning React itself
+## Aprendiendo React en sí
 
-It’s a common misconception that you need to waste a lot of time setting up tooling to start to learn React. In the official documentation you’ll find a [copy-paste HTML template](https://facebook.github.io/react/docs/getting-started.html#quick-start-without-npm) that you can save in an `.html` file and get started right away. **No tooling is required for this step, and don’t start learning extra tooling until you’re comfortable with React basics.**
+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.**
 
-I still think the easiest way to learn React is [the official tutorial](https://facebook.github.io/react/docs/tutorial.html).
+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).
 
-## Learning `npm`
+## Aprendiendo `npm`
 
-`npm` is the Node.js package manager and is the most popular way front-end engineers and designers share JavaScript code. It includes a module system called `CommonJS` and lets you install command-line tools written in JavaScript. Read [this post](http://0fps.net/2013/01/22/commonjs-why-and-how/) for background on why `CommonJS` is necessary for browsers, or the [CommonJS Spec Wiki](http://wiki.commonjs.org/wiki/Introduction) for more on the `CommonJS` API.
+`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`.
 
-Most reusable components, libraries and tools in the React ecosystem are available as `CommonJS` modules and are installed with `npm`.
+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`.
 
-## Learning JavaScript bundlers
+## Aprendiendo JavaScript bundlers
 
-For a number of good technical reasons `CommonJS` modules (i.e. everything in `npm`) cannot be used natively in the browser. You need a JavaScript “bundler” to “bundle” these modules into `.js` files that you can include in your web page with a `<script>` tag.
+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>`.
 
-Examples of JavaScript bundlers include `webpack` and `browserify`. Both are good choices, but I prefer `webpack` since it has a lot of features that make development of large apps easier. Since its documentation can be confusing, I have a [plug-and-play template for getting started](https://github.com/petehunt/react-webpack-template) and I wrote a [how-to guide for webpack](https://github.com/petehunt/webpack-howto) for more complex use cases.
+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.
 
-One thing to keep in mind: `CommonJS` uses the `require()` function to import modules, so a lot of people get confused and think that it has something to do with a project called `require.js`. For a number of technical reasons, I would suggest that you avoid `require.js`. It’s also not very popular in the React ecosystem.
+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.
 
-## Learning ES6
+## Aprendiendo ES6
 
-Outside of JSX (which you learned in the React tutorial), you may see some funny syntax in React examples. This is called ES6, and it’s the latest version of JavaScript so you may not have learned it yet. Since it’s so new, it’s not supported in browsers yet, but your bundler can translate it for you with the proper configuration.
+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.
 
-If you just want to get things done with React, **you can skip learning ES6**, or try to pick it up along the way.
+Si únicamente quieres terminar las cosas con React, **puedes saltarte ES6**, o tratar de incorporarlo en el camino.
 
-## Learning routing
+## Aprendiendo enrutamiento
 
-“Single-page applications” are all the rage these days. These are web pages that load once, and when the user clicks on a link or a button, JavaScript running on the page updates the address bar, but the web page is not refreshed. Management of the address bar is done by something called a **router**.
+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**.
 
-The most popular router in the React ecosystem is [react-router](https://github.com/rackt/react-router). If you’re building a single-page application, use it unless you have a good reason not to.
+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.
 
-**Don’t use a router if you aren’t building a single-page application**. Most projects start out as smaller components inside of a larger application anyway.
+**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.
 
-## Learning Flux
+## Aprendiendo Flux
 
-You’ve probably heard of Flux. There’s a *ton* of misinformation about Flux out there.
+Probablemente habrás oído hablar de Flux. Hay un *montón* de información errónea sobre Flux ahí fuera.
 
-A lot of people sit down to build an app and want to define their data model, and they think they need to use Flux to do it. **This is the wrong way to adopt Flux. Flux should only be added once many components have already been built.**
+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.**
 
-React components are arranged in a hierarchy. Most of the time, your data model also follows a hierarchy. In these situations Flux doesn’t buy you much. Sometimes, however, your data model is not hierarchical. When your React components start to receive `props` that feel extraneous, or you have a small number of components starting to get very complex, then you might want to look into Flux.
+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.
 
-**You’ll know when you need Flux. If you aren’t sure if you need it, you don’t need it.**
+**Sabrás cuando necesitas Flux. Sí no estás seguro de si lo necesitas, es que no lo necesitas.**
 
-If you have decided to use Flux, the most popular and well-documented Flux library is [Redux](http://redux.js.org/). There are *a lot* of alternatives out there, and you’ll be tempted to evaluate lots of them, but my advice is to just stick with the most popular one.
+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.
 
-## Learning inline styles
+## Aprendiendo estilos inline
 
-Pre-React, a lot of people reused CSS styles with complicated style sheets built by preprocessors like SASS. Since React makes writing reusable components easy, your stylesheets can be less complicated. Many in the community (including myself) are experimenting with getting rid of stylesheets altogether.
+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.
 
-This is a fairly crazy idea for a number of reasons. It makes media queries more difficult, and it's possible that there are  performance limitations using this technique. **When starting out with React, just style things the way you normally would.**
+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.**
 
-Once you've got a feel for how React works, you can look at alternate techniques. One popular one is [BEM](https://en.bem.info/). I recommend phasing out your CSS preprocessor, since React gives you a more powerful way to reuse styles (by reusing components) and your JavaScript bundler can generate more efficient stylesheets for you (I gave [a talk about this at OSCON](https://www.youtube.com/watch?v=VkTCL6Nqm6Y)). With that said, React, like any other JavaScript library, will work just fine with a CSS preprocessor.
+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.
 
-## Learning server rendering
+## Aprendiendo renderizado en el servidor (server rendering)
 
-Server rendering is often called "universal" or "isomorphic" JS. It means that you can take your React components and render them to static HTML on the server. This improves initial startup perormance because the user does not need to wait for JS to download in order to see the initial UI, and React can re-use the server-rendered HTML so it doesn't need to generate it client-side.
+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.
 
-You need server rendering if you notice that your initial render is too slow or if you want to improve your search engine ranking. While it's true that Google now indexes client-rendered content, as of January 2016 every time it's been measured it's been shown to negatively affect ranking, potentially because of the performance penalty of client-side rendering.
+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.
 
-Server rendering still requires a lot of tooling to get right. Since it transparently supports React components written without server rendering in mind, you should build your app first and worry about server rendering later. You won't need to rewrite all of your components to support it.
+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.
 
-## Learning Immutable.js
+## Aprendiendo Immutable.js
 
-[Immutable.js](https://facebook.github.io/immutable-js/) provides a set of data structures that can help to solve certain performance issues when building React apps. It's a great library, and you'll probably use it a lot in your apps moving forward, but it's completely unnecessary until you have an appreciation of the performance implications. 
+[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. 
 
-## Learning Relay, Falcor etc
+## Aprendiendo Relay, Falcor, etc.
 
-These are technologies that help you reduce the number of AJAX requests. They’re still very cutting-edge, so if you don’t have a problem with too many AJAX requests, you don’t need Relay or Falcor.
+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.
+
+<a name="f1">1</a>: https://es.wikipedia.org/wiki/Bleeding_edge_technology