Skip to content

Sync with reactjs.org @ 6dcb9634 #170

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 14 commits into from
Sep 17, 2019
Merged
1 change: 1 addition & 0 deletions content/community/articles.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,3 +14,4 @@ permalink: community/articles.html
- [Simple React Development in 2017](https://hackernoon.com/simple-react-development-in-2017-113bd563691f) - Joshua Comeau's guide to showcase how easy it can be to start modern React development.
- [Visual Guide to State in React](https://daveceddia.com/visual-guide-to-state-in-react/) - Dave Ceddia's visual guide to React state.
- [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 />`.
65 changes: 35 additions & 30 deletions content/community/conferences.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,36 +12,6 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c

## Upcoming Conferences {#upcoming-conferences}

### React Conf Iran 2019 {#react-conf-iran-2019}
August 29, 2019. Tehran, Iran.

[Website](https://reactconf.ir/) - [Twitter](https://twitter.com/reactconf_ir) - [Instagram](https://www.instagram.com/reactconf/)

### React Rally 2019 {#react-rally-2019}
August 22-23, 2019. Salt Lake City, USA.

[Website](https://www.reactrally.com/) - [Twitter](https://twitter.com/ReactRally) - [Instagram](https://www.instagram.com/reactrally/)

### ComponentsConf 2019 {#componentsconf-2019}
September 6, 2019 in Melbourne, Australia

[Website](https://www.componentsconf.com.au/) - [Twitter](https://twitter.com/componentsconf)

### React Native EU 2019 {#react-native-eu-2019}
September 5-6 in Wrocław, Poland

[Website](https://react-native.eu) - [Twitter](https://twitter.com/react_native_eu) - [Facebook](https://www.facebook.com/reactnativeeu)

### React New York 2019 {#react-new-york-2019}
September 13th, 2019. New York, USA

[Website](https://reactnewyork.com/) - [Twitter](https://twitter.com/reactnewyork)

### React Live 2019 {#react-live-2019}
September 13th, 2019. Amsterdam, The Netherlands

[Website](https://www.reactlive.nl/) - [Twitter](https://twitter.com/reactlivenl)

### React Boston 2019 {#react-boston-2019}
September 21-22, 2019 in Boston, Massachusetts USA

Expand Down Expand Up @@ -92,9 +62,44 @@ June 15, 2020. Tel Aviv, Israel.

[Website](https://react-next.com/) - [Twitter](https://twitter.com/reactnext) - [Facebook](https://www.facebook.com/ReactNext2016/)

### React Week NY 2020 {#react-week-NY-2020}
July 17, 2020. New York City, USA.

[Website](https://reactweek.nyc/) - [Twitter](https://twitter.com/reactweek) - [Facebook](https://www.facebook.com/reactweek)


## Past Conferences {#past-conferences}

### React Rally 2019 {#react-rally-2019}
August 22-23, 2019. Salt Lake City, USA.

[Website](https://www.reactrally.com/) - [Twitter](https://twitter.com/ReactRally) - [Instagram](https://www.instagram.com/reactrally/)

### ComponentsConf 2019 {#componentsconf-2019}
September 6, 2019 in Melbourne, Australia

[Website](https://www.componentsconf.com.au/) - [Twitter](https://twitter.com/componentsconf)

### React Native EU 2019 {#react-native-eu-2019}
September 5-6 in Wrocław, Poland

[Website](https://react-native.eu) - [Twitter](https://twitter.com/react_native_eu) - [Facebook](https://www.facebook.com/reactnativeeu)

### React New York 2019 {#react-new-york-2019}
September 13th, 2019. New York, USA

[Website](https://reactnewyork.com/) - [Twitter](https://twitter.com/reactnewyork)

### React Live 2019 {#react-live-2019}
September 13th, 2019. Amsterdam, The Netherlands

[Website](https://www.reactlive.nl/) - [Twitter](https://twitter.com/reactlivenl)

### React Conf Iran 2019 {#react-conf-iran-2019}
August 29, 2019. Tehran, Iran.

[Website](https://reactconf.ir/) - [Videos](https://www.youtube.com/playlist?list=PL-VNqZFI5Nf-Nsj0rD3CWXGPkH-DI_0VY) - [Highlights](https://github.com/ReactConf/react-conf-highlights)

### React.js Conf 2015 {#reactjs-conf-2015}
January 28 & 29 in Facebook HQ, CA

Expand Down
1 change: 1 addition & 0 deletions content/community/tools-ui-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ permalink: community/ui-components.html
* **[react-uwp](https://www.react-uwp.com)** A set of React Components that Implement Microsoft's UWP Design & Fluent Design..
* **[react-validate-framework](https://github.com/MinJieLiu/react-validate-framework)**: A lightweight and extensible React validation component.
* **[reactstrap](https://reactstrap.github.io/):** Simple Bootstrap 4 components built with [tether](http://tether.io/)
* **[Reakit](https://reakit.io/):** Toolkit for building accessible rich web apps with React.
* **[recharts](https://github.com/recharts/recharts)**: A composable charting library built on React components.
* **[Selectivity](https://arendjr.github.io/selectivity/):** Modular and light-weight selection library.
* **[Semantic-ui](https://react.semantic-ui.com/)**: The official Semantic-UI-React integration, Advanced components and declarative UI.
Expand Down
25 changes: 3 additions & 22 deletions content/docs/code-splitting.md
Original file line number Diff line number Diff line change
Expand Up @@ -104,37 +104,18 @@ Create React App을 사용하고 있다면 이미 Webpack이 구성이 되어

```js
import OtherComponent from './OtherComponent';

function MyComponent() {
return (
<div>
<OtherComponent />
</div>
);
}
```

**After**

```js
const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
return (
<div>
<OtherComponent />
</div>
);
}
```
`MyComponent`가 렌더링 될 때 `OtherComponent`를 포함한 번들을 자동으로 불러옵니다.

`React.lazy`는 동적 `import()`를 호출하는 함수를 인자로 가집니다. 이 함수는 React 컴포넌트를
포함하며 `default` export를 가진 모듈로 결정되는 `Promise`로 반환해야 합니다.
`MyComponent`가 처음 렌더링 될 때 `OtherComponent`를 포함한 번들을 자동으로 불러옵니다.

### Suspense {#suspense}
`React.lazy`는 동적 `import()`를 호출하는 함수를 인자로 가집니다. 이 함수는 React 컴포넌트를 포함하며 `default` export를 가진 모듈로 결정되는 `Promise`로 반환해야 합니다.

`MyComponent`를 렌더링할 때 `OtherComponent`를 포함하는 모듈이 아직 로드되지 않았다면, 로드를 기다리는 동안 로딩처럼 예비 컨텐츠를 보여줘야 합니다. 이는 `Suspense` 컴포넌트를 사용하여 처리할 수 있습니다.
lazy 컴포넌트는 `Suspense` 컴포넌트 하위에서 렌더링되어야 하며, `Suspense`는 lazy 컴포넌트가 로드되길 기다리는 동안 로딩 화면과 같은 예비 컨텐츠를 보여줄 수 있게 해줍니다.

```js
const OtherComponent = React.lazy(() => import('./OtherComponent'));
Expand Down
2 changes: 1 addition & 1 deletion content/docs/hooks-faq.md
Original file line number Diff line number Diff line change
Expand Up @@ -655,7 +655,7 @@ function ProductPage({ productId }) {
return <ProductDetails fetchProduct={fetchProduct} />;
}

function ProductDetails({ fetchProduct })
function ProductDetails({ fetchProduct }) {
useEffect(() => {
fetchProduct();
}, [fetchProduct]); // ✅ All useEffect dependencies are specified
Expand Down
2 changes: 0 additions & 2 deletions content/docs/static-type-checking.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@
id: static-type-checking
title: Static Type Checking
permalink: docs/static-type-checking.html
prev: typechecking-with-proptypes.html
next: refs-and-the-dom.html
---

[Flow](https://flow.org/), [TypeScript](https://www.typescriptlang.org/)와 같은 정적 타입 체커들은 코드 실행 전에 특정한 타입 문제를 찾아냅니다. 또한 자동완성과 같은 기능을 추가하여 개발자의 작업 흐름을 개선하기도 합니다. 이러한 이유로 큰 코드 베이스에서는 `PropTypes`를 사용하는 대신 Flow 혹은 TypeScript를 사용하는 것을 추천해 드립니다.
Expand Down
2 changes: 1 addition & 1 deletion content/docs/testing-recipes.md
Original file line number Diff line number Diff line change
Expand Up @@ -543,7 +543,7 @@ You can use fake timers only in some tests. Above, we enabled them by calling `j

### Snapshot Testing {#snapshot-testing}

Frameworks like Jest also let you save "snapshots" of data with [`toMatchSnapshot` / `toMatchInlineSnapshot`](https://jestjs.io/docs/en/snapshot-testing). With these, we can "save" the renderered component output and ensure that a change to it has to be explicitly committed as a change to the snapshot.
Frameworks like Jest also let you save "snapshots" of data with [`toMatchSnapshot` / `toMatchInlineSnapshot`](https://jestjs.io/docs/en/snapshot-testing). With these, we can "save" the rendered component output and ensure that a change to it has to be explicitly committed as a change to the snapshot.

In this example, we render a component and format the rendered HTML with the [`pretty`](https://www.npmjs.com/package/pretty) package, before saving it as an inline snapshot:

Expand Down
2 changes: 1 addition & 1 deletion content/docs/web-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -58,4 +58,4 @@ customElements.define('x-search', XSearch);
>주의
>
>Babel로 클래스를 변환하면 이 코드가 작동하지 **않을 것**입니다. [해당 문제](https://github.com/w3c/webcomponents/issues/587)를 참조해주시기 바랍니다.
>이 문제를 해결하려면 웹 컴포넌트를 불러오기 전에 [custom-elements-es5-adapter](https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs)를 추가하기 바랍니다.
>이 문제를 해결하려면 웹 컴포넌트를 불러오기 전에 [custom-elements-es5-adapter](https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs#custom-elements-es5-adapterjs)를 추가하기 바랍니다.