diff --git a/content/blog/2020-09-22-introducing-the-new-jsx-transform.md b/content/blog/2020-09-22-introducing-the-new-jsx-transform.md index c36896e2b..623fe2f83 100644 --- a/content/blog/2020-09-22-introducing-the-new-jsx-transform.md +++ b/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 --git a/content/community/conferences.md b/content/community/conferences.md index b69173762..48dea9927 100644 --- a/content/community/conferences.md +++ b/content/community/conferences.md @@ -12,11 +12,6 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c ## Upcoming Conferences {#upcoming-conferences} -### React Summit 2020 {#react-summit-2020} -October 15-16, 2020, 7am PST / 10am EST / 4pm CEST - remote event - -[Website](https://reactsummit.com) - [Twitter](https://twitter.com/reactsummit) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://youtube.com/c/ReactConferences) - ### React Conf Brasil 2020 {#react-conf-brasil-2020} November 21, 2020 - remote event @@ -475,3 +470,8 @@ May 14-15, 2020 in Paris, France September 3-4, 2020 - remote event [Website](https://www.react-native.eu/) - [Twitter](https://twitter.com/react_native_eu) - [Facebook](https://www.facebook.com/reactnativeeu/) - [YouTube](https://www.youtube.com/watch?v=m0GfmlGFh3E&list=PLZ3MwD-soTTHy9_88QPLF8DEJkvoB5Tl-) - [Instagram](https://www.instagram.com/reactnative_eu/) + +### React Summit 2020 {#react-summit-2020} +October 15-16, 2020, 7am PST / 10am EST / 4pm CEST - remote event + +[Website](https://reactsummit.com) - [Twitter](https://twitter.com/reactsummit) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://youtube.com/c/ReactConferences) diff --git a/content/community/meetups.md b/content/community/meetups.md index 6f8a2eb9f..bbb078d24 100644 --- a/content/community/meetups.md +++ b/content/community/meetups.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) diff --git a/content/docs/addons-perf.md b/content/docs/addons-perf.md index a07b1d05a..221ce2e86 100644 --- a/content/docs/addons-perf.md +++ b/content/docs/addons-perf.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 --git a/content/docs/higher-order-components.md b/content/docs/higher-order-components.md index b10392c9b..8d97b61ce 100644 --- a/content/docs/higher-order-components.md +++ b/content/docs/higher-order-components.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 --git a/content/docs/legacy-event-pooling.md b/content/docs/legacy-event-pooling.md index 0ba91e9d5..8fb19c3b3 100644 --- a/content/docs/legacy-event-pooling.md +++ b/content/docs/legacy-event-pooling.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 --git a/content/docs/reference-javascript-environment-requirements.md b/content/docs/reference-javascript-environment-requirements.md index 83dfd8395..a24e51077 100644 --- a/content/docs/reference-javascript-environment-requirements.md +++ b/content/docs/reference-javascript-environment-requirements.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). +>>>>>>> 8f9ef00db1b36ee3e5a0e6072eb601257a6f8ccb 다음은 오래된 브라우저 지원을 위해 core-js 폴리필을 적용한 환경에서 React 16 버전을 사용하는 예시입니다. diff --git a/content/docs/reference-react-component.md b/content/docs/reference-react-component.md index daf59776e..d0843f4ef 100644 --- a/content/docs/reference-react-component.md +++ b/content/docs/reference-react-component.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 +>>>>>>> 8f9ef00db1b36ee3e5a0e6072eb601257a6f8ccb > > 오류 이벤트 내에서는 `setState()`의 호출을 통하여 `componentDidCatch()`로 구현된 대체 UI를 렌더링할 수 있습니다. 하지만 이런 방식은 나중 릴리즈에서는 사용할 수 없게 을 것입니다. > 대체 UI 렌더링 제어를 하려면 `static getDerivedStateFromError()`를 대신 사용하세요. diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md index de55f32a2..169af7f73 100644 --- a/content/docs/typechecking-with-proptypes.md +++ b/content/docs/typechecking-with-proptypes.md @@ -98,7 +98,11 @@ MyComponent.propTypes = { // 경고가 보이도록 할 수 있습니다. requiredFunc: PropTypes.func.isRequired, +<<<<<<< HEAD // 모든 데이터 타입이 가능한 값 +======= + // A required value of any data type +>>>>>>> 8f9ef00db1b36ee3e5a0e6072eb601257a6f8ccb requiredAny: PropTypes.any.isRequired, // 사용자 정의 유효성 검사기를 지정할 수도 있습니다. diff --git a/content/docs/uncontrolled-components.md b/content/docs/uncontrolled-components.md index ffc60cd4b..f03deff75 100644 --- a/content/docs/uncontrolled-components.md +++ b/content/docs/uncontrolled-components.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. +>>>>>>> 8f9ef00db1b36ee3e5a0e6072eb601257a6f8ccb ```javascript{7} render() { diff --git a/src/html.js b/src/html.js index 2666068e2..f3ffb0003 100644 --- a/src/html.js +++ b/src/html.js @@ -65,8 +65,8 @@ export default class HTML extends React.Component { 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, };