Skip to content

Sync with reactjs.org @ 99e97c33 #157

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
merged 17 commits into from
Feb 16, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion content/docs/codebase-overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -211,7 +211,7 @@ Its main goals are:
* Ability to return multiple elements from `render()`.
* Better support for error boundaries.

You can read more about React Fiber Architecture [here](https://github.com/acdlite/react-fiber-architecture) and [here](https://blog.ag-grid.com/index.php/2018/11/29/inside-fiber-in-depth-overview-of-the-new-reconciliation-algorithm-in-react). While it has shipped with React 16, the async features are not enabled by default yet.
You can read more about React Fiber Architecture [here](https://github.com/acdlite/react-fiber-architecture) and [here](https://medium.com/react-in-depth/inside-fiber-in-depth-overview-of-the-new-reconciliation-algorithm-in-react-e1c04700ef6e). While it has shipped with React 16, the async features are not enabled by default yet.

Its source code is located in [`packages/react-reconciler`](https://github.com/facebook/react/tree/master/packages/react-reconciler).

Expand Down
4 changes: 2 additions & 2 deletions content/docs/higher-order-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const EnhancedComponent = higherOrderComponent(WrappedComponent);

Mientras que un componente transforma _props_ en interfaz de usuario, un componente de orden superior transforma un componente en otro.

Los *HOCs* son comunes en bibliotecas de terceros usadas en React, tales como [`connect`](https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) en *Redux* y [`createFragmentContainer`](http://facebook.github.io/relay/docs/en/fragment-container.html) en *Relay*.
Los *HOCs* son comunes en bibliotecas de terceros usadas en React, tales como [`connect`](https://github.com/reactjs/react-redux/blob/master/docs/api/connect.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) en *Redux* y [`createFragmentContainer`](http://facebook.github.io/relay/docs/en/fragment-container.html) en *Relay*.

En este documento discutiremos por qué los componentes de orden superior son útiles y como escribir tus propios *HOCs*.

Expand Down Expand Up @@ -396,4 +396,4 @@ import MyComponent, { someFunction } from './MyComponent.js';

Aunque la convención para los componentes de orden superior es pasar todos los *props* al componente envuelto, esto no funciona para las *refs*. Esto es porque `ref` no es realmente un *prop*, al igual que `key` es manejado de forma especial por React. Si añades una *ref* a un elemento cuyo componente es el resultado de un *HOC*, esa *ref* se refiere a la instancia del componente contenedor más externo, no al componente envuelto.

La solución a este problema es usar la API `React.forwardRef` (introducido con React 16.3). [Aprende más acerca de esta API en la sección acerca de Reenvío de Refs](/docs/forwarding-refs.html).
La solución a este problema es usar la API `React.forwardRef` (introducida con React 16.3). [Aprende más acerca de esta API en la sección acerca de Reenvío de Refs](/docs/forwarding-refs.html).
16 changes: 8 additions & 8 deletions content/docs/hooks-overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ Hooks son [compatibles con versiones anteriores](/docs/hooks-intro.html#no-break

**↑↑↑ Cada sección termina con un recuadro amarillo como este.** Ellos vinculan a explicaciones detalladas.

## 📌 Hook de Estado {#-state-hook}
## 📌 Hook de Estado {#state-hook}

Este ejemplo renderiza un contador. Cuando haces click en el botón, incrementa el valor:

Expand Down Expand Up @@ -56,7 +56,7 @@ function ExampleWithManyStates() {
}
```

La sintáxis de [desestructuración de un array] (https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/Destructuring_assignment) nos permite dar diferentes nombres a las variables de estado que declaramos llamando a `useState `. Estos nombres no forman parte de la API `useState`. En su lugar, React asume que si llamas a `useState` muchas veces, lo haces en el mismo orden durante cada renderizado. Volveremos a explicar por qué esto funciona y cuándo será útil más adelante.
La sintaxis de [desestructuración de un array] (https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/Destructuring_assignment) nos permite dar diferentes nombres a las variables de estado que declaramos llamando a `useState `. Estos nombres no forman parte de la API `useState`. En su lugar, React asume que si llamas a `useState` muchas veces, lo haces en el mismo orden durante cada renderizado. Volveremos a explicar por qué esto funciona y cuándo será útil más adelante.

#### Pero qué es un Hook? {#but-what-is-a-hook}

Expand All @@ -66,9 +66,9 @@ React proporciona algunos Hooks incorporados como `useState`. También puedes cr

>Explicación Detallada
>
>Puedes aprender más sobre el Hook de Estado en la pagina dedicada: [Usando el Hook de Estado](/docs/hooks-state.html).
>Puedes aprender más sobre el Hook de Estado en la página dedicada: [Usando el Hook de Estado](/docs/hooks-state.html).

## ⚡️ Hook de Efecto {#️-effect-hook}
## ⚡️ Hook de Efecto {#️effect-hook}

Es probable que hayas realizado recuperación de datos, suscripciones o modificacion manual del DOM desde los componentes de React. Llamamos a estas operaciones "efectos secundarios" (o "efectos" para abreviar) porque pueden afectar a otros componentes y no se pueden hacer durante el renderizado.

Expand Down Expand Up @@ -159,7 +159,7 @@ Los Hooks te permiten organizar efectos secundarios en un componente según qué
>
> Puede obtener más información sobre `useEffect` en la página dedicada: [Usando el Hook de Efecto](/docs/hooks-effect.html).

## ✌️ Reglas de Hooks {#️-rules-of-hooks}
## ✌️ Reglas de Hooks {#️rules-of-hooks}

Hooks son funciones de JavaScript, pero imponen dos reglas adicionales:

Expand All @@ -172,7 +172,7 @@ Proporcionamos un [plugin de linter](https://www.npmjs.com/package/eslint-plugin
>
>Puedes aprender más sobre estas reglas en la página dedicada: [Reglas de Hooks](/docs/hooks-rules.html).

## 💡 Construyendo Tus Propios Hooks {#-building-your-own-hooks}
## 💡 Construyendo Tus Propios Hooks {#building-your-own-hooks}

A veces, queremos reutilizar alguna lógica de estado entre componentes. Tradicionalmente, había dos soluciones populares para este problema: [componente de orden superior](/docs/higher-order-components.html) y [render props](/docs/render-props.html). Los Hooks personalizados te permiten hacer esto, pero sin agregar más componentes a tu árbol.

Expand Down Expand Up @@ -239,7 +239,7 @@ Puedes escribir Hooks personalizados que cubran una amplia gama de casos de uso
>
>>Puedes aprender más sobre Hooks personalizados en la página dedicada: [Construyendo Tus Propios Hooks](/docs/hooks-custom.html).

## 🔌 Otros Hooks {#-other-hooks}
## 🔌 Otros Hooks {#other-hooks}

Hay algunos Hooks incorporados de uso menos común que pueden resultarte útiles. Por ejemplo, [`useContext`](/docs/hooks-reference.html#usecontext) te permite suscribirte al contexto React sin introducir el anidamiento:

Expand All @@ -265,7 +265,7 @@ function Todos() {

## Próximos Pasos {#next-steps}

¡Uf, eso fue rápido! Si algunas cosas no te hacen mucho sentido o si te gustaria aprender más en detalle, puedes leer las siguientes páginas, comenzando con la documentación de [Hook de Estado](/docs/hooks-state.html).
¡Uf, eso fue rápido! Si algunas cosas no te hacen mucho sentido o si te gustaría aprender más en detalle, puedes leer las siguientes páginas, comenzando con la documentación de [Hook de Estado](/docs/hooks-state.html).

También puede consultar la [Referencia de la Hooks API](/docs/hooks-reference.html) y las [Preguntas Frecuentes sobre Hooks](/docs/hooks-faq.html).

Expand Down
2 changes: 1 addition & 1 deletion content/docs/hooks-reference.md
Original file line number Diff line number Diff line change
Expand Up @@ -199,7 +199,7 @@ function reducer(state, action) {
}
}

function Counter({initialCount}) {
function Counter({initialState}) {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<>
Expand Down
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,8 @@
"normalize.css": "^8.0.0",
"prettier": "^1.7.4",
"prismjs": "^1.15.0",
"react": "16.7.0-alpha.0",
"react-dom": "16.7.0-alpha.0",
"react": "16.8.2",
"react-dom": "16.8.2",
"react-helmet": "^5.2.0",
"react-live": "1.8.0-0",
"remarkable": "^1.7.1",
Expand Down
2 changes: 1 addition & 1 deletion src/components/LayoutFooter/Footer.js
Original file line number Diff line number Diff line change
Expand Up @@ -179,7 +179,7 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
color: colors.subtleOnDark,
paddingTop: 15,
}}>
Copyright © 2018 Facebook Inc.
Copyright © 2019 Facebook Inc.
</p>
</section>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/site-constants.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
// NOTE: We can't just use `location.toString()` because when we are rendering
// the SSR part in node.js we won't have a proper location.
const urlRoot = 'https://es.reactjs.org';
const version = '16.8.1';
const version = '16.8.2';
const babelURL = 'https://unpkg.com/babel-standalone@6.26.0/babel.min.js';

export {urlRoot, version, babelURL};