Sync with reactjs.org @ 8112446 (#414)

Sync with reactjs.org @ 8112446

Co-authored-by: Rokibul Islam <[email protected]>
Co-authored-by: James Baskerville <[email protected]>
Co-authored-by: Franrey Anthony S. Saycon <[email protected]>
Co-authored-by: Bob Ziroll <[email protected]>
Co-authored-by: Saurabh Daware <[email protected]>
Co-authored-by: Jimmy Cleveland <[email protected]>
Co-authored-by: Phil Marshall <[email protected]>
Co-authored-by: Brian Vaughn <[email protected]>
Co-authored-by: Ravi Prakash <[email protected]>
Co-authored-by: Thalyta Fabrine <[email protected]>
Co-authored-by: Nick Tishkevich <[email protected]>

Author: 12 people

content/blog/2018-11-27-react-16-roadmap.md

@@ -175,7 +175,7 @@ function App() {
 // provide Suspense integrations with similar APIs.
 ```
 
-There is no official documentation for how to fetch data with Suspense yet, but you can find some early information in [this talk](https://youtu.be/ByBPyMBTzM0?t=1312) and [this small demo](https://github.com/facebook/react/tree/master/fixtures/unstable-async/suspense). We'll write documentation for React Cache (and how to write your own Suspense-compatible library) closer to this React release, but if you're curious, you can find its very early source code [here](https://github.com/facebook/react/blob/master/packages/react-cache/src/ReactCache.js).
+There is no official documentation for how to fetch data with Suspense yet, but you can find some early information in [this talk](https://youtu.be/ByBPyMBTzM0?t=1312) and [this small demo](https://github.com/facebook/react/blob/master/packages/react-devtools/CHANGELOG.md#suspense-toggle). We'll write documentation for React Cache (and how to write your own Suspense-compatible library) closer to this React release, but if you're curious, you can find its very early source code [here](https://github.com/facebook/react/blob/master/packages/react-cache/src/ReactCache.js).
 
 The low-level Suspense mechanism (suspending rendering and showing a fallback) is expected to be stable even in React 16.6. We've used it for code splitting in production for months. However, the higher-level APIs for data fetching are very unstable. React Cache is rapidly changing, and will change at least a few more times. There are some low-level APIs that are [missing](https://github.com/reactjs/rfcs/pull/89) for a good higher-level API to be possible. We don't recommend using React Cache anywhere except very early experiments. Note that React Cache itself isn't strictly tied to React releases, but the current alphas lack basic features as cache invalidation, and you'll run into a wall very soon. We expect to have something usable with this React release.
 

content/community/articles.md

@@ -16,3 +16,4 @@ permalink: community/articles.html
 - [The Hands-On Guide to Learning React Hooks](https://www.telerik.com/kendo-react-ui/react-hooks-guide/) - Eric Bishard's step-by-step guide to learning React Hooks.
 - [How to Use the React Profiler Component to Measure Render Performance](https://medium.com/@adamhenson/how-to-use-the-react-profiler-component-to-measure-performance-improvements-from-hooks-d43b7092d7a8) - Adam Henson's article exemplifying a use case for `<React.Profiler />`.
 - [Thinking in React Hooks](https://wattenberger.com/blog/react-hooks) - Amelia Wattenberger's provides visualizations and highlighting the mindset change needed switching from classes to functional components + hooks.
+- [React/Redux Links](https://github.com/markerikson/react-redux-links) - Curated tutorial and resource links by Mark Erikson collected on React, Redux, ES6, and more. Very helpful for all kind of developers because of it's categorised content.

content/community/conferences.md

@@ -85,7 +85,7 @@ November 2-4 in Bratislava, Slovakia
 ### React.js Conf 2016 {#reactjs-conf-2016}
 February 22 & 23 in San Francisco, CA
 
-[Website](http://conf.reactjs.com/) - [Schedule](http://conf.reactjs.com/schedule.html) - [Videos](https://www.youtube.com/playlist?list=PLb0IAmt7-GS0M8Q95RIc2lOM6nc77q1IY)
+[Website](http://conf2016.reactjs.org/) - [Schedule](http://conf2016.reactjs.org/schedule.html) - [Videos](https://www.youtube.com/playlist?list=PLb0IAmt7-GS0M8Q95RIc2lOM6nc77q1IY)
 
 ### React Amsterdam 2016 {#react-amsterdam-2016}
 April 16 in Amsterdam, The Netherlands

content/community/meetups.md

@@ -102,6 +102,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
 
 ## Philippines {#philippines}
 * [Manila](https://www.meetup.com/reactjs-developers-manila/)
+* [Manila - ReactJS PH](https://www.meetup.com/ReactJS-Philippines/)
 
 ## Poland {#poland}
 * [Warsaw](https://www.meetup.com/React-js-Warsaw/)

content/docs/hooks-reference.md

@@ -195,6 +195,50 @@ const value = useContext(MyContext);
 >
 >`useContext(MyContext)` позволяет только *читать* контекст и подписываться на его изменения. Вам всё ещё нужен `<MyContext.Provider>` выше в дереве, чтобы *предоставить* значение для этого контекста.
 
+**Соеденим все вместе с Context.Provider**
+```js{31-36}
+const themes = {
+  light: {
+    foreground: "#000000",
+    background: "#eeeeee"
+  },
+  dark: {
+    foreground: "#ffffff",
+    background: "#222222"
+  }
+};
+
+const ThemeContext = React.createContext(themes.light);
+
+function App() {
+  return (
+    <ThemeContext.Provider value={themes.dark}>
+      <Toolbar />
+    </ThemeContext.Provider>
+  );
+}
+
+function Toolbar(props) {
+  return (
+    <div>
+      <ThemedButton />
+    </div>
+  );
+}
+
+function ThemedButton() {
+  const theme = useContext(ThemeContext);
+
+  return (
+    <button style={{ background: theme.background, color: theme.foreground }}>
+      Я стилизован темой из контекста!
+    </button>
+  );
+}
+```
+Это пример из раздела [Продвинутые темы: Контекст](/docs/context.html), только переписанный с использованием хуков. В этом же разделе можно найти больше информации о том, как и когда использовать объект Context.
+
+
 ## Дополнительные хуки {#additional-hooks}
 
 Следующие хуки являются вариантами базовых из предыдущего раздела или необходимы только для конкретных крайних случаев. Их не требуется основательно изучать заранее.

content/docs/lifting-state-up.md

@@ -324,6 +324,6 @@ class Calculator extends React.Component {
 
 Если что-то может быть вычислено из пропсов или из состояния, то скорее всего оно не должно находиться в состоянии. Например, вместо сохранения `celsiusValue` и `fahrenheitValue`, мы сохраняем только последнюю введённую температуру (`temperature`) и её шкалу (`scale`). Значение другого поля ввода можно всегда вычислить из них в методе `render()`. Это позволяет очистить или применить округление к значению другого поля, не теряя при этом точности значений, введённых пользователем.
 
-Когда вы видите, что в UI что-то отображается неправильно, то можете воспользоваться расширением [React Developer Tools](https://github.com/facebook/react-devtools). С помощью него можно проверить пропсы и перемещаться по дереву компонентов вверх до тех пор, пока не найдёте тот компонент, который отвечает за обновление состояния. Это позволяет отследить источник багов:
+Когда вы видите, что в UI что-то отображается неправильно, то можете воспользоваться расширением [React Developer Tools](https://github.com/facebook/react/tree/master/packages/react-devtools). С помощью него можно проверить пропсы и перемещаться по дереву компонентов вверх до тех пор, пока не найдёте тот компонент, который отвечает за обновление состояния. Это позволяет отследить источник багов:
 
 <img src="../images/docs/react-devtools-state.gif" alt="Мониторинг состояния в React DevTools" max-width="100%" height="100%">

gatsby-config.js

@@ -162,5 +162,18 @@ module.exports = {
     },
     'gatsby-plugin-react-helmet',
     'gatsby-plugin-catch-links',
+    {
+      resolve: `gatsby-plugin-manifest`,
+      options: {
+        name: 'Документация React',
+        short_name: 'React [RU]',
+        start_url: '/',
+        background_color: '#20232a',
+        theme_color: '#20232a',
+        display: 'standalone',
+        icon: 'static/logo-512x512.png',
+        legacy: true,
+      },
+    },
   ],
 };

src/components/LayoutFooter/Footer.js

@@ -31,6 +31,9 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
       [media.size('sidebarFixed')]: {
         paddingTop: 40,
       },
+      '@media print': {
+        display: 'none',
+      },
     }}>
     <Container>
       <div

src/components/LayoutHeader/Header.js

@@ -29,6 +29,9 @@ const Header = ({location}: {location: Location}) => (
       width: '100%',
       top: 0,
       left: 0,
+      '@media print': {
+        display: 'none',
+      },
     }}>
     <Container>
       <div

src/html.js

@@ -19,6 +19,11 @@ export default class HTML extends React.Component {
             content="width=device-width, initial-scale=1.0"
           />
           <link rel="icon" href="/favicon.ico" />
+
+          <meta name="apple-mobile-web-app-capable" content="yes" />
+          <link rel="apple-touch-icon" href="/logo-180x180.png" />
+          <meta name="apple-mobile-web-app-title" content="React" />
+
           {this.props.headComponents}
         </head>
         <body {...this.props.bodyAttributes}>