Skip to content
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

Sync with reactjs.org @ 6dcb9634 #88

Merged
merged 12 commits into from
Sep 28, 2019
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
22 changes: 2 additions & 20 deletions content/docs/code-splitting.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<div>
<OtherComponent />
</div>
);
}
```

**After:**

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

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

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'));
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: 1 addition & 1 deletion content/docs/hooks-reference.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
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
---

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.
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 @@ -59,4 +59,4 @@ customElements.define('x-search', XSearch);
>Hinweis:
>
>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.
>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.