merging all conflicts

Author: reactjs-translation-bot

Diff for: content/blog/2017-09-08-dom-attributes-in-react-16.md

@@ -29,7 +29,7 @@ In React 16, we are making a change. Now, any unknown attributes will end up in
 React has always provided a JavaScript-centric API to the DOM. Since React components often take both custom and DOM-related props, it makes sense for React to use the `camelCase` convention just like the DOM APIs:
 
 ```js
-<div tabIndex="-1" />
+<div tabIndex={-1} />
 ```
 
 This has not changed. However, the way we enforced it in the past forced us to maintain a whitelist of all valid React DOM attributes in the bundle:
@@ -55,10 +55,10 @@ With the new approach, both of these problems are solved. With React 16, you can
 
 ```js
 // Yes, please
-<div tabIndex="-1" />
+<div tabIndex={-1} />
 
 // Warning: Invalid DOM property `tabindex`. Did you mean `tabIndex`?
-<div tabindex="-1" />
+<div tabindex={-1} />
 ```
 
 In other words, the way you use DOM components in React hasn't changed, but now you have some new capabilities.
@@ -120,7 +120,7 @@ Below is a detailed list of them.
 * **Known attributes with a different canonical React name:**  
 
     ```js
-    <div tabindex="-1" />
+    <div tabindex={-1} />
     <div class="hi" />
     ```
 

Diff for: content/blog/2020-09-22-introducing-the-new-jsx-transform.md

@@ -192,7 +192,7 @@ If you are using [eslint-plugin-react](https://github.com/yannickcr/eslint-plugi
 
 ### TypeScript {#typescript}
 
-TypeScript supports the new JSX transform in [v4.1 beta](https://devblogs.microsoft.com/typescript/announcing-typescript-4-1-beta/#jsx-factories).
+TypeScript supports the new JSX transform in [v4.1](https://devblogs.microsoft.com/typescript/announcing-typescript-4-1/#jsx-factories) and up.
 
 ### Flow {#flow}
 

Diff for: content/community/conferences.md

@@ -8,6 +8,9 @@ permalink: community/meetups.html
 
 Do you have a local React.js meetup? Add it here! (Please keep the list alphabetical)
 
+## Albania {#albania}
+* [Tirana](https://www.meetup.com/React-User-Group-Albania/)
+
 ## Argentina {#argentina}
 * [Rosario](https://www.meetup.com/es/reactrosario)
 
@@ -43,6 +46,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
 * [Montreal, QC - React Native](https://www.meetup.com/fr-FR/React-Native-MTL/)
 * [Vancouver, BC](https://www.meetup.com/ReactJS-Vancouver-Meetup/)
 * [Ottawa, ON](https://www.meetup.com/Ottawa-ReactJS-Meetup/)
+* [Toronto, ON](https://www.meetup.com/Toronto-React-Native/events/)
 
 ## China {#china}
 * [Beijing](https://www.meetup.com/Beijing-ReactJS-Meetup/)
@@ -99,6 +103,9 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
 ## Israel {#israel}
 * [Tel Aviv](https://www.meetup.com/ReactJS-Israel/)
 
+## Italy {#italy}
+* [Milan](https://www.meetup.com/React-JS-Milano/)
+
 ## Malaysia {#malaysia}
 * [Kuala Lumpur](https://www.kl-react.com/)
 * [Penang](https://www.facebook.com/groups/reactpenang/)

Diff for: content/community/meetups.md

@@ -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"](https://benchling.engineering/performance-engineering-with-react/)
- - ["A Deep Dive into React Perf Debugging"](https://benchling.engineering/deep-dive-react-perf-debugging/) 
+ - ["Performance Engineering with React"](https://benchling.engineering/performance-engineering-with-react-e03013e53285)
+ - ["A Deep Dive into React Perf Debugging"](https://benchling.engineering/a-deep-dive-into-react-perf-debugging-fd2063f5a667) 
 
 ### Development vs. Production Builds {#development-vs-production-builds}
 

Diff for: content/docs/addons-perf.md

@@ -320,7 +320,7 @@ Higher-order components come with a few caveats that aren't immediately obvious
 
 ### Don't Use HOCs Inside the render Method {#dont-use-hocs-inside-the-render-method}
 
-React's diffing algorithm (called reconciliation) uses component identity to determine whether it should update the existing subtree or throw it away and mount a new one. If the component returned from `render` is identical (`===`) to the component from the previous render, React recursively updates the subtree by diffing it with the new one. If they're not equal, the previous subtree is unmounted completely.
+React's diffing algorithm (called [Reconciliation](/docs/reconciliation.html)) uses component identity to determine whether it should update the existing subtree or throw it away and mount a new one. If the component returned from `render` is identical (`===`) to the component from the previous render, React recursively updates the subtree by diffing it with the new one. If they're not equal, the previous subtree is unmounted completely.
 
 Normally, you shouldn't need to think about this. But it matters for HOCs because it means you can't apply a HOC to a component within the render method of a component:
 

Diff for: content/docs/higher-order-components.md

@@ -92,7 +92,7 @@ function getGreeting(user) {
 속성에 따옴표를 이용해 문자열 리터럴을 정의할 수 있습니다.
 
 ```js
-const element = <div tabIndex="0"></div>;
+const element = <div tabIndex={0}></div>;
 ```
 
 중괄호를 사용하여 어트리뷰트에 JavaScript 표현식을 삽입할 수도 있습니다.

Diff for: content/docs/introducing-jsx.md

@@ -12,7 +12,7 @@ permalink: docs/legacy-event-pooling.html
 >
 >[Read more](/blog/2020/08/10/react-v17-rc.html#no-event-pooling) about this change in React 17.
 
-The [`SyntheticEvent`](/docs/events.html) objects are pooled. This means that the `SyntheticEvent` object will be reused and all properties will be nullified after the event event handler has been called. For example, this won't work:
+The [`SyntheticEvent`](/docs/events.html) objects are pooled. This means that the `SyntheticEvent` object will be reused and all properties will be nullified after the event handler has been called. For example, this won't work:
 
 ```javascript
 function handleChange(e) {

Diff for: content/docs/legacy-event-pooling.md

@@ -134,7 +134,7 @@ React 16부터는 모든 표준 [또는 사용자 정의](/blog/2017/09/08/dom-a
 React는 항상 JavaScript 중심 API를 DOM에 제공했습니다. React 컴포넌트는 사용자 지정 및 DOM 관련 props 둘 다 받아들이기 때문에, React는 DOM API처럼 camelCase를 사용합니다.
 
 ```js
-<div tabIndex="-1" />      // Just like node.tabIndex DOM API
+<div tabIndex={-1} />      // Just like node.tabIndex DOM API
 <div className="Button" /> // Just like node.className DOM API
 <input readOnly={true} />  // Just like node.readOnly DOM API
 ```

Diff for: content/docs/reference-dom-elements.md

@@ -6,7 +6,11 @@ category: Reference
 permalink: docs/javascript-environment-requirements.html
 ---
 
+<<<<<<< HEAD
 React 16 버전은 컬렉션 자료형인 [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)과 [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set)을 사용합니다. 이 기능을 자체적으로 지원하지 않거나(예. IE 11 미만) 지원은 하지만 잘 호환되지 않는(예. IE 11) 오래된 브라우저나 기기에서도 React를 사용해야 한다면 애플리케이션에 [core-js](https://github.com/zloirock/core-js)나 [babel-polyfill](https://babeljs.io/docs/usage/polyfill/) 같은 전역 폴리필(polyfill)을 포함하는 것도 고려해보세요.
+=======
+React 16 depends on the collection types [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) and [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set). If you support older browsers and devices which may not yet provide these natively (e.g. IE < 11) or which have non-compliant implementations (e.g. IE 11), consider including a global polyfill in your bundled application, such as [core-js](https://github.com/zloirock/core-js).
+>>>>>>> 5e437a10ed4e89cd5eaf990ce4f43e0857592b53
 
 다음은 오래된 브라우저 지원을 위해 core-js 폴리필을 적용한 환경에서 React 16 버전을 사용하는 예시입니다.
 

Diff for: content/docs/reference-javascript-environment-requirements.md

@@ -406,7 +406,17 @@ class ErrorBoundary extends React.Component {
 }
 ```
 
+<<<<<<< HEAD
 > 주의
+=======
+Production and development builds of React slightly differ in the way `componentDidCatch()` handles errors.
+
+On development, the errors will bubble up to `window`, this means that any `window.onerror` or `window.addEventListener('error', callback)` will intercept the errors that have been caught by `componentDidCatch()`.
+
+On production, instead, the errors will not bubble up, which means any ancestor error handler will only receive errors not explicitly caught by `componentDidCatch()`.
+
+> Note
+>>>>>>> 5e437a10ed4e89cd5eaf990ce4f43e0857592b53
 >
 > 오류 이벤트 내에서는 `setState()`의 호출을 통하여 `componentDidCatch()`로 구현된 대체 UI를 렌더링할 수 있습니다. 하지만 이런 방식은 나중 릴리즈에서는 사용할 수 없게 을 것입니다.
 > 대체 UI 렌더링 제어를 하려면 `static getDerivedStateFromError()`를 대신 사용하세요.

Diff for: content/docs/reference-react-component.md

@@ -62,8 +62,13 @@ MyComponent.propTypes = {
   // React 엘리먼트 타입 (ie. MyComponent)
   optionalElementType: PropTypes.elementType,
 
+<<<<<<< HEAD
   // prop가 클래스의 인스턴스임을 선언할 수 있습니다.
   // 이 경우 JS's instanceof 연산자를 사용합니다.
+=======
+  // You can also declare that a prop is an instance of a class. This uses
+  // JS's instanceof operator.
+>>>>>>> 5e437a10ed4e89cd5eaf990ce4f43e0857592b53
   optionalMessage: PropTypes.instanceOf(Message),
 
   // 열거형(enum)으로 처리하여 prop가 특정 값들로 제한되도록 할 수 있습니다.
@@ -98,7 +103,11 @@ MyComponent.propTypes = {
   // 경고가 보이도록 할 수 있습니다.
   requiredFunc: PropTypes.func.isRequired,
 
+<<<<<<< HEAD
   // 모든 데이터 타입이 가능한 값
+=======
+  // A required value of any data type
+>>>>>>> 5e437a10ed4e89cd5eaf990ce4f43e0857592b53
   requiredAny: PropTypes.any.isRequired,
 
   // 사용자 정의 유효성 검사기를 지정할 수도 있습니다.
@@ -194,4 +203,52 @@ class Greeting extends React.Component {
 }
 ```
 
+<<<<<<< HEAD
 `defaultProps`는 `this.props.name`의 값이 부모 컴포넌트에 의해 명시되지 않았을 때 값을 갖도록 할 것입니다. `propTypes`의 타입 확인은 `defaultProps`에도 적용되게 하기 위하여 `defaultProps`가 처리된 뒤에 일어날 것입니다.
+=======
+The `defaultProps` will be used to ensure that `this.props.name` will have a value if it was not specified by the parent component. The `propTypes` typechecking happens after `defaultProps` are resolved, so typechecking will also apply to the `defaultProps`.
+
+### Function Components
+
+If you are using function components in your regular development, you may want to make some small changes to allow PropTypes to be proper applied.
+
+Let's say you have a component like this:
+
+```javascript
+export default function HelloWorldComponent({ name }) {
+  return (
+    <div>Hello, {name}</div>
+  )
+}
+```
+
+To add PropTypes, you may want to declare the component in a separate function before exporting, like this:
+
+```javascript
+function HelloWorldComponent({ name }) {
+  return (
+    <div>Hello, {name}</div>
+  )
+}
+
+export default HelloWorldComponent
+```
+
+Then, you can add PropTypes directly to the `HelloWorldComponent`:
+
+```javascript
+import PropTypes from 'prop-types'
+
+function HelloWorldComponent({ name }) {
+  return (
+    <div>Hello, {name}</div>
+  )
+}
+
+HelloWorldComponent.propTypes = {
+  name: PropTypes.string
+}
+
+export default HelloWorldComponent
+```
+>>>>>>> 5e437a10ed4e89cd5eaf990ce4f43e0857592b53

Diff for: content/docs/typechecking-with-proptypes.md

@@ -45,7 +45,11 @@ class NameForm extends React.Component {
 
 ### 기본 값 {#default-values}
 
+<<<<<<< HEAD
 React 렌더링 생명주기에서 폼 엘리먼트의 `value` 어트리뷰트는 DOM의 value를 대체합니다. 비제어 컴포넌트를 사용하면 React 초깃값을 지정하지만, 그 이후의 업데이트는 제어하지 않는 것이 좋습니다. 이러한 경우에 `value` 어트리뷰트 대신 `defaultValue`를 지정할 수 있습니다.
+=======
+In the React rendering lifecycle, the `value` attribute on form elements will override the value in the DOM. With an uncontrolled component, you often want React to specify the initial value, but leave subsequent updates uncontrolled. To handle this case, you can specify a `defaultValue` attribute instead of `value`. Changing the value of `defaultValue` attribute after a component has mounted will not cause any update of the value in the DOM.
+>>>>>>> 5e437a10ed4e89cd5eaf990ce4f43e0857592b53
 
 ```javascript{7}
 render() {

Diff for: content/docs/uncontrolled-components.md

@@ -65,8 +65,8 @@ export default class HTML extends React.Component<Props> {
                     storageId: 'reactjs_banner_2020survey',
                     normalHeight: 50,
                     smallHeight: 75,
-                    campaignStartDate: '2020-10-05Z', // the Z is for UTC
-                    campaignEndDate: '2020-10-19Z', // the Z is for UTC
+                    campaignStartDate: '2020-10-05T00:00:00Z', // the Z is for UTC
+                    campaignEndDate: '2020-10-19T00:00:00Z', // the Z is for UTC
                     snoozeForDays: 7,
                   };