Skip to content

Sync with reactjs.org @ d2ade76c #260

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 19 commits into from
Oct 27, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion content/blog/2018-11-27-react-16-roadmap.md
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,7 @@ function App() {
// provide Suspense integrations with similar APIs.
```

There is no official documentation for how to fetch data with Suspense yet, but you can find some early information in [this talk](https://youtu.be/ByBPyMBTzM0?t=1312) and [this small demo](https://github.com/facebook/react/tree/master/fixtures/unstable-async/suspense). We'll write documentation for React Cache (and how to write your own Suspense-compatible library) closer to this React release, but if you're curious, you can find its very early source code [here](https://github.com/facebook/react/blob/master/packages/react-cache/src/ReactCache.js).
There is no official documentation for how to fetch data with Suspense yet, but you can find some early information in [this talk](https://youtu.be/ByBPyMBTzM0?t=1312) and [this small demo](https://github.com/facebook/react/blob/master/packages/react-devtools/CHANGELOG.md#suspense-toggle). We'll write documentation for React Cache (and how to write your own Suspense-compatible library) closer to this React release, but if you're curious, you can find its very early source code [here](https://github.com/facebook/react/blob/master/packages/react-cache/src/ReactCache.js).

The low-level Suspense mechanism (suspending rendering and showing a fallback) is expected to be stable even in React 16.6. We've used it for code splitting in production for months. However, the higher-level APIs for data fetching are very unstable. React Cache is rapidly changing, and will change at least a few more times. There are some low-level APIs that are [missing](https://github.com/reactjs/rfcs/pull/89) for a good higher-level API to be possible. We don't recommend using React Cache anywhere except very early experiments. Note that React Cache itself isn't strictly tied to React releases, but the current alphas lack basic features as cache invalidation, and you'll run into a wall very soon. We expect to have something usable with this React release.

Expand Down
1 change: 1 addition & 0 deletions content/community/articles.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,3 +16,4 @@ permalink: community/articles.html
- [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 />`.
- [Thinking in React Hooks](https://wattenberger.com/blog/react-hooks) - Amelia Wattenberger's provides visualizations and highlighting the mindset change needed switching from classes to functional components + hooks.
- [React/Redux Links](https://github.com/markerikson/react-redux-links) - Curated tutorial and resource links by Mark Erikson collected on React, Redux, ES6, and more. Very helpful for all kind of developers because of it's categorised content.
20 changes: 15 additions & 5 deletions content/community/conferences.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,11 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c

## Upcoming Conferences {#upcoming-conferences}

### React Summit 2019 {#reactsummit2019}
November 30, 2019 in Lagos, Nigeria

[Website](https://reactsummit2019.splashthat.com) -[Twitter](https://twitter.com/react_summit)

### React Conf 2019 {#react-conf-2019}
October 24-25, 2019 in Henderson, Nevada USA

Expand All @@ -37,6 +42,11 @@ February 27 & 28, 2020 in Sydney, Australia

[Website](https://reactconfau.com/) - [Twitter](https://twitter.com/reactconfau) - [Facebook](https://www.facebook.com/reactconfau) - [Instagram](https://www.instagram.com/reactconfau/)

### React Summit Amsterdam 2020 {#react-summit-2020}
April 15-17, 2020 in Amsterdam, The Netherlands

[Website](https://reactsummit.com) - [Twitter](https://twitter.com/reactamsterdam) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://youtube.com/c/ReactConferences)

### Render-Atlanta 2020 {#render-atlanta-2020}
May 4-6, 2020. Atlanta, GA, USA.

Expand Down Expand Up @@ -85,12 +95,12 @@ November 2-4 in Bratislava, Slovakia
### React.js Conf 2016 {#reactjs-conf-2016}
February 22 & 23 in San Francisco, CA

[Website](http://conf.reactjs.com/) - [Schedule](http://conf.reactjs.com/schedule.html) - [Videos](https://www.youtube.com/playlist?list=PLb0IAmt7-GS0M8Q95RIc2lOM6nc77q1IY)
[Website](http://conf2016.reactjs.org/) - [Schedule](http://conf2016.reactjs.org/schedule.html) - [Videos](https://www.youtube.com/playlist?list=PLb0IAmt7-GS0M8Q95RIc2lOM6nc77q1IY)

### React Amsterdam 2016 {#react-amsterdam-2016}
April 16 in Amsterdam, The Netherlands

[Website](https://react.amsterdam) - [Twitter](https://twitter.com/reactamsterdam) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://youtube.com/c/ReactConferences)
[Website](https://reactsummit.com) - [Twitter](https://twitter.com/reactamsterdam) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://youtube.com/c/ReactConferences)

### ReactEurope 2016 {#reacteurope-2016}
June 2 & 3 in Paris, France
Expand Down Expand Up @@ -140,7 +150,7 @@ March 28th at the [QEII Centre, London](http://qeiicentre.london/)
### React Amsterdam 2017 {#react-amsterdam-2017}
April 21st in Amsterdam, The Netherlands

[Website](https://react.amsterdam) - [Twitter](https://twitter.com/reactamsterdam) - [Videos](https://youtube.com/c/ReactConferences)
[Website](https://reactsummit.com) - [Twitter](https://twitter.com/reactamsterdam) - [Videos](https://youtube.com/c/ReactConferences)

### ReactEurope 2017 {#reacteurope-2017}
May 18th & 19th in Paris, France
Expand Down Expand Up @@ -245,7 +255,7 @@ March 31 in Kiev, Ukraine
### React Amsterdam 2018 {#react-amsterdam-2018}
April 13 in Amsterdam, The Netherlands

[Website](https://react.amsterdam) - [Twitter](https://twitter.com/reactamsterdam) - [Facebook](https://www.facebook.com/reactamsterdam)
[Website](https://reactsummit.com) - [Twitter](https://twitter.com/reactamsterdam) - [Facebook](https://www.facebook.com/reactamsterdam)

### React Finland 2018 {#react-finland-2018}
April 24-26 in Helsinki, Finland
Expand Down Expand Up @@ -350,7 +360,7 @@ April 4-5, 2019 in Kraków, Poland
### React Amsterdam 2019 {#react-amsterdam-2019}
April 12, 2019 in Amsterdam, The Netherlands

[Website](https://react.amsterdam) - [Twitter](https://twitter.com/reactamsterdam) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://youtube.com/c/ReactConferences)
[Website](https://reactsummit.com) - [Twitter](https://twitter.com/reactamsterdam) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://youtube.com/c/ReactConferences)

### React Finland 2019 {#react-finland-2019}
April 24-26 in Helsinki, Finland
Expand Down
3 changes: 3 additions & 0 deletions content/community/meetups.md
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet

## Philippines {#philippines}
* [Manila](https://www.meetup.com/reactjs-developers-manila/)
* [Manila - ReactJS PH](https://www.meetup.com/ReactJS-Philippines/)

## Poland {#poland}
* [Warsaw](https://www.meetup.com/React-js-Warsaw/)
Expand Down Expand Up @@ -130,6 +131,8 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
* [Austin, TX - ReactJS](https://www.meetup.com/ReactJS-Austin-Meetup/)
* [Boston, MA - ReactJS](https://www.meetup.com/ReactJS-Boston/)
* [Boston, MA - React Native](https://www.meetup.com/Boston-React-Native-Meetup/)
* [Charlotte, NC - ReactJS](https://www.meetup.com/ReactJS-Charlotte/)
* [Charlotte, NC - React Native](https://www.meetup.com/cltreactnative/)
* [Chicago, IL - ReactJS](https://www.meetup.com/React-Chicago/)
* [Columbus, OH - ReactJS](https://www.meetup.com/ReactJS-Columbus-meetup/)
* [Dallas, TX - ReactJS](https://www.meetup.com/ReactDallas/)
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 @@ -82,3 +82,4 @@ permalink: community/ui-components.html
* **[KendoReact](https://www.telerik.com/kendo-react-ui/)**: UI for React Developers.
* **[Mobiscroll React UI Components](https://mobiscroll.com/react)** Mobile UI Controls for the Productive React Developer.
* **[React UI Toolkit](https://react-ui-tools.com/)**: 115+ professionally maintainted UI components ranging from a robust grid to charts and more. Try for FREE and build React apps faster.
* **[Flatlogic React Admin Templates](https://flatlogic.com/templates/react)** 5+ Paid and Free React Admin templates with a lot of components to speed up web development. No jQuery.
42 changes: 42 additions & 0 deletions content/docs/hooks-reference.md
Original file line number Diff line number Diff line change
Expand Up @@ -197,6 +197,48 @@ const value = useContext(MyContext);
>
> `useContext(MyContext)` は現在のコンテクストの値を**読み取り**、その変化を購読することしかできません。コンテクストの値を**設定**するために、今後もツリーの上の階層で `<MyContext.Provider>` が必要です。

**Context.Provider と組み合わせて使用する方法**
```js{31-36}
const themes = {
light: {
foreground: "#000000",
background: "#eeeeee"
},
dark: {
foreground: "#ffffff",
background: "#222222"
}
};

const ThemeContext = React.createContext(themes.light);

function App() {
return (
<ThemeContext.Provider value={themes.dark}>
<Toolbar />
</ThemeContext.Provider>
);
}

function Toolbar(props) {
return (
<div>
<ThemedButton />
</div>
);
}

function ThemedButton() {
const theme = useContext(ThemeContext);

return (
<button style={{ background: theme.background, color: theme.foreground }}>
I am styled by theme context!
</button>
);
}
```
この例は[コンテクストのガイド](/docs/context.html)をフック用に変更したものです。コンテクストをいつどのように使うべきかについては同記事を参照してください。

## 追加のフック {#additional-hooks}

Expand Down
2 changes: 1 addition & 1 deletion content/docs/lifting-state-up.md
Original file line number Diff line number Diff line change
Expand Up @@ -324,7 +324,7 @@ state のリフトアップは双方向のバインディング (two-way binding

props もしくは state から作りだす事のできるデータについては、おそらく state に保持すべきではないでしょう。例えば、今回は `celsiusValue` と `fahrenheitValue` の両方を保存する代わりに、最後に変更された `temperature` と、その値の `scale` のみを保存しています。もう一方の入力の値は常に `render()` メソッド内で計算することができます。これにより元のユーザ入力の精度を全く損なうことなくもう一方の入力フィールドに丸めを適用したり、もう一方の入力フィールドをクリアしたりできます。

UI で何かおかしな箇所があれば、[React Developer Tools](https://github.com/facebook/react-devtools) を使用して props を調査したり state の更新について責任を持っているコンポーネントに辿り着くまでツリーをさかのぼることができます。これによりバグをその原因まで追いかけることができます。
UI で何かおかしな箇所があれば、[React Developer Tools](https://github.com/facebook/react/tree/master/packages/react-devtools) を使用して props を調査したり state の更新について責任を持っているコンポーネントに辿り着くまでツリーをさかのぼることができます。これによりバグをその原因まで追いかけることができます。

<img src="../images/docs/react-devtools-state.gif" alt="Monitoring State in React DevTools" max-width="100%" height="100%">

2 changes: 1 addition & 1 deletion content/docs/uncontrolled-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: 非制御コンポーネント
permalink: docs/uncontrolled-components.html
---

ほとんどの場合では、フォームの実装には[制御されたコンポーネント](/docs/forms.html)を使用することをお勧めしています。制御されたコンポーネントでは、フォームのデータは React コンポーネントが扱います。非制御コンポーネントはその代替となるものであり、フォームデータを DOM 自身が扱います。
ほとんどの場合では、フォームの実装には[制御されたコンポーネント](/docs/forms.html#controlled-components)を使用することをお勧めしています。制御されたコンポーネントでは、フォームのデータは React コンポーネントが扱います。非制御コンポーネントはその代替となるものであり、フォームデータを DOM 自身が扱います。

非制御コンポーネントを記述するには、各 state の更新に対してイベントハンドラを書く代わりに、[ref を使用](/docs/refs-and-the-dom.html)して DOM からフォームの値を取得します。

Expand Down
15 changes: 15 additions & 0 deletions gatsby-config.js
Original file line number Diff line number Diff line change
Expand Up @@ -160,5 +160,20 @@ module.exports = {
},
'gatsby-plugin-react-helmet',
'gatsby-plugin-catch-links',
{
resolve: `gatsby-plugin-manifest`,
options: {
name: 'React Docs',
short_name: 'React', // eg. React [%LANG_CODE%]
// Translators: please change this and two above options (see https://www.gatsbyjs.org/packages/gatsby-plugin-manifest/#feature-configuration---optional)
lang: 'en',
start_url: '/',
background_color: '#20232a',
theme_color: '#20232a',
display: 'standalone',
icon: 'static/logo-512x512.png',
legacy: true,
},
},
],
};
3 changes: 3 additions & 0 deletions src/components/LayoutFooter/Footer.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,9 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
[media.size('sidebarFixed')]: {
paddingTop: 40,
},
'@media print': {
display: 'none',
},
}}>
<Container>
<div
Expand Down
3 changes: 3 additions & 0 deletions src/components/LayoutHeader/Header.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,9 @@ const Header = ({location}: {location: Location}) => (
width: '100%',
top: 0,
left: 0,
'@media print': {
display: 'none',
},
}}>
<Container>
<div
Expand Down
5 changes: 5 additions & 0 deletions src/html.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,11 @@ export default class HTML extends React.Component {
content="width=device-width, initial-scale=1.0"
/>
<link rel="icon" href="/favicon.ico" />

<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="apple-touch-icon" href="/logo-180x180.png" />
<meta name="apple-mobile-web-app-title" content="React" />

{this.props.headComponents}
</head>
<body {...this.props.bodyAttributes}>
Expand Down
1 change: 1 addition & 0 deletions static/_redirects
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,4 @@
/tips/controlled-input-null-value.html /docs/forms.html#controlled-input-null-value
/hooks /docs/hooks-intro.html
/tutorial /tutorial/tutorial.html
/your-story https://www.surveymonkey.co.uk/r/MVQV2R9 301
Binary file added static/logo-180x180.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/logo-512x512.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.