-
Notifications
You must be signed in to change notification settings - Fork 302
translate: why we built react? #190
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
carburo
merged 23 commits into
reactjs:master
from
ksquareincmx:translate/why-we-built-react
Mar 7, 2019
Merged
Changes from 1 commit
Commits
Show all changes
23 commits
Select commit
Hold shift + click to select a range
84727cf
translate: why we buit react?
mishelashala 660a4c2
Update content/blog/2013-06-05-why-react.md
carburo 775bcc8
Update content/blog/2013-06-05-why-react.md
carburo 25e61c5
Update content/blog/2013-06-05-why-react.md
carburo 80805f7
Update content/blog/2013-06-05-why-react.md
carburo 5cbd445
Update content/blog/2013-06-05-why-react.md
carburo d8d0ddb
Update content/blog/2013-06-05-why-react.md
carburo 457236c
Update content/blog/2013-06-05-why-react.md
carburo 22eccba
Update content/blog/2013-06-05-why-react.md
carburo df01107
Update content/blog/2013-06-05-why-react.md
carburo 395c109
Update content/blog/2013-06-05-why-react.md
carburo 2e15e18
Update content/blog/2013-06-05-why-react.md
carburo 2e60566
Update content/blog/2013-06-05-why-react.md
carburo 95ee19d
Update content/blog/2013-06-05-why-react.md
carburo ef9e1ca
Update content/blog/2013-06-05-why-react.md
carburo f857f7f
Update content/blog/2013-06-05-why-react.md
carburo efee874
Update content/blog/2013-06-05-why-react.md
carburo 36b9f8e
Update content/blog/2013-06-05-why-react.md
carburo c8515a8
Update content/blog/2013-06-05-why-react.md
carburo 6efceac
Update content/blog/2013-06-05-why-react.md
carburo 1cb17a4
Update content/blog/2013-06-05-why-react.md
carburo 7aff217
Update content/blog/2013-06-05-why-react.md
carburo 7a3a41d
Update content/blog/2013-06-05-why-react.md
carburo File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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é | ||
querías usarlo? | ||
|
||
## React isn't an MVC framework. {#react-isnt-an-mvc-framework} | ||
## React no es un framework MVC. {#react-isnt-an-mvc-framework} | ||
mishelashala marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
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 librería para construir _composable UIs_. Fomenta la creación de | ||
mishelashala marked this conversation as resolved.
Show resolved
Hide resolved
|
||
componentes reutlizables para interfaces de usuario que muestran datos que | ||
mishelashala marked this conversation as resolved.
Show resolved
Hide resolved
|
||
cambian con el tiempo. | ||
|
||
## React doesn't use templates. {#react-doesnt-use-templates} | ||
## React no usa templates. {#react-doesnt-use-templates} | ||
mishelashala marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
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 _templates_ o directivas HTML. Estas _templates_ dictan el conjunto | ||
mishelashala marked this conversation as resolved.
Show resolved
Hide resolved
|
||
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 dividirlos en **componentes**. Esto significa que React utiliza un lenguaje de | ||
mishelashala marked this conversation as resolved.
Show resolved
Hide resolved
|
||
programación real y completo para _renderizar_ vistats, lo que vemos como una | ||
mishelashala marked this conversation as resolved.
Show resolved
Hide resolved
|
||
ventaja sobre los _templates_ por varias razones: | ||
mishelashala marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
- **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 **facil de extender y mantener**. | ||
mishelashala marked this conversation as resolved.
Show resolved
Hide resolved
|
||
- Al integrar la comprensión del _markup_ y su contenido dentro de JavaScript, | ||
no hay **concatenación de string manual** y por tanto menos menos superficie | ||
mishelashala marked this conversation as resolved.
Show resolved
Hide resolved
|
||
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 sintaxís | ||
mishelashala marked this conversation as resolved.
Show resolved
Hide resolved
|
||
opcional, en caso de que prefieras la legibilidad de HTML a JavaScript en bruto. | ||
mishelashala marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
## Reactive updates are dead simple. {#reactive-updates-are-dead-simple} | ||
## Las ctualizaciones reactivas son muy simples. {#reactive-updates-are-dead-simple} | ||
mishelashala marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
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_ es producida, e injectada en el documento. | ||
mishelashala marked this conversation as resolved.
Show resolved
Hide resolved
|
||
Cuando tus datos cambian, se vuelve a llamar el método `render`. Para realizar | ||
mishelashala marked this conversation as resolved.
Show resolved
Hide resolved
|
||
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 | ||
mishelashala marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
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**. Echale un vistazo a [este jsFiddle](http://jsfiddle.net/2h6th4ju/) | ||
mishelashala marked this conversation as resolved.
Show resolved
Hide resolved
|
||
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 re-renderización es tan rápida (al rededor de 1ms para TodoMVC), | ||
mishelashala marked this conversation as resolved.
Show resolved
Hide resolved
|
||
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} | ||
mishelashala marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
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 _"single page"_ construida completamente con | ||
mishelashala marked this conversation as resolved.
Show resolved
Hide resolved
|
||
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 losestándares | ||
mishelashala marked this conversation as resolved.
Show resolved
Hide resolved
|
||
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! |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.