diff --git a/content/community/conferences.md b/content/community/conferences.md index ea8bed22d..febeb0755 100644 --- a/content/community/conferences.md +++ b/content/community/conferences.md @@ -22,6 +22,11 @@ May 25, 2019 in Yerevan, Armenia [Website](https://reactconf.am/) - [Twitter](https://twitter.com/ReactConfAM) - [Facebook](https://www.facebook.com/reactconf.am/) - [YouTube](https://www.youtube.com/c/JavaScriptConferenceArmenia) - [CFP](http://bit.ly/speakReact) +### ReactNext 2019 {#react-next-2019} +June 11, 2019. Tel Aviv, Israel + +[Website](https://react-next.com) - [Twitter](https://twitter.com/ReactNext) - [Videos](https://www.youtube.com/channel/UC3BT8hh3yTTYxbLQy_wbk2w) + ### React Norway 2019 {#react-norway-2019} June 12, 2019. Larvik, Norway @@ -57,6 +62,11 @@ 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 diff --git a/content/community/meetups.md b/content/community/meetups.md index 8bd1155d0..948759c68 100644 --- a/content/community/meetups.md +++ b/content/community/meetups.md @@ -138,6 +138,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet * [Portland, OR - ReactJS](https://www.meetup.com/Portland-ReactJS/) * [Provo, UT - ReactJS](https://www.meetup.com/ReactJS-Utah/) * [Sacramento, CA - ReactJS](https://www.meetup.com/Sacramento-ReactJS-Meetup/) +* [San Francisco - Real World React](https://www.meetup.com/Real-World-React) * [San Francisco - ReactJS](https://www.meetup.com/ReactJS-San-Francisco/) * [San Francisco, CA - React Native](https://www.meetup.com/React-Native-San-Francisco/) * [San Ramon, CA - TriValley Coders](https://www.meetup.com/trivalleycoders/) diff --git a/content/docs/codebase-overview.md b/content/docs/codebase-overview.md index 95de1b6b5..f55c4afbc 100644 --- a/content/docs/codebase-overview.md +++ b/content/docs/codebase-overview.md @@ -211,7 +211,7 @@ Its main goals are: * Ability to return multiple elements from `render()`. * Better support for error boundaries. -You can read more about React Fiber Architecture [here](https://github.com/acdlite/react-fiber-architecture) and [here](https://medium.com/react-in-depth/inside-fiber-in-depth-overview-of-the-new-reconciliation-algorithm-in-react-e1c04700ef6e). While it has shipped with React 16, the async features are not enabled by default yet. +You can read more about React Fiber Architecture [here](https://github.com/acdlite/react-fiber-architecture) and [here](https://blog.ag-grid.com/inside-fiber-an-in-depth-overview-of-the-new-reconciliation-algorithm-in-react). While it has shipped with React 16, the async features are not enabled by default yet. Its source code is located in [`packages/react-reconciler`](https://github.com/facebook/react/tree/master/packages/react-reconciler). diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index a252ac3f3..e8b8883a9 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -201,7 +201,7 @@ Custom Hooks offer the flexibility of sharing logic that wasn't possible in Reac Try to resist adding abstraction too early. Now that function components can do more, it's likely that the average function component in your codebase will become longer. This is normal -- don't feel like you *have to* immediately split it into Hooks. But we also encourage you to start spotting cases where a custom Hook could hide complex logic behind a simple interface, or help untangle a messy component. -For example, maybe you have a complex component that contains a lot of local state that is managed in an ad-hoc way. `useState` doesn't make centralizing the update logic any easier so might you prefer to write it as a [Redux](https://redux.js.org/) reducer: +For example, maybe you have a complex component that contains a lot of local state that is managed in an ad-hoc way. `useState` doesn't make centralizing the update logic any easier so you might prefer to write it as a [Redux](https://redux.js.org/) reducer: ```js function todosReducer(state, action) { diff --git a/content/docs/hooks-faq.md b/content/docs/hooks-faq.md index 168eb2da6..422073a90 100644 --- a/content/docs/hooks-faq.md +++ b/content/docs/hooks-faq.md @@ -694,7 +694,7 @@ function Counter() { In more complex cases (such as if one state depends on another state), try moving the state update logic outside the effect with the [`useReducer` Hook](/docs/hooks-reference.html#usereducer). [This article](https://adamrackis.dev/state-and-use-reducer/) offers an example of how you can do this. **The identity of the `dispatch` function from `useReducer` is always stable** — even if the reducer function is declared inside the component and reads its props. -As a last resort, if you want to something like `this` in a class, you can [use a ref](/docs/hooks-faq.html#is-there-something-like-instance-variables) to hold a mutable variable. Then you can write and read to it. For example: +As a last resort, if you want something like `this` in a class, you can [use a ref](/docs/hooks-faq.html#is-there-something-like-instance-variables) to hold a mutable variable. Then you can write and read to it. For example: ```js{2-6,10-11,16} function Example(props) { @@ -844,9 +844,9 @@ Traditionally, performance concerns around inline functions in React have been r }, [a, b]); ``` -* The [`useMemo` Hook](/docs/hooks-faq.html#how-to-memoize-calculations) makes it easier to control when individual children update, reducing the need for pure components. +* The [`useMemo`](/docs/hooks-faq.html#how-to-memoize-calculations) Hook makes it easier to control when individual children update, reducing the need for pure components. -* Finally, the `useReducer` Hook reduces the need to pass callbacks deeply, as explained below. +* Finally, the [`useReducer`](/docs/hooks-reference.html#usereducer) Hook reduces the need to pass callbacks deeply, as explained below. ### How to avoid passing callbacks down? {#how-to-avoid-passing-callbacks-down} diff --git a/content/docs/hooks-intro.md b/content/docs/hooks-intro.md index 12f59825e..9998492f1 100644 --- a/content/docs/hooks-intro.md +++ b/content/docs/hooks-intro.md @@ -78,7 +78,7 @@ Hook를 사용하면 컴포넌트로부터 상태 관련 로직을 추상화할 Class가 코드의 재사용성과 코드 구성을 좀 더 어렵게 만들 뿐만 아니라, React를 배우는데 큰 진입장벽이라는 것을 알게 되었습니다. Javascript에서 어떻게 `this`가 작동하는지 알아야만 했고, 대부분의 다른 언어와는 다르게 작동합니다. 이벤트 핸들러가 등록되는 방법을 기억해야만 합니다. 불안정한 [문법 제안들](https://babeljs.io/docs/en/babel-plugin-transform-class-properties/)이 없다면, 코드는 매우 장황해집니다. 사람들은 props, state, 그리고 top-down 데이터 흐름을 완벽하게 이해할 수 있지만, 여전히 Class는 쉽지 않습니다. React 안에서의 함수와 Class 컴포넌트들을 구별하고 각 요소를 언제 사용하는지는 숙련된 React 개발자 사이에서도 의견이 일치하지 않습니다. -게다가, React는 5년 동안 지속하여 왔으며, 우리는 5년 뒤에도 이 관련성이 유지되기를 원합니다. 특별하게 템플릿에 제한을 두지 않는다면, [Svelte](https://svelte.technology/), [Angular](https://angular.io/), [Glimmer](https://glimmerjs.com/), [사전 컴파일 컴포넌트](https://en.wikipedia.org/wiki/Ahead-of-time_compilation)는 잠재적인 능력을 가지고 있습니다. 최근 [Prepack](https://prepack.io/)를 사용한 [컴포넌트 folding](https://github.com/facebook/react/issues/7323)에 대해서 실험해왔고, 긍정적인 결과를 보았습니다. 그러나, Class 컴포넌트가 이러한 최적화를 더 느린 경로로 되돌리는 의도하지 않은 패턴을 장려할 수 있다는 것을 발견했다. Class는 최근 사용되는 도구에도 많은 문제를 일으킵니다. 예를 들어 Class는 잘 축소되지 않고, 핫 리로딩을 깨지기 쉽고 신뢰할 수 없게 만듭니다. 우리는 코드가 최적화 가능한 경로에서 유지될 가능성이 더 높은 API를 제공하고 싶습니다. +게다가, React는 5년 동안 지속하여 왔으며, 우리는 5년 뒤에도 이 관련성이 유지되기를 원합니다. 특별하게 템플릿에 제한을 두지 않는다면, [Svelte](https://svelte.dev/), [Angular](https://angular.io/), [Glimmer](https://glimmerjs.com/), [사전 컴파일 컴포넌트](https://en.wikipedia.org/wiki/Ahead-of-time_compilation)는 잠재적인 능력을 가지고 있습니다. 최근 [Prepack](https://prepack.io/)를 사용한 [컴포넌트 folding](https://github.com/facebook/react/issues/7323)에 대해서 실험해왔고, 긍정적인 결과를 보았습니다. 그러나, Class 컴포넌트가 이러한 최적화를 더 느린 경로로 되돌리는 의도하지 않은 패턴을 장려할 수 있다는 것을 발견했다. Class는 최근 사용되는 도구에도 많은 문제를 일으킵니다. 예를 들어 Class는 잘 축소되지 않고, 핫 리로딩을 깨지기 쉽고 신뢰할 수 없게 만듭니다. 우리는 코드가 최적화 가능한 경로에서 유지될 가능성이 더 높은 API를 제공하고 싶습니다. 이러한 문제를 해결하기 위해, **Hook는 Class없이 React 기능들을 사용하는 방법을 알려줍니다.** 개념적으로 React 컴포넌트는 항상 함수에 더 가깝습니다. Hook는 React의 정신을 희생하지 않고 함수를 받아들입니다. Hook는 명령형 코드로 해결책을 찾을 수 있게 해주며 복잡한 함수형 또는 반응형 프로그래밍 기술을 배우도록 요구하지 않습니다. diff --git a/content/docs/optimizing-performance.md b/content/docs/optimizing-performance.md index 959332976..fb2aa9dc9 100644 --- a/content/docs/optimizing-performance.md +++ b/content/docs/optimizing-performance.md @@ -153,7 +153,7 @@ new webpack.DefinePlugin({ new webpack.optimize.UglifyJsPlugin() ``` -You can learn more about this in [webpack documentation](https://webpack.js.org/guides/production-build/). +You can learn more about this in [webpack documentation](https://webpack.js.org/guides/production/). Remember that you only need to do this for production builds. You shouldn't apply `UglifyJsPlugin` or `DefinePlugin` with `'production'` value in development because they will hide useful React warnings, and make the builds much slower. diff --git a/content/docs/reference-javascript-environment-requirements.md b/content/docs/reference-javascript-environment-requirements.md index 3f60e481a..83dfd8395 100644 --- a/content/docs/reference-javascript-environment-requirements.md +++ b/content/docs/reference-javascript-environment-requirements.md @@ -11,8 +11,8 @@ React 16 버전은 컬렉션 자료형인 [Map](https://developer.mozilla.org/e 다음은 오래된 브라우저 지원을 위해 core-js 폴리필을 적용한 환경에서 React 16 버전을 사용하는 예시입니다. ```js -import 'core-js/es6/map'; -import 'core-js/es6/set'; +import 'core-js/es/map'; +import 'core-js/es/set'; import React from 'react'; import ReactDOM from 'react-dom'; diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md index 1c69ae99f..191381cab 100644 --- a/content/tutorial/tutorial.md +++ b/content/tutorial/tutorial.md @@ -523,7 +523,7 @@ Note how in `handleClick`, we call `.slice()` to create a copy of the `squares` ### Why Immutability Is Important {#why-immutability-is-important} -In the previous code example, we suggested that you use the `.slice()` operator to create a copy of the `squares` array to modify instead of modifying the existing array. We'll now discuss immutability and why immutability is important to learn. +In the previous code example, we suggested that you use the `.slice()` method to create a copy of the `squares` array to modify instead of modifying the existing array. We'll now discuss immutability and why immutability is important to learn. There are generally two approaches to changing data. The first approach is to *mutate* the data by directly changing the data's values. The second approach is to replace the data with a new copy which has the desired changes.