merging all conflicts

Author: reactjs-translation-bot

.nvmrc

@@ -1 +1 @@
-lts/erbium
+12.16.1

content/blog/2013-10-16-react-v0.5.0.md

@@ -34,7 +34,7 @@ It's been awesome to see the things that people are building with React, and we
 * Added `React.version`.
 * Added `React.isValidClass` - Used to determine if a value is a valid component constructor.
 * Removed `React.autoBind` - This was deprecated in v0.4 and now properly removed.
-* Renamed  `React.unmountAndReleaseReactRootNode` to `React.unmountComponentAtNode`.
+* Renamed `React.unmountAndReleaseReactRootNode` to `React.unmountComponentAtNode`.
 * Began laying down work for refined performance analysis.
 * Better support for server-side rendering - [react-page](https://github.com/facebook/react-page) has helped improve the stability for server-side rendering.
 * Made it possible to use React in environments enforcing a strict [Content Security Policy](https://developer.mozilla.org/en-US/docs/Security/CSP/Introducing_Content_Security_Policy). This also makes it possible to use React to build Chrome extensions.

content/docs/components-and-props.md

@@ -233,7 +233,11 @@ function Comment(props) {
 
 [](codepen://components-and-props/extracting-components-continued)
 
+<<<<<<< HEAD
 A komponensek kivonása elsőre morgós munkának tűnhet, de nagyobb alkalmazások esetén gyorsan megtérül ha egy újrafelhasználható komponens palettával rendelkezünk. Egy jó ökölszabály ha a felhasználói kezelőfelületed valamelyik része többször fel van használva (`Button`, `Panel`, `Avatar`), vagy elég bonyolult saját magában is (`App`, `FeedStory`, `Comment`) akkor jó jelölt lehet egy újrafelhasználható komponensnek.
+=======
+Extracting components might seem like grunt work at first, but having a palette of reusable components pays off in larger apps. A good rule of thumb is that if a part of your UI is used several times (`Button`, `Panel`, `Avatar`), or is complex enough on its own (`App`, `FeedStory`, `Comment`), it is a good candidate to be extracted to a separate component.
+>>>>>>> e548bd7e65086a8206fee46bd9e24b18b68bf045
 
 ## A prop-ok csak olvashatók {#props-are-read-only}
 

content/docs/faq-structure.md

@@ -12,7 +12,7 @@ React doesn't have opinions on how you put files into folders. That said there a
 
 #### Grouping by features or routes {#grouping-by-features-or-routes}
 
-One common way to structure projects is locate CSS, JS, and tests together inside folders grouped by feature or route.
+One common way to structure projects is to locate CSS, JS, and tests together inside folders grouped by feature or route.
 
 ```
 common/

content/docs/optimizing-performance.md

@@ -371,14 +371,16 @@ function updateColorMap(colormap) {
 
 `updateColorMap` now returns a new object, rather than mutating the old one. `Object.assign` is in ES6 and requires a polyfill.
 
-There is a JavaScript proposal to add [object spread properties](https://github.com/sebmarkbage/ecmascript-rest-spread) to make it easier to update objects without mutation as well:
+[Object spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) makes it easier to update objects without mutation as well:
 
 ```js
 function updateColorMap(colormap) {
   return {...colormap, right: 'blue'};
 }
 ```
 
+This feature was added to JavaScript in ES2018. 
+
 If you're using Create React App, both `Object.assign` and the object spread syntax are available by default.
 
 When you deal with deeply nested objects, updating them in an immutable way can feel convoluted. If you run into this problem, check out [Immer](https://github.com/mweststrate/immer) or [immutability-helper](https://github.com/kolodny/immutability-helper). These libraries let you write highly readable code without losing the benefits of immutability.

src/components/Container/Container.js

@@ -22,7 +22,6 @@ const Container = ({children}: {children: Node}) => (
       paddingRight: 20,
       marginLeft: 'auto',
       marginRight: 'auto',
-
       [media.greaterThan('medium')]: {
         width: '90%',
       },

src/components/LayoutHeader/Header.js

@@ -33,6 +33,34 @@ const Header = ({location}: {location: Location}) => (
         display: 'none',
       },
     }}>
+    <Container>
+      <div
+        css={{
+          height: 60,
+          fontSize: 20,
+          padding: 20,
+          textAlign: 'center',
+          [media.between('small', 'large')]: {
+            fontSize: 22,
+            height: 60,
+          },
+          [media.lessThan('small')]: {
+            height: 80,
+          },
+          [media.greaterThan('medium')]: {
+            fontSize: 25,
+          },
+        }}>
+        Black Lives Matter.{' '}
+        <a
+          style={{color: colors.brand}}
+          target="_blank"
+          rel="noopener"
+          href="https://support.eji.org/give/153413/#!/donation/checkout">
+          Support&nbsp;the&nbsp;Equal&nbsp;Justice&nbsp;Initiative.
+        </a>
+      </div>
+    </Container>
     <Container>
       <div
         css={{

src/components/MarkdownHeader/MarkdownHeader.js

@@ -15,15 +15,15 @@ const MarkdownHeader = ({title}: {title: string}) => (
       css={{
         color: colors.dark,
         marginBottom: 0,
-        marginTop: 40,
+        marginTop: 100, // BLM
         ...fonts.header,
 
         [media.size('medium')]: {
-          marginTop: 60,
+          marginTop: 100, // BLM
         },
 
         [media.greaterThan('large')]: {
-          marginTop: 80,
+          marginTop: 100, // BLM
         },
       }}>
       {title}

src/components/MarkdownPage/MarkdownPage.js

@@ -84,7 +84,10 @@ const MarkdownPage = ({
               <MarkdownHeader title={titlePrefix} />
 
               {(date || hasAuthors) && (
-                <div css={{marginTop: 15}}>
+                <div
+                  css={{
+                    marginTop: 15,
+                  }}>
                   {date}{' '}
                   {hasAuthors && (
                     <span>

src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js

@@ -43,7 +43,7 @@ class StickyResponsiveSidebar extends Component<Props, State> {
   render() {
     const {open} = this.state;
     const smallScreenSidebarStyles = {
-      top: 0,
+      top: 60,
       left: 0,
       bottom: 0,
       right: 0,
@@ -117,18 +117,18 @@ class StickyResponsiveSidebar extends Component<Props, State> {
               transition: 'transform 0.5s ease',
             }}
             css={{
-              marginTop: 60,
+              marginTop: 80,
 
               [media.size('xsmall')]: {
-                marginTop: 40,
+                marginTop: 60,
               },
 
               [media.between('small', 'medium')]: {
-                marginTop: 0,
+                marginTop: 70,
               },
 
               [media.between('medium', 'large')]: {
-                marginTop: 50,
+                marginTop: 70,
               },
 
               [media.greaterThan('small')]: {