From 2d664c178afc655a6ed15e316c6a0c41bd7bec30 Mon Sep 17 00:00:00 2001 From: Tajammul Pasha Date: Sat, 18 May 2019 10:23:35 +0530 Subject: [PATCH 1/9] fixed svelte-js broken link (#2010) --- content/docs/hooks-intro.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-intro.md b/content/docs/hooks-intro.md index 9470d614d..96254ec81 100644 --- a/content/docs/hooks-intro.md +++ b/content/docs/hooks-intro.md @@ -81,7 +81,7 @@ We'll discuss this more in [Using the Effect Hook](/docs/hooks-effect.html#tip-u In addition to making code reuse and code organization more difficult, we've found that classes can be a large barrier to learning React. You have to understand how `this` works in JavaScript, which is very different from how it works in most languages. You have to remember to bind the event handlers. Without unstable [syntax proposals](https://babeljs.io/docs/en/babel-plugin-transform-class-properties/), the code is very verbose. People can understand props, state, and top-down data flow perfectly well but still struggle with classes. The distinction between function and class components in React and when to use each one leads to disagreements even between experienced React developers. -Additionally, React has been out for about five years, and we want to make sure it stays relevant in the next five years. As [Svelte](https://svelte.technology/), [Angular](https://angular.io/), [Glimmer](https://glimmerjs.com/), and others show, [ahead-of-time compilation](https://en.wikipedia.org/wiki/Ahead-of-time_compilation) of components has a lot of future potential. Especially if it's not limited to templates. Recently, we've been experimenting with [component folding](https://github.com/facebook/react/issues/7323) using [Prepack](https://prepack.io/), and we've seen promising early results. However, we found that class components can encourage unintentional patterns that make these optimizations fall back to a slower path. Classes present issues for today's tools, too. For example, classes don't minify very well, and they make hot reloading flaky and unreliable. We want to present an API that makes it more likely for code to stay on the optimizable path. +Additionally, React has been out for about five years, and we want to make sure it stays relevant in the next five years. As [Svelte](https://svelte.dev/), [Angular](https://angular.io/), [Glimmer](https://glimmerjs.com/), and others show, [ahead-of-time compilation](https://en.wikipedia.org/wiki/Ahead-of-time_compilation) of components has a lot of future potential. Especially if it's not limited to templates. Recently, we've been experimenting with [component folding](https://github.com/facebook/react/issues/7323) using [Prepack](https://prepack.io/), and we've seen promising early results. However, we found that class components can encourage unintentional patterns that make these optimizations fall back to a slower path. Classes present issues for today's tools, too. For example, classes don't minify very well, and they make hot reloading flaky and unreliable. We want to present an API that makes it more likely for code to stay on the optimizable path. To solve these problems, **Hooks let you use more of React's features without classes.** Conceptually, React components have always been closer to functions. Hooks embrace functions, but without sacrificing the practical spirit of React. Hooks provide access to imperative escape hatches and don't require you to learn complex functional or reactive programming techniques. From 10e375dacb5bb74a10083195d22c9fa3d4c16061 Mon Sep 17 00:00:00 2001 From: Cloudspider <2496739+chris-visser@users.noreply.github.com> Date: Sat, 18 May 2019 13:21:01 +0200 Subject: [PATCH 2/9] Add React Live, The Netherlands (#2006) Takes place 13th of September --- content/community/conferences.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/content/community/conferences.md b/content/community/conferences.md index ea8bed22d..e421f45ba 100644 --- a/content/community/conferences.md +++ b/content/community/conferences.md @@ -57,6 +57,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 From b3d4fe5efb3e74026e4f75d63774adb328cbee7a Mon Sep 17 00:00:00 2001 From: Misha Moroshko Date: Sat, 18 May 2019 04:22:01 -0700 Subject: [PATCH 3/9] Keep hook links consistent (#1323) --- content/docs/hooks-faq.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/hooks-faq.md b/content/docs/hooks-faq.md index 168eb2da6..a7583966c 100644 --- a/content/docs/hooks-faq.md +++ b/content/docs/hooks-faq.md @@ -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} From 8e6343b5a6992aa0dc9d5efa6d7d2a78a2d85b2f Mon Sep 17 00:00:00 2001 From: Matthew Date: Sat, 18 May 2019 21:24:51 +1000 Subject: [PATCH 4/9] Fix broken webpack production guide link in "Optimizing Performance" page. (#2011) --- content/docs/optimizing-performance.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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. From e12c973cf14578b21ce5326a63b1abeee913c967 Mon Sep 17 00:00:00 2001 From: Niklas Mollenhauer Date: Sat, 18 May 2019 13:27:44 +0200 Subject: [PATCH 5/9] Update core-js includes (#2007) The path seem to have changed in the latest `core-js` package. https://github.com/zloirock/core-js/tree/master/packages/core-js --- content/docs/reference-javascript-environment-requirements.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/reference-javascript-environment-requirements.md b/content/docs/reference-javascript-environment-requirements.md index 44a36eb9d..1eff4e81f 100644 --- a/content/docs/reference-javascript-environment-requirements.md +++ b/content/docs/reference-javascript-environment-requirements.md @@ -11,8 +11,8 @@ React 16 depends on the collection types [Map](https://developer.mozilla.org/en- A polyfilled environment for React 16 using core-js to support older browsers might look like: ```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'; From d05c83b7abc02c01e97fe9f30e6e5a1412ba722a Mon Sep 17 00:00:00 2001 From: Benjamin Dunphy Date: Sun, 19 May 2019 01:59:47 -0700 Subject: [PATCH 6/9] Add Real World React to meetups.md (#2012) Add Real World React (San Francisco) meetup group --- content/community/meetups.md | 1 + 1 file changed, 1 insertion(+) 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/) From d3d7d55750038737559f7d24e835a3ac750fe04a Mon Sep 17 00:00:00 2001 From: Carston Henderson Date: Mon, 20 May 2019 02:23:10 -0600 Subject: [PATCH 7/9] Change 'operator' to 'method' (#2016) I believe `.slice()` is an array prototype method, rather than an operator. --- content/tutorial/tutorial.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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. From 7b217c701075b1af7ddabd6a237ed847df98853c Mon Sep 17 00:00:00 2001 From: adam klein Date: Mon, 20 May 2019 16:42:29 +0300 Subject: [PATCH 8/9] Add ReactNext 2019 (#2019) --- content/community/conferences.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/content/community/conferences.md b/content/community/conferences.md index e421f45ba..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 From c07074561887d80d790b8e898b0a91b1d1329e9c Mon Sep 17 00:00:00 2001 From: Linh Le Date: Mon, 20 May 2019 23:23:03 -0400 Subject: [PATCH 9/9] resolve conflict --- content/docs/hooks-intro.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/content/docs/hooks-intro.md b/content/docs/hooks-intro.md index 89a65b11c..1fde6eb22 100644 --- a/content/docs/hooks-intro.md +++ b/content/docs/hooks-intro.md @@ -81,11 +81,7 @@ Chúng tôi sẽ thảo luận thêm tại [Sử dụng Hook hiệu quả](/docs Không chỉ làm cho việc sử dụng lại và tổ chức code khó hơn, chúng tôi thấy rằng classes là rào cản lớn để học React. Bạn phải hiểu cách `this` hoạt động trong Javascript, cái mà rất khác về cách hoạt động trong đa số các ngôn ngữ khác. Bạn phải nhớ bind các event handlers. Nếu không sử dụng [cú pháp đề xuất](https://babeljs.io/docs/en/babel-plugin-transform-class-properties/), code sẽ rất dài dòng. Mọi người có thể hiểu props, state, và luồng dữ liệu từ trên xuống tốt nhưng vẫn vật lộn với classes. Sự khác biết giữa hàm và class components trong React và khi nào sử dụng chúng dẫn đến sự bất đồng kể cả những người phát triển React có kinh nghiệm. -<<<<<<< HEAD -Hơn nữa, React đã ra mắt được khoảng 5 năm, và chúng tôi muốn đảm bảo nó vẫn liên quan trong 5 năm tới. [Svelte](https://svelte.technology/), [Angular](https://angular.io/), [Glimmer](https://glimmerjs.com/), và nhiều chỗ khác chỉ ra, [ahead-of-time compilation](https://en.wikipedia.org/wiki/Ahead-of-time_compilation) của các components có rất nhiều tiềm năng tương lai. Đặc biệt nếu nó không giới hạn các mẫu. Gần đây chúng tôi đã thử nghiệm [component folding](https://github.com/facebook/react/issues/7323) sử dụng [Prepack](https://prepack.io/), và chúng tôi đã thấy nhiều kết quả hứa hẹn. Chúng tôi thấy rằng class components có thể khuyến khích các patterns không chủ ý nhưng làm cho các tối ưu chậm hơn. Classes cũng xuất nhiện nhiều vấn đề cho các công cụ hôm nay. Ví dụ class không giảm dung lượng tốt, và chúng làm cho hot reloading flaky và không tin cậy. Chúng tôi muốn giới thiệu một API mà vẫn tối ưu được. -======= -Additionally, React has been out for about five years, and we want to make sure it stays relevant in the next five years. As [Svelte](https://svelte.dev/), [Angular](https://angular.io/), [Glimmer](https://glimmerjs.com/), and others show, [ahead-of-time compilation](https://en.wikipedia.org/wiki/Ahead-of-time_compilation) of components has a lot of future potential. Especially if it's not limited to templates. Recently, we've been experimenting with [component folding](https://github.com/facebook/react/issues/7323) using [Prepack](https://prepack.io/), and we've seen promising early results. However, we found that class components can encourage unintentional patterns that make these optimizations fall back to a slower path. Classes present issues for today's tools, too. For example, classes don't minify very well, and they make hot reloading flaky and unreliable. We want to present an API that makes it more likely for code to stay on the optimizable path. ->>>>>>> 7b217c701075b1af7ddabd6a237ed847df98853c +Hơn nữa, React đã ra mắt được khoảng 5 năm, và chúng tôi muốn đảm bảo nó vẫn liên quan trong 5 năm tới. [Svelte](https://svelte.dev/), [Angular](https://angular.io/), [Glimmer](https://glimmerjs.com/), và nhiều chỗ khác chỉ ra, [ahead-of-time compilation](https://en.wikipedia.org/wiki/Ahead-of-time_compilation) của các components có rất nhiều tiềm năng tương lai. Đặc biệt nếu nó không giới hạn các mẫu. Gần đây chúng tôi đã thử nghiệm [component folding](https://github.com/facebook/react/issues/7323) sử dụng [Prepack](https://prepack.io/), và chúng tôi đã thấy nhiều kết quả hứa hẹn. Chúng tôi thấy rằng class components có thể khuyến khích các patterns không chủ ý nhưng làm cho các tối ưu chậm hơn. Classes cũng xuất nhiện nhiều vấn đề cho các công cụ hôm nay. Ví dụ class không giảm dung lượng tốt, và chúng làm cho hot reloading flaky và không tin cậy. Chúng tôi muốn giới thiệu một API mà vẫn tối ưu được. Để xử lý các vấn đề, **Hooks cho phép bạn sử dụng nhiều tính năng của React mà không cần classes.** Về mặt khái niệm, React components luôn luôn gần như các hàm. Hooks áp dụng functions, nhưng không phải hi sinh tinh thần thực hành của React. Hooks cung cấp truy cập đến escape hatches nguyên thuỷ và không yêu cầu bạn phải học các kĩ thuật functional hoặc reactive programming.