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