From df883a8e30c715668f355afc5c20352d1795dd30 Mon Sep 17 00:00:00 2001 From: Sophie Alpert Date: Mon, 9 Sep 2019 12:05:05 -0700 Subject: [PATCH 01/11] Revert "Remove React Week 2020 from conferences list" This reverts commit e08553debb7b703544912511677230826ff5de6c per discussion on https://github.com/reactjs/reactjs.org/pull/2249. --- content/community/conferences.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/content/community/conferences.md b/content/community/conferences.md index 068dae73d..c1ecfb654 100644 --- a/content/community/conferences.md +++ b/content/community/conferences.md @@ -92,6 +92,11 @@ 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} From fb8fdb8f6ad5c1e11c4552481e4d2b5f5de0186b Mon Sep 17 00:00:00 2001 From: Rootul Patel Date: Mon, 9 Sep 2019 20:31:10 -0400 Subject: [PATCH 02/11] Improve grammar (#2331) Remove extraneous "as" --- content/docs/hooks-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index 75bd998d3..bf43fdebb 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -165,7 +165,7 @@ Now the subscription will only be recreated when `props.source` changes. > >If you want to run an effect and clean it up only once (on mount and unmount), you can pass an empty array (`[]`) as a second argument. This tells React that your effect doesn't depend on *any* values from props or state, so it never needs to re-run. This isn't handled as a special case -- it follows directly from how the dependencies array always works. > ->If you pass an empty array (`[]`), the props and state as inside the effect will always have their initial values. While passing `[]` as the second argument is closer to the familiar `componentDidMount` and `componentWillUnmount` mental model, there are usually [better](/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies) [solutions](/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often) to avoid re-running effects too often. Also, don't forget that React defers running `useEffect` until after the browser has painted, so doing extra work is less of a problem. +>If you pass an empty array (`[]`), the props and state inside the effect will always have their initial values. While passing `[]` as the second argument is closer to the familiar `componentDidMount` and `componentWillUnmount` mental model, there are usually [better](/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies) [solutions](/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often) to avoid re-running effects too often. Also, don't forget that React defers running `useEffect` until after the browser has painted, so doing extra work is less of a problem. > > >We recommend using the [`exhaustive-deps`](https://github.com/facebook/react/issues/14920) rule as part of our [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks#installation) package. It warns when dependencies are specified incorrectly and suggests a fix. From 8cf11dc3e94b58e5e462277e09ba155330769951 Mon Sep 17 00:00:00 2001 From: "Adro.codes" Date: Tue, 10 Sep 2019 10:46:44 +1000 Subject: [PATCH 03/11] Update web-components.md (#2333) Updated custom-elements-es5-adapter link. Pointed to a repo that has moved. --- content/docs/web-components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/web-components.md b/content/docs/web-components.md index cbfcc80e1..1c5dcd278 100644 --- a/content/docs/web-components.md +++ b/content/docs/web-components.md @@ -59,4 +59,4 @@ customElements.define('x-search', XSearch); >Note: > >This code **will not** work if you transform classes with Babel. See [this issue](https://github.com/w3c/webcomponents/issues/587) for the discussion. ->Include the [custom-elements-es5-adapter](https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs) before you load your web components to fix this issue. +>Include the [custom-elements-es5-adapter](https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs#custom-elements-es5-adapterjs) before you load your web components to fix this issue. From 89777595788f445186ed0a0db48ea6384be862b8 Mon Sep 17 00:00:00 2001 From: Adam Date: Tue, 10 Sep 2019 15:35:07 -0400 Subject: [PATCH 04/11] Docs: Community Articles: React Profiler Article by Adam (#2336) --- content/community/articles.md | 1 + 1 file changed, 1 insertion(+) diff --git a/content/community/articles.md b/content/community/articles.md index 806bec5fa..3558dde34 100644 --- a/content/community/articles.md +++ b/content/community/articles.md @@ -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 ``. From ec0cf5cf2cba77254b4f3e0a28503a3fc747cbea Mon Sep 17 00:00:00 2001 From: Jacob Bandes-Storch Date: Tue, 10 Sep 2019 17:28:27 -0700 Subject: [PATCH 05/11] Update CodeSplitting to clarify that lazy() must be used with Suspense (#2306) * Update CodeSplitting to clarify that lazy() must be used with Suspense * Update code-splitting.md --- content/docs/code-splitting.md | 22 ++-------------------- 1 file changed, 2 insertions(+), 20 deletions(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index d2e5b17ff..c049fc498 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -124,37 +124,19 @@ The `React.lazy` function lets you render a dynamic import as a regular componen ```js import OtherComponent from './OtherComponent'; - -function MyComponent() { - return ( -
- -
- ); -} ``` **After:** ```js const OtherComponent = React.lazy(() => import('./OtherComponent')); - -function MyComponent() { - return ( -
- -
- ); -} ``` -This will automatically load the bundle containing the `OtherComponent` when this component gets rendered. +This will automatically load the bundle containing the `OtherComponent` when this component is first rendered. `React.lazy` takes a function that must call a dynamic `import()`. This must return a `Promise` which resolves to a module with a `default` export containing a React component. -### Suspense {#suspense} - -If the module containing the `OtherComponent` is not yet loaded by the time `MyComponent` renders, we must show some fallback content while we're waiting for it to load - such as a loading indicator. This is done using the `Suspense` component. +The lazy component should then be rendered inside a `Suspense` component, which allows us to show some fallback content (such as a loading indicator) while we're waiting for the lazy component to load. ```js const OtherComponent = React.lazy(() => import('./OtherComponent')); From 1f2b1dae946112173b808e0fd5951ed70fc4c505 Mon Sep 17 00:00:00 2001 From: Sergei Cherniaev Date: Wed, 11 Sep 2019 23:08:25 +0300 Subject: [PATCH 06/11] Docs: a typo and bottom nav links (#2339) * typo fixed * bottom nav links on previous and next articles removed like in other advanced guides --- content/docs/static-type-checking.md | 2 -- content/docs/testing-recipes.md | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md index 94358802b..ed35a9503 100644 --- a/content/docs/static-type-checking.md +++ b/content/docs/static-type-checking.md @@ -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 --- Static type checkers like [Flow](https://flow.org/) and [TypeScript](https://www.typescriptlang.org/) identify certain types of problems before you even run your code. They can also improve developer workflow by adding features like auto-completion. For this reason, we recommend using Flow or TypeScript instead of `PropTypes` for larger code bases. diff --git a/content/docs/testing-recipes.md b/content/docs/testing-recipes.md index dd7efa5b4..0ce5e205f 100644 --- a/content/docs/testing-recipes.md +++ b/content/docs/testing-recipes.md @@ -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: From 2efb26ee475211db2632dfd3526badf7ae8b0696 Mon Sep 17 00:00:00 2001 From: Cool4ZBL Date: Fri, 13 Sep 2019 00:26:19 +0800 Subject: [PATCH 07/11] Update hooks-faq.md (#2340) Add missing `{` --- content/docs/hooks-faq.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-faq.md b/content/docs/hooks-faq.md index 851d136df..0869e4234 100644 --- a/content/docs/hooks-faq.md +++ b/content/docs/hooks-faq.md @@ -655,7 +655,7 @@ function ProductPage({ productId }) { return ; } -function ProductDetails({ fetchProduct }) +function ProductDetails({ fetchProduct }) { useEffect(() => { fetchProduct(); }, [fetchProduct]); // ✅ All useEffect dependencies are specified From 97be0f3787ac381472d3dd4dca498edece4cb18a Mon Sep 17 00:00:00 2001 From: Milad Heydari Date: Thu, 12 Sep 2019 21:07:02 +0430 Subject: [PATCH 08/11] Add React Conf Iran 2019 to Past Conferences (#2343) added react conf iran 2019 to the past conferences list. --- content/community/conferences.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/content/community/conferences.md b/content/community/conferences.md index c1ecfb654..4b1b0aaf4 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 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. @@ -100,6 +95,11 @@ July 17, 2020. New York City, USA. ## Past Conferences {#past-conferences} +### 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 From c1b690be07f7d33b5dd47ccb82d361e565343faf Mon Sep 17 00:00:00 2001 From: Alex Krolick Date: Sat, 14 Sep 2019 18:08:38 -0700 Subject: [PATCH 09/11] move past conferences out of upcoming section --- content/community/conferences.md | 50 ++++++++++++++++---------------- 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/content/community/conferences.md b/content/community/conferences.md index 4b1b0aaf4..8f5bc9ca4 100644 --- a/content/community/conferences.md +++ b/content/community/conferences.md @@ -12,31 +12,6 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c ## Upcoming Conferences {#upcoming-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 Boston 2019 {#react-boston-2019} September 21-22, 2019 in Boston, Massachusetts USA @@ -95,6 +70,31 @@ July 17, 2020. New York City, USA. ## 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. From 6dcb963479953586f462ce31fddf35158c0598a0 Mon Sep 17 00:00:00 2001 From: Haz Date: Mon, 16 Sep 2019 04:28:36 -0400 Subject: [PATCH 10/11] Add Reakit to tools-ui-components (#2346) --- content/community/tools-ui-components.md | 1 + 1 file changed, 1 insertion(+) diff --git a/content/community/tools-ui-components.md b/content/community/tools-ui-components.md index a0535c829..5799712a7 100644 --- a/content/community/tools-ui-components.md +++ b/content/community/tools-ui-components.md @@ -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. From dfc3ee7bb66e1966fe9fd18f68bc98c9dc8c5de7 Mon Sep 17 00:00:00 2001 From: Phil Date: Sat, 28 Sep 2019 16:53:17 +0200 Subject: [PATCH 11/11] Update web-components.md --- content/docs/web-components.md | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/content/docs/web-components.md b/content/docs/web-components.md index dfca89db6..9e2d70c5b 100644 --- a/content/docs/web-components.md +++ b/content/docs/web-components.md @@ -58,10 +58,5 @@ customElements.define('x-search', XSearch); >Hinweis: > -<<<<<<< HEAD >Dieser Code **wird nicht** funktionieren, wenn du Klassen mit Babel umwandelst. Erfahre mehr [zur Problematik](https://github.com/w3c/webcomponents/issues/587) in dieser Diskussion. ->Um dieses Problem zu beseitigen, füge bevor deine Web Component lädt den [custom-elements-es5-adapter](https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs) hinzu. -======= ->This code **will not** work if you transform classes with Babel. See [this issue](https://github.com/w3c/webcomponents/issues/587) for the discussion. ->Include the [custom-elements-es5-adapter](https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs#custom-elements-es5-adapterjs) before you load your web components to fix this issue. ->>>>>>> 6dcb963479953586f462ce31fddf35158c0598a0 +>Um dieses Problem zu beseitigen, füge bevor deine Web Component lädt den [custom-elements-es5-adapter](https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs#custom-elements-es5-adapterjs) hinzu.