From 4aa208e59dcd2322188c746c50c983ece65d8ad5 Mon Sep 17 00:00:00 2001 From: "adeel.imran" Date: Thu, 7 Feb 2019 11:42:13 +0500 Subject: [PATCH 01/11] updated grammer --- content/docs/hooks-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index 6a8d8a664..752f53ef7 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -199,7 +199,7 @@ function reducer(state, action) { } } -function Counter({initialCount}) { +function Counter({initialState}) { const [state, dispatch] = useReducer(reducer, initialState); return ( <> From 4647eeacf07787ac6c4fa041bb06c3e90ea178b7 Mon Sep 17 00:00:00 2001 From: Peng Jie Date: Tue, 12 Feb 2019 11:46:51 +0800 Subject: [PATCH 02/11] docs(hooks): fix break link --- content/docs/hooks-overview.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index fef7de00b..df958dc6d 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -16,7 +16,7 @@ Hooks are [backwards-compatible](/docs/hooks-intro.html#no-breaking-changes). Th **↑↑↑ Each section ends with a yellow box like this.** They link to detailed explanations. -## 📌 State Hook {#-state-hook} +## 📌 State Hook {#state-hook} This example renders a counter. When you click the button, it increments the value: @@ -68,7 +68,7 @@ React provides a few built-in Hooks like `useState`. You can also create your ow > >You can learn more about the State Hook on a dedicated page: [Using the State Hook](/docs/hooks-state.html). -## ⚡️ Effect Hook {#️-effect-hook} +## ⚡️ Effect Hook {#effect-hook} You've likely performed data fetching, subscriptions, or manually changing the DOM from React components before. We call these operations "side effects" (or "effects" for short) because they can affect other components and can't be done during rendering. @@ -159,7 +159,7 @@ Hooks let you organize side effects in a component by what pieces are related (s > >You can learn more about `useEffect` on a dedicated page: [Using the Effect Hook](/docs/hooks-effect.html). -## ✌️ Rules of Hooks {#️-rules-of-hooks} +## ✌️ Rules of Hooks {#rules-of-hooks} Hooks are JavaScript functions, but they impose two additional rules: @@ -172,7 +172,7 @@ We provide a [linter plugin](https://www.npmjs.com/package/eslint-plugin-react-h > >You can learn more about these rules on a dedicated page: [Rules of Hooks](/docs/hooks-rules.html). -## 💡 Building Your Own Hooks {#-building-your-own-hooks} +## 💡 Building Your Own Hooks {#building-your-own-hooks} Sometimes, we want to reuse some stateful logic between components. Traditionally, there were two popular solutions to this problem: [higher-order components](/docs/higher-order-components.html) and [render props](/docs/render-props.html). Custom Hooks let you do this, but without adding more components to your tree. @@ -239,7 +239,7 @@ You can write custom Hooks that cover a wide range of use cases like form handli > >You can learn more about custom Hooks on a dedicated page: [Building Your Own Hooks](/docs/hooks-custom.html). -## 🔌 Other Hooks {#-other-hooks} +## 🔌 Other Hooks {#other-hooks} There are a few less commonly used built-in Hooks that you might find useful. For example, [`useContext`](/docs/hooks-reference.html#usecontext) lets you subscribe to React context without introducing nesting: From d9f15c2279b57562960417376ef52cdbed6cb4e8 Mon Sep 17 00:00:00 2001 From: Tauan Tathiell Date: Tue, 12 Feb 2019 08:43:04 -0200 Subject: [PATCH 03/11] It changes the fiber link inside codebase overview page --- content/docs/codebase-overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/codebase-overview.md b/content/docs/codebase-overview.md index 07b07aa78..206319542 100644 --- a/content/docs/codebase-overview.md +++ b/content/docs/codebase-overview.md @@ -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). From bbf2cb1d6ff144665b2a25744ed36b837bbac8b9 Mon Sep 17 00:00:00 2001 From: Nurul Sundarani Date: Wed, 13 Feb 2019 16:08:25 +0530 Subject: [PATCH 04/11] Updated Copyright Year --- src/components/LayoutFooter/Footer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/LayoutFooter/Footer.js b/src/components/LayoutFooter/Footer.js index bca76aac6..5d91a93a3 100644 --- a/src/components/LayoutFooter/Footer.js +++ b/src/components/LayoutFooter/Footer.js @@ -179,7 +179,7 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => ( color: colors.subtleOnDark, paddingTop: 15, }}> - Copyright © 2018 Facebook Inc. + Copyright © 2019 Facebook Inc.

From 482ba66ba6ca039bfe4fa919e52959f412160f24 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Wed, 13 Feb 2019 14:07:47 +0000 Subject: [PATCH 05/11] Update nav --- content/docs/nav.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/nav.yml b/content/docs/nav.yml index 4d4a7571f..f9c4d3913 100644 --- a/content/docs/nav.yml +++ b/content/docs/nav.yml @@ -34,7 +34,7 @@ - id: composition-vs-inheritance title: Composition vs Inheritance - id: thinking-in-react - title: Thinking In React + title: Философия React - title: Advanced Guides items: - id: accessibility From 6bd4173a4eaf8ba3acf22a0875b15d016a2e07ff Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Wed, 13 Feb 2019 14:08:01 +0000 Subject: [PATCH 06/11] Revert "Update nav" This reverts commit 482ba66ba6ca039bfe4fa919e52959f412160f24. --- content/docs/nav.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/nav.yml b/content/docs/nav.yml index f9c4d3913..4d4a7571f 100644 --- a/content/docs/nav.yml +++ b/content/docs/nav.yml @@ -34,7 +34,7 @@ - id: composition-vs-inheritance title: Composition vs Inheritance - id: thinking-in-react - title: Философия React + title: Thinking In React - title: Advanced Guides items: - id: accessibility From b2183584ba8c4c2881cc969c1786e6240e3e7b77 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Thu, 14 Feb 2019 19:21:15 +0000 Subject: [PATCH 07/11] Use 16.8.2 (#1686) --- src/site-constants.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/site-constants.js b/src/site-constants.js index a401ab74b..5f217fa00 100644 --- a/src/site-constants.js +++ b/src/site-constants.js @@ -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://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}; From 6e32ee96b455339f5d6d6e6823394c7b99562090 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Thu, 14 Feb 2019 20:31:35 +0000 Subject: [PATCH 08/11] Bump React used by the website (#1687) --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 0dd174fb9..a18d1d5c8 100644 --- a/package.json +++ b/package.json @@ -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", From 87f5b7ba905c9fa6b3e0b046d85511550ceca4aa Mon Sep 17 00:00:00 2001 From: Saransh Kataria Date: Thu, 14 Feb 2019 22:24:08 -0800 Subject: [PATCH 09/11] updated broken link on HOC documentation --- content/docs/higher-order-components.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/higher-order-components.md b/content/docs/higher-order-components.md index 63da3ef86..4d15f5b97 100644 --- a/content/docs/higher-order-components.md +++ b/content/docs/higher-order-components.md @@ -14,7 +14,7 @@ const EnhancedComponent = higherOrderComponent(WrappedComponent); Whereas a component transforms props into UI, a higher-order component transforms a component into another component. -HOCs are common in third-party React libraries, such as Redux's [`connect`](https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) and Relay's [`createFragmentContainer`](http://facebook.github.io/relay/docs/en/fragment-container.html). +HOCs are common in third-party React libraries, such as Redux's [`connect`](https://github.com/reactjs/react-redux/blob/master/docs/api/connect.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) and Relay's [`createFragmentContainer`](http://facebook.github.io/relay/docs/en/fragment-container.html). In this document, we'll discuss why higher-order components are useful, and how to write your own. @@ -396,4 +396,4 @@ import MyComponent, { someFunction } from './MyComponent.js'; While the convention for higher-order components is to pass through all props to the wrapped component, this does not work for refs. That's because `ref` is not really a prop — like `key`, it's handled specially by React. If you add a ref to an element whose component is the result of a HOC, the ref refers to an instance of the outermost container component, not the wrapped component. -The solution for this problem is to use the `React.forwardRef` API (introduced with React 16.3). [Learn more about it in the forwarding refs section](/docs/forwarding-refs.html). \ No newline at end of file +The solution for this problem is to use the `React.forwardRef` API (introduced with React 16.3). [Learn more about it in the forwarding refs section](/docs/forwarding-refs.html). From 8b7b81e910bc838e416e9b39c7fdc050d05b906b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= Date: Sat, 16 Feb 2019 10:17:42 -0500 Subject: [PATCH 10/11] Fix conflicts in syncing --- content/docs/higher-order-components.md | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/content/docs/higher-order-components.md b/content/docs/higher-order-components.md index a722f1139..e54c1bdd7 100644 --- a/content/docs/higher-order-components.md +++ b/content/docs/higher-order-components.md @@ -14,11 +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. -<<<<<<< HEAD -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*. -======= -HOCs are common in third-party React libraries, such as Redux's [`connect`](https://github.com/reactjs/react-redux/blob/master/docs/api/connect.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) and Relay's [`createFragmentContainer`](http://facebook.github.io/relay/docs/en/fragment-container.html). ->>>>>>> 99e97c33ae1a12d65c872361250f3ac92b043f38 +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*. @@ -400,8 +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. -<<<<<<< HEAD -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). -======= -The solution for this problem is to use the `React.forwardRef` API (introduced with React 16.3). [Learn more about it in the forwarding refs section](/docs/forwarding-refs.html). ->>>>>>> 99e97c33ae1a12d65c872361250f3ac92b043f38 +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). From 0baf20ec72da4788f282105276259297f6b7014c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= Date: Sat, 16 Feb 2019 10:21:18 -0500 Subject: [PATCH 11/11] Update hooks-overview.md --- content/docs/hooks-overview.md | 36 ++++++++-------------------------- 1 file changed, 8 insertions(+), 28 deletions(-) diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index bd1a3fd8d..8b1357caa 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -16,11 +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. -<<<<<<< HEAD -## 📌 Hook de Estado {#-state-hook} -======= -## 📌 State Hook {#state-hook} ->>>>>>> 99e97c33ae1a12d65c872361250f3ac92b043f38 +## 📌 Hook de Estado {#state-hook} Este ejemplo renderiza un contador. Cuando haces click en el botón, incrementa el valor: @@ -60,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} @@ -70,13 +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). -<<<<<<< HEAD -## ⚡️ Hook de Efecto {#️-effect-hook} -======= -## ⚡️ Effect Hook {#effect-hook} ->>>>>>> 99e97c33ae1a12d65c872361250f3ac92b043f38 +## ⚡️ 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. @@ -167,11 +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). -<<<<<<< HEAD -## ✌️ Reglas de Hooks {#️-rules-of-hooks} -======= -## ✌️ Rules of Hooks {#rules-of-hooks} ->>>>>>> 99e97c33ae1a12d65c872361250f3ac92b043f38 +## ✌️ Reglas de Hooks {#️rules-of-hooks} Hooks son funciones de JavaScript, pero imponen dos reglas adicionales: @@ -184,11 +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). -<<<<<<< HEAD -## 💡 Construyendo Tus Propios Hooks {#-building-your-own-hooks} -======= -## 💡 Building Your Own Hooks {#building-your-own-hooks} ->>>>>>> 99e97c33ae1a12d65c872361250f3ac92b043f38 +## 💡 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. @@ -255,11 +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). -<<<<<<< HEAD -## 🔌 Otros Hooks {#-other-hooks} -======= -## 🔌 Other Hooks {#other-hooks} ->>>>>>> 99e97c33ae1a12d65c872361250f3ac92b043f38 +## 🔌 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: @@ -285,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).