Skip to content

Commit

Permalink
Merge branch 'master' into accessibility-translation
Browse files Browse the repository at this point in the history
  • Loading branch information
alejandronanez authored Feb 23, 2019
2 parents 9446acf + 4356f64 commit 5fc7867
Show file tree
Hide file tree
Showing 73 changed files with 557 additions and 546 deletions.
2 changes: 1 addition & 1 deletion content/blog/2015-08-11-relay-technical-preview.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ While React simplified the process of developing complex user-interfaces, it lef

Declarative data-fetching means that Relay applications specify *what* data they need, not *how* to fetch that data. Just as React uses a description of the desired UI to manage view updates, Relay uses a data description in the form of GraphQL queries. Given these descriptions, Relay coalesces queries into batches for efficiency, manages error-prone asynchronous logic, caches data for performance, and automatically updates views as data changes.

Relay is also component-oriented, extending the notion of a React component to include a description of what data is necessary to render it. This colocation allows developers to reason locally about their application and eliminates bugs such as under- or over-fetching data.
Relay is also component-oriented, extending the notion of a React component to include a description of what data is necessary to render it. This collocation allows developers to reason locally about their application and eliminates bugs such as under- or over-fetching data.

Relay is in use at Facebook in production apps, and we're using it more and more because *Relay lets developers focus on their products and move fast*. It's working for us and we'd like to share it with the community.

Expand Down
2 changes: 1 addition & 1 deletion content/blog/2018-09-10-introducing-the-react-profiler.md
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ It also shows that each time it rendered, it was the most "expensive" component

To view this chart, either double-click on a component _or_ select a component and click on the blue bar chart icon in the right detail pane.
You can return to the previous chart by clicking the "x" button in the right detail pane.
You can aso double click on a particular bar to view more information about that commit.
You can also double click on a particular bar to view more information about that commit.

![How to view all renders for a specific component](../images/blog/introducing-the-react-profiler/see-all-commits-for-a-fiber.gif)

Expand Down
15 changes: 15 additions & 0 deletions content/community/conferences.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,11 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c
January 31, 2019 in Tehran, Iran
[Website](http://reactiran.com) - [Instagram](https://www.instagram.com/reactiran/)

### Reactathon 2019 {#reactathon-2019}
March 30-31, 2019 in San Francisco, USA

[Website](https://www.reactathon.com/) - [Twitter](https://twitter.com/reactathon)

### App.js Conf 2019 {#appjs-conf-2019}
April 4-5, 2019 in Kraków, Poland

Expand All @@ -31,11 +36,21 @@ May 23-24, 2019 in Paris, France

[Website](https://www.react-europe.org) - [Twitter](https://twitter.com/ReactEurope) - [Facebook](https://www.facebook.com/ReactEurope) - [Videos](https://www.youtube.com/c/ReacteuropeOrgConf)

### React Conf Armenia 2019 {#react-conf-am-19}
May 25, 2019 in Yerevan, Armenia

[Website](https://reactconf.am/) - [Twitter](https://twitter.com/ReactConfAM) - [Facebook](https://www.facebook.com/reactconf.am/) - [YouTube](https://www.youtube.com/c/JavaScriptConferenceArmenia) - [CFP](http://bit.ly/speakReact)

### React Norway 2019 {#react-norway-2019}
June 12, 2019. Larvik, Norway

[Website](https://reactnorway.com) - [Twitter](https://twitter.com/ReactNorway)

### React Loop 2019 {#react-loop-2019}
June 21, 2019 Chicago, Illinois USA

[Website](https://reactloop.com) - [Twitter](https://twitter.com/ReactLoop)

### ComponentsConf 2019 {#componentsconf-2019}
September 6, 2019 in Melbourne, Australia
[Website](https://www.componentsconf.com.au/) - [Twitter](https://twitter.com/componentsconf)
Expand Down
1 change: 1 addition & 0 deletions content/docs/accessibility.md
Original file line number Diff line number Diff line change
Expand Up @@ -152,6 +152,7 @@ Proporcione un mecanismo para permitir que los usuarios omitan las secciones de

Skiplink o Skip Navigation son enlaces de navegación ocultos que solo se hacen visibles cuando los usuarios de teclado interactúan con la página. Son muy fáciles de implementar con anclajes internos de página y algunos estilos:


- [WebAIM - Omitir enlaces de navegación](http://webaim.org/techniques/skipnav/)

También utilice elementos y roles de puntos de referencia, como `<main>` y `<aside>`, para delimitar las regiones de la página ya que la tecnología de asistencia permite al usuario navegar rápidamente a estas secciones.
Expand Down
8 changes: 4 additions & 4 deletions content/docs/add-react-to-a-website.md
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ Lo siguiente es agregar tres etiquetas `<script>` a la página HTML justo antes
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- Carguemos nuestro componente de React. -->
<!-- Cargamos nuestro componente de React. -->
<script src="like_button.js"></script>
</body>
Expand Down Expand Up @@ -147,9 +147,9 @@ return (
);
```

Estos dos fragmentos de código son equivalentes. Mientras **JSX es [completamente opcional](/docs/react-without-jsx.html)**, muchas personas lo encuentran útil para escribir código relacionado con la IU -- ya sea usando React o con otras bibliotecas.
Estos dos fragmentos de código son equivalentes. Mientras **JSX es [completamente opcional](/docs/react-without-jsx.html)**, muchas personas lo encuentran útil para escribir código relacionado con la interfaz de usuario -- ya sea usando React o con otras bibliotecas.

Puedes experimentar con JSX usando [este conversor en línea](http://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=Q&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2%2Cstage-3&prettier=true&targets=Node-6.12&version=6.26.0&envVersion=).
Puedes experimentar con JSX usando [este conversor en línea](https://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=Q&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2%2Cstage-3&prettier=true&targets=Node-6.12&version=6.26.0&envVersion=).

### Prueba JSX de forma rápida {#quickly-try-jsx}

Expand Down Expand Up @@ -197,6 +197,6 @@ No esperes hasta que termine -- este comando inicia un observador automático pa

Si ahora creas un archivo llamado `src/like_button.js` con este **[código inicial de JSX](https://cdn.rawgit.com/gaearon/c8e112dc74ac44aac4f673f2c39d19d1/raw/09b951c86c1bf1116af741fa4664511f2f179f0a/like_button.js)**, el observador va a crear un `like_button.js` preprocesado con el código JavaScript original que es apto para el navegador. Cuando edites el código del archivo que tiene JSX, el transformador va a volver a ejecutarse de forma automática.

Como un bonus, esto también te permite utilizar características nuevas de la sintaxis de JavaScript, como las clases, sin que te preocupes de que no funcionen en navegadores antiguos. La herramienta que hemos usado se llama Babel, y puedes leer más sobre ella en [su documentación](http://babeljs.io/docs/en/babel-cli/).
Como un bonus, esto también te permite utilizar características nuevas de la sintaxis de JavaScript, como las clases, sin que te preocupes de que no funcionen en navegadores antiguos. La herramienta que hemos usado se llama Babel, y puedes leer más sobre ella en [su documentación](https://babeljs.io/docs/en/babel-cli/).

Si notas que se te está haciendo más cómodo manejar las herramientas de configuración y quieres sacarle mayor provecho, [en la próxima sección](/docs/create-a-new-react-app.html) se describen unas de las cadenas de herramientas más populares y accesibles. Dado el caso que no te sientas así -- esas etiquetas de script serán suficiente.
4 changes: 2 additions & 2 deletions content/docs/addons-perf.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@ In addition to giving you an overview of your app's overall performance, `Perf`
See these articles for an introduction to React performance tooling:

- ["How to Benchmark React Components"](https://medium.com/code-life/how-to-benchmark-react-components-the-quick-and-dirty-guide-f595baf1014c)
- ["Performance Engineering with React"](http://benchling.engineering/performance-engineering-with-react/)
- ["A Deep Dive into React Perf Debugging"](http://benchling.engineering/deep-dive-react-perf-debugging/)
- ["Performance Engineering with React"](https://benchling.engineering/performance-engineering-with-react/)
- ["A Deep Dive into React Perf Debugging"](https://benchling.engineering/deep-dive-react-perf-debugging/)

### Development vs. Production Builds {#development-vs-production-builds}

Expand Down
8 changes: 4 additions & 4 deletions content/docs/addons-shallow-renderer.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ category: Referencia

```javascript
import ShallowRenderer from 'react-test-renderer/shallow'; // ES6
var ShallowRenderer = require('react-test-renderer/shallow'); // ES5 with npm
var ShallowRenderer = require('react-test-renderer/shallow'); // ES5 con npm
```

## Resumen {#resumen}
Expand All @@ -35,7 +35,7 @@ Entonces puedes comprobar:
```javascript
import ShallowRenderer from 'react-test-renderer/shallow';

// en tu test:
// en tu prueba:
const renderer = new ShallowRenderer();
renderer.render(<MyComponent />);
const result = renderer.getRenderOutput();
Expand All @@ -47,11 +47,11 @@ expect(result.props.children).toEqual([
]);
```

Las pruebas superficiales tienen algunas limitaciones, es decir, no soportan refs.
Las pruebas superficiales tienen algunas limitaciones, es decir, no soportan referencias.

> Nota:
>
> También recomendamos revisar [Shallow Rendering API](http://airbnb.io/enzyme/docs/api/shallow.html) de Enzyme. Provee un API de alto nivel mucho mejor de la misma funcionalidad.
> También recomendamos revisar la [API de Renderizado Superficial](https://airbnb.io/enzyme/docs/api/shallow.html) de Enzyme. Provee una API de alto nivel mucho mejor de la misma funcionalidad.
## Referencia {#referencia}

Expand Down
10 changes: 5 additions & 5 deletions content/docs/addons-test-utils.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,18 @@ category: Reference

```javascript
import ReactTestUtils from 'react-dom/test-utils'; // ES6
var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm
var ReactTestUtils = require('react-dom/test-utils'); // ES5 con npm
```

## Introducción {#overview}

`ReactTestUtils` facilita probar los componentes de React en cualquiera de los frameworks de pruebas que elijas. En Facebook usamos [Jest](https://facebook.github.io/jest/) para realizar las pruebas de JavaScript sin problemas. Aprende como iniciar con Jest en el [tutorial para React](http://facebook.github.io/jest/docs/en/tutorial-react.html#content) que se encuentra en el sitio web de Jest.
`ReactTestUtils` facilita probar los componentes de React en cualquiera de los frameworks de pruebas que elijas. En Facebook usamos [Jest](https://facebook.github.io/jest/) para realizar las pruebas de JavaScript sin problemas. Aprende como iniciar con Jest en el [tutorial para React](https://jestjs.io/docs/tutorial-react) que se encuentra en el sitio web de Jest.

> Nota:
>
> Recomendamos utilizar [`react-testing-library`](https://git.io/react-testing-library) que está diseñada para permitir e incentivar la escritura de las pruebas para que usen los componentes de la misma forma en que lo harían los usuarios finales.
>
> Como otra opción, Airbnb ha liberado una utilidad de pruebas llamada [Enzyme](http://airbnb.io/enzyme/), que hace fácil asegurar, manipular y navegar por los resultados de tus Componentes de React.
> Como otra opción, Airbnb ha liberado una utilidad de pruebas llamada [Enzyme](https://airbnb.io/enzyme/), que hace fácil asegurar, manipular y navegar por los resultados de tus Componentes de React.
- [`act()`](#act)
- [`mockComponent()`](#mockcomponent)
Expand Down Expand Up @@ -139,7 +139,7 @@ Pasa un módulo de un componente a simular a este método para mejorarlo con mé

> Nota:
>
> `mockComponent()` es una API heredada. En su lugar, recomendamos usar [renderizado superficial](/docs/test-utils.html#shallow-rendering) o [`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock).
> `mockComponent()` es una API heredada. En su lugar, recomendamos usar [renderizado superficial](/docs/shallow-renderer.html) o [`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock).
* * *

Expand Down Expand Up @@ -208,7 +208,7 @@ findAllInRenderedTree(
)
```

Navega por todos los componentes en `tree` y acumula todos los componentes en donde `test(component)` sea `true`. Esto no es útil por sí solo, pero es utilizado como primitivo para otras utilidades de prueba.
Navega por todos los componentes en `tree` y acumula todos los componentes en donde `test(component)` sea `true`. Esto no es útil por sí solo, pero es utilizado como primitiva para otras utilidades de prueba.

* * *

Expand Down
4 changes: 2 additions & 2 deletions content/docs/addons-update.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ var update = require('react-addons-update'); // ES5 with npm

React lets you use whatever style of data management you want, including mutation. However, if you can use immutable data in performance-critical parts of your application it's easy to implement a fast [`shouldComponentUpdate()`](/docs/react-component.html#shouldcomponentupdate) method to significantly speed up your app.

Dealing with immutable data in JavaScript is more difficult than in languages designed for it, like [Clojure](http://clojure.org/). However, we've provided a simple immutability helper, `update()`, that makes dealing with this type of data much easier, *without* fundamentally changing how your data is represented. You can also take a look at Facebook's [Immutable-js](https://facebook.github.io/immutable-js/docs/) and the [Advanced Performance](/docs/advanced-performance.html) section for more detail on Immutable-js.
Dealing with immutable data in JavaScript is more difficult than in languages designed for it, like [Clojure](https://clojure.org/). However, we've provided a simple immutability helper, `update()`, that makes dealing with this type of data much easier, *without* fundamentally changing how your data is represented. You can also take a look at Facebook's [Immutable-js](https://facebook.github.io/immutable-js/docs/) and the [Advanced Performance](/docs/advanced-performance.html) section for more detail on Immutable-js.

### The Main Idea {#the-main-idea}

Expand Down Expand Up @@ -67,7 +67,7 @@ const newData = update(myData, {
});
```

While the syntax takes a little getting used to (though it's inspired by [MongoDB's query language](http://docs.mongodb.org/manual/core/crud-introduction/#query)) there's no redundancy, it's statically analyzable and it's not much more typing than the mutative version.
While the syntax takes a little getting used to (though it's inspired by [MongoDB's query language](https://docs.mongodb.com/manual/crud/#query)) there's no redundancy, it's statically analyzable and it's not much more typing than the mutative version.

The `$`-prefixed keys are called *commands*. The data structure they are "mutating" is called the *target*.

Expand Down
4 changes: 2 additions & 2 deletions content/docs/code-splitting.md
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ configurado para ti y puedes comenzar a [usarlo](https://github.com/facebookincu

Si configuras Webpack por ti mismo, probablemente vas a querer leer la [guía sobre división de código](https://webpack.js.org/guides/code-splitting/) de Webpack. Tu configuración de Webpack debería verse vagamente [como esta](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269).

Cuando uses [Babel](http://babeljs.io/), tienes que asegurarte de que Babel reconozca la sintaxis de `import()` dinámico pero no la transforme. Para ello vas a necesitar el [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import).
Cuando uses [Babel](https://babeljs.io/), tienes que asegurarte de que Babel reconozca la sintaxis de `import()` dinámico pero no la transforme. Para ello vas a necesitar el [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/es-ES/package/babel-plugin-syntax-dynamic-import).

## `React.lazy` {#reactlazy}

Expand Down Expand Up @@ -202,7 +202,7 @@ const MyComponent = () => (

Decidir en qué parte de tu aplicación introducir la división de código puede ser un poco complicado. Quieres asegurarte de elegir lugares que dividan los *bundles* de manera uniforme, sin interrumpir la experiencia del usuario.

Un buen lugar para comenzar es con las rutas. La mayoría de la gente en la web está acostumbrada a que las transiciones entre páginas se tomen cierto tiempo en cargar. También tiendes a rerenderizar todo de una vez, así que es improbable que tus usuarios interactúen con otros elementos en la página al mismo tiempo.
Un buen lugar para comenzar es con las rutas. La mayoría de la gente en la web está acostumbrada a que las transiciones entre páginas se tomen cierto tiempo en cargar. También tiendes a volver a renderizar todo de una vez, así que es improbable que tus usuarios interactúen con otros elementos en la página al mismo tiempo.

Este es un ejemplo de cómo configurar la división de código basada en rutas en tu aplicación usando
bibliotecas como [React Router](https://reacttraining.com/react-router/) con `React.lazy`.
Expand Down
4 changes: 2 additions & 2 deletions content/docs/codebase-overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@ There are multiple injection points in the codebase. In the future, we intend to

### Multiple Packages {#multiple-packages}

React is a [monorepo](http://danluu.com/monorepo/). Its repository contains multiple separate packages so that their changes can be coordinated together, and issues live in one place.
React is a [monorepo](https://danluu.com/monorepo/). Its repository contains multiple separate packages so that their changes can be coordinated together, and issues live in one place.

### React Core {#react-core}

Expand All @@ -171,7 +171,7 @@ The code for React core is located in [`packages/react`](https://github.com/face

### Renderers {#renderers}

React was originally created for the DOM but it was later adapted to also support native platforms with [React Native](http://facebook.github.io/react-native/). This introduced the concept of "renderers" to React internals.
React was originally created for the DOM but it was later adapted to also support native platforms with [React Native](https://facebook.github.io/react-native/). This introduced the concept of "renderers" to React internals.

**Renderers manage how a React tree turns into the underlying platform calls.**

Expand Down
Loading

0 comments on commit 5fc7867

Please sign in to comment.