diff --git a/content/blog/2013-06-05-why-react.md b/content/blog/2013-06-05-why-react.md index 6c23552a1..104cf473d 100644 --- a/content/blog/2013-06-05-why-react.md +++ b/content/blog/2013-06-05-why-react.md @@ -1,88 +1,91 @@ --- -title: Why did we build React? +title: ¿Por qué contruimos React? author: [petehunt] --- -There are a lot of JavaScript MVC frameworks out there. Why did we build React -and why would you want to use it? +Hay muchos frameworks MVC para JavaScript. ¿Por qué construimos React y por qué +querrías usarlo? -## React isn't an MVC framework. {#react-isnt-an-mvc-framework} +## React no es un framework MVC {#react-isnt-an-mvc-framework} -React is a library for building composable user interfaces. It encourages -the creation of reusable UI components which present data that changes over -time. +React es una biblioteca para construir interfaces de usuario componibles. Fomenta la creación de +componentes reutilizables para interfaces de usuario que muestran datos que +cambian con el tiempo. -## React doesn't use templates. {#react-doesnt-use-templates} +## React no usa plantillas {#react-doesnt-use-templates} -Traditionally, web application UIs are built using templates or HTML directives. -These templates dictate the full set of abstractions that you are allowed to use -to build your UI. +Tradicionalmente, las interfaces de usuario para aplicaciones web se crean +utilizando plantillas o directivas HTML. Estas plantillas dictan el conjunto +completo de abstracciones que se permiten usar para crear tus interfaces de usuario. -React approaches building user interfaces differently by breaking them into -**components**. This means React uses a real, full featured programming language -to render views, which we see as an advantage over templates for a few reasons: +React se enfoca en la construcción de interfaces de usuario de forma diferente +al dividirlas en **componentes**. Esto significa que React utiliza un lenguaje de +programación real y completo para _renderizar_ vistas, lo que vemos como una +ventaja sobre las plantillas por varias razones: -- **JavaScript is a flexible, powerful programming language** with the ability - to build abstractions. This is incredibly important in large applications. -- By unifying your markup with its corresponding view logic, React can actually - make views **easier to extend and maintain**. -- By baking an understanding of markup and content into JavaScript, there's - **no manual string concatenation** and therefore less surface area for XSS - vulnerabilities. +- **JavaScript es un lenguaje de programación flexible y potente** con la capacidad + de crear abstracciones. Esto es increíblement importante en aplicaciones grandes. +- Al unificar el _markup_ con la lógica en vista correspondiente, React puede + hacer a las vistas **fácil de extender y mantener**. +- Al integrar la comprensión del _markup_ y su contenido dentro de JavaScript, + no hay **concatenación manual de string** y por tanto menos menos espacio + para vulnerabilidades XSS. -We've also created [JSX](/docs/jsx-in-depth.html), an optional syntax -extension, in case you prefer the readability of HTML to raw JavaScript. +También hemos creado [JSX](/docs/jsx-in-depth.html), una extensión de sintaxis +opcional, en caso de que prefieras la legibilidad de HTML a JavaScript simple. -## Reactive updates are dead simple. {#reactive-updates-are-dead-simple} +## Las actualizaciones reactivas son muy simples {#reactive-updates-are-dead-simple} -React really shines when your data changes over time. +React realmente brilla cuando sus datos se modifican con el tiempo. -In a traditional JavaScript application, you need to look at what data changed -and imperatively make changes to the DOM to keep it up-to-date. Even AngularJS, -which provides a declarative interface via directives and data binding [requires -a linking function to manually update DOM nodes](https://code.angularjs.org/1.0.8/docs/guide/directive#reasonsbehindthecompilelinkseparation). +En una aplicación de JavaScript tradicional, debes tomar en cuenta qué datos han +cambiado y realizar cambios de forma imperativa en el DOM para mantenerlos actualizados. +Incluso AngularJS, que proporciona una interfaz declarativa a través de directivas +y _binding_ de datos [require una función que enlace manualmente los cambios a los nodos del DOM](https://code.angularjs.org/1.0.8/docs/guide/directive#reasonsbehindthecompilelinkseparation). -React takes a different approach. +React adopta un enfoque diferente. -When your component is first initialized, the `render` method is called, -generating a lightweight representation of your view. From that representation, -a string of markup is produced, and injected into the document. When your data -changes, the `render` method is called again. In order to perform updates as -efficiently as possible, we diff the return value from the previous call to -`render` with the new one, and generate a minimal set of changes to be applied -to the DOM. +Cuando un componente se inicializa por primera vez, el método `render` es invocado +generando una representación ligera de tu vista. A partir de esa representación, +se produce una cadena de _markup_, e inyectada en el documento. +Cuando tus datos cambian, se vuelve a llamar al método `render`. Para realizar +las actualizaciones de la manera más eficiente posible, diferenciamos el valor +de retorno de la llamada anterior para procesar con el nuevo, y generamos un +conjunto mínimo de cambios que se aplicarán al DOM. -> The data returned from `render` is neither a string nor a DOM node -- it's a -> lightweight description of what the DOM should look like. +> Los datos regresados desde `render` no son ni una cadena de texto ni un nodo +> del DOM: son una descripción ligera de cómo debería verse el DOM. -We call this process **reconciliation**. Check out -[this jsFiddle](http://jsfiddle.net/2h6th4ju/) to see an example of -reconciliation in action. +A este proceso lo llamamos **reconciliación**. Échale un vistazo a [este jsFiddle](http://jsfiddle.net/2h6th4ju/) +para ver un ejemplo de reconciliación en acción. -Because this re-render is so fast (around 1ms for TodoMVC), the developer -doesn't need to explicitly specify data bindings. We've found this approach -makes it easier to build apps. +Debido a que esta nueva rerenderización es tan rápida (alrededor de 1ms para TodoMVC), +el desarrollador no necesita especificar explícitamente los _bindings_ de datos. +Nos hemos dado cuenta que este enfoque facilita la creación de aplicaciones. -## HTML is just the beginning. {#html-is-just-the-beginning} +## HTML es solo el comienzo {#html-is-just-the-beginning} -Because React has its own lightweight representation of the document, we can do -some pretty cool things with it: +Debido a que React tiene su propia representación ligera del documento, podemos +hacer algunas cosas muy interesantes con él: -- Facebook has dynamic charts that render to `` instead of HTML. -- Instagram is a "single page" web app built entirely with React and - `Backbone.Router`. Designers regularly contribute React code with JSX. -- We've built internal prototypes that run React apps in a web worker and use - React to drive **native iOS views** via an Objective-C bridge. -- You can run React - [on the server](https://github.com/petehunt/react-server-rendering-example) - for SEO, performance, code sharing and overall flexibility. -- Events behave in a consistent, standards-compliant way in all browsers - (including IE8) and automatically use - [event delegation](http://davidwalsh.name/event-delegate). +- Facebook tiene gráficas dinámicas que se _renderizan_ en un `` en lugar + de HTML. +- Instagram es una aplicación web "de una sola página" construida completamente con + React y `Backbone.Router`. Los diseñadores contribuyen regularmente con código + React con JSX. +- Hemos creado prototipos internos que ejecutan las aplicaciones React en un web + worker y usan React para impulsar las **vistas nativas de iOS** a través de un + puente en Objective-C. +- Puedes ejecutar React + [en el servidor](https://github.com/petehunt/react-server-rendering-example) + para favorecer SEO, desempeño, compartir código y sobre todo flexibilidad. +- Los eventos se comportan de manera coherente y compatible con los estándares + en todos los navegadores (incluyendo IE8) y utilizan automáticamente la + [delegación de eventos](http://davidwalsh.name/event-delegate). -Head on over to [https://reactjs.org](https://reactjs.org) to check out what we have -built. Our documentation is geared towards building apps with the framework, -but if you are interested in the nuts and bolts -[get in touch](/support.html) with us! +Dirígete a [https://reactjs.org](https://reactjs.org) para ver lo que hemos +construido. Nuestra documentación está orientada a crear aplicaciones con el +framework, pero si estás interesado en todos los detalles, ¡[ponte en contacto](/support.html) + con nosotros! -Thanks for reading! +¡Gracias por leer!