Skip to content

Commit

Permalink
translate: why we built react? (#190)
Browse files Browse the repository at this point in the history 
* translate: why we buit react?

* Update content/blog/2013-06-05-why-react.md

Co-Authored-By: mishelashala <[email protected]>

* Update content/blog/2013-06-05-why-react.md

Co-Authored-By: mishelashala <[email protected]>

* Update content/blog/2013-06-05-why-react.md

Co-Authored-By: mishelashala <[email protected]>

* Update content/blog/2013-06-05-why-react.md

Co-Authored-By: mishelashala <[email protected]>

* Update content/blog/2013-06-05-why-react.md

Co-Authored-By: mishelashala <[email protected]>

* Update content/blog/2013-06-05-why-react.md

Co-Authored-By: mishelashala <[email protected]>

* Update content/blog/2013-06-05-why-react.md

Co-Authored-By: mishelashala <[email protected]>

* Update content/blog/2013-06-05-why-react.md

Co-Authored-By: mishelashala <[email protected]>

* Update content/blog/2013-06-05-why-react.md

Co-Authored-By: mishelashala <[email protected]>

* Update content/blog/2013-06-05-why-react.md

Co-Authored-By: mishelashala <[email protected]>

* Update content/blog/2013-06-05-why-react.md

Co-Authored-By: mishelashala <[email protected]>

* Update content/blog/2013-06-05-why-react.md

Co-Authored-By: mishelashala <[email protected]>

* Update content/blog/2013-06-05-why-react.md

Co-Authored-By: mishelashala <[email protected]>

* Update content/blog/2013-06-05-why-react.md

Co-Authored-By: mishelashala <[email protected]>

* Update content/blog/2013-06-05-why-react.md

Co-Authored-By: mishelashala <[email protected]>

* Update content/blog/2013-06-05-why-react.md

Co-Authored-By: mishelashala <[email protected]>

* Update content/blog/2013-06-05-why-react.md

Co-Authored-By: mishelashala <[email protected]>

* Update content/blog/2013-06-05-why-react.md

Co-Authored-By: mishelashala <[email protected]>

* Update content/blog/2013-06-05-why-react.md

Co-Authored-By: mishelashala <[email protected]>

* Update content/blog/2013-06-05-why-react.md

Co-Authored-By: mishelashala <[email protected]>

* Update content/blog/2013-06-05-why-react.md

Co-Authored-By: mishelashala <[email protected]>

* Update content/blog/2013-06-05-why-react.md

Co-Authored-By: mishelashala <[email protected]>
  • Loading branch information
@mishelashala @carburo
mishelashala authored and carburo committed Mar 7, 2019
1 parent f3dc3e9 commit e639bdb
Showing 1 changed file with 67 additions and 64 deletions.
131 changes: 67 additions & 64 deletions content/blog/2013-06-05-why-react.md
View file
Original file line number Diff line number Diff line change
@@ -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 `<canvas>` 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 `<canvas>` 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!

0 comments on commit e639bdb

Please sign in to comment.