diff --git a/beta/public/images/docs/diagrams/sharing_data_child.dark.svg b/beta/public/images/docs/diagrams/sharing_data_child.dark.svg new file mode 100644 index 000000000..c743da735 --- /dev/null +++ b/beta/public/images/docs/diagrams/sharing_data_child.dark.svg @@ -0,0 +1,60 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/beta/public/images/docs/diagrams/sharing_data_child.svg b/beta/public/images/docs/diagrams/sharing_data_child.svg new file mode 100644 index 000000000..961cbae9d --- /dev/null +++ b/beta/public/images/docs/diagrams/sharing_data_child.svg @@ -0,0 +1,60 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/beta/public/images/docs/diagrams/sharing_data_child_clicked.dark.svg b/beta/public/images/docs/diagrams/sharing_data_child_clicked.dark.svg new file mode 100644 index 000000000..ad15105f3 --- /dev/null +++ b/beta/public/images/docs/diagrams/sharing_data_child_clicked.dark.svg @@ -0,0 +1,64 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/beta/public/images/docs/diagrams/sharing_data_child_clicked.svg b/beta/public/images/docs/diagrams/sharing_data_child_clicked.svg new file mode 100644 index 000000000..28f8fcc7e --- /dev/null +++ b/beta/public/images/docs/diagrams/sharing_data_child_clicked.svg @@ -0,0 +1,64 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/beta/public/images/docs/diagrams/sharing_data_parent.dark.svg b/beta/public/images/docs/diagrams/sharing_data_parent.dark.svg new file mode 100644 index 000000000..866ac760a --- /dev/null +++ b/beta/public/images/docs/diagrams/sharing_data_parent.dark.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/beta/public/images/docs/diagrams/sharing_data_parent.svg b/beta/public/images/docs/diagrams/sharing_data_parent.svg new file mode 100644 index 000000000..580de7992 --- /dev/null +++ b/beta/public/images/docs/diagrams/sharing_data_parent.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/beta/public/images/docs/diagrams/sharing_data_parent_clicked.dark.svg b/beta/public/images/docs/diagrams/sharing_data_parent_clicked.dark.svg new file mode 100644 index 000000000..52adaa14d --- /dev/null +++ b/beta/public/images/docs/diagrams/sharing_data_parent_clicked.dark.svg @@ -0,0 +1,75 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/beta/public/images/docs/diagrams/sharing_data_parent_clicked.svg b/beta/public/images/docs/diagrams/sharing_data_parent_clicked.svg new file mode 100644 index 000000000..804f6c140 --- /dev/null +++ b/beta/public/images/docs/diagrams/sharing_data_parent_clicked.svg @@ -0,0 +1,75 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/beta/src/components/MDX/Diagram.tsx b/beta/src/components/MDX/Diagram.tsx new file mode 100644 index 000000000..ed5a1bc7a --- /dev/null +++ b/beta/src/components/MDX/Diagram.tsx @@ -0,0 +1,42 @@ +/* + * Copyright (c) Facebook, Inc. and its affiliates. + */ + +import * as React from 'react'; +import Image from 'next/image'; + +interface DiagramProps { + name: string; + alt: string; + height: number; + width: number; + children: string; +} + +export function Diagram({name, alt, height, width, children}: DiagramProps) { + return ( +
+
+ {alt} +
+
+ {alt} +
+
+ {children} +
+
+ ); +} + +export default Diagram; diff --git a/beta/src/components/MDX/DiagramGroup.tsx b/beta/src/components/MDX/DiagramGroup.tsx new file mode 100644 index 000000000..005b076d2 --- /dev/null +++ b/beta/src/components/MDX/DiagramGroup.tsx @@ -0,0 +1,20 @@ +/* + * Copyright (c) Facebook, Inc. and its affiliates. + */ + +import * as React from 'react'; +import {ReactNode} from 'react'; + +interface DiagramGroupProps { + children: ReactNode; +} + +export function DiagramGroup({children}: DiagramGroupProps) { + return ( +
+ {children} +
+ ); +} + +export default DiagramGroup; diff --git a/beta/src/components/MDX/MDXComponents.tsx b/beta/src/components/MDX/MDXComponents.tsx index 351263e88..4defe25c9 100644 --- a/beta/src/components/MDX/MDXComponents.tsx +++ b/beta/src/components/MDX/MDXComponents.tsx @@ -19,6 +19,8 @@ import Link from './Link'; import {PackageImport} from './PackageImport'; import Recap from './Recap'; import Sandpack from './Sandpack'; +import Diagram from './Diagram'; +import DiagramGroup from './DiagramGroup'; import SimpleCallout from './SimpleCallout'; import TerminalBlock from './TerminalBlock'; import YouWillLearnCard from './YouWillLearnCard'; @@ -369,6 +371,8 @@ export const MDXComponents = { title: string; excerpt: string; }) => , + Diagram, + DiagramGroup, Gotcha, HomepageHero, Illustration, diff --git a/beta/src/pages/learn/index.md b/beta/src/pages/learn/index.md index 22757bf9b..d85ad22e2 100644 --- a/beta/src/pages/learn/index.md +++ b/beta/src/pages/learn/index.md @@ -364,7 +364,6 @@ export default function MyApp() {

Counters that update separately

- ); } @@ -389,27 +388,47 @@ Hooks are more restrictive than regular functions. You can only call Hooks *at t ## Sharing data between components {/*sharing-data-between-components*/} -In the previous example, each button had its own independent counter: +In the previous example, each `MyButton` had its own independent `count`, and when each button was clicked, only the `count` for the button clicked changed: -```js {2-4} -- MyApp - - MyButton (count: 3) - - MyButton (count: 1) - - MyButton (count: 2) -``` + -However, you'll often need components to *share data and always update together*. + -To make all buttons display the same `count` and update together, you need to move the state from the individual buttons "upwards" to the closest component containing all of them. In this example, it is `MyApp`: +Before clicking, each MyButton has a count value set to zero. -```js {1} -- MyApp (count: 3) - - MyButton - - MyButton - - MyButton -``` + -Here's how you can express this in code. + + +After clicking, only one MyButton count value has updated. + + + + + +However, often you'll need components to *share data and always update together*. + +To make both `MyButton` components display the same `count` and update together, you need to move the state from the individual buttons "upwards" to the closest component containing all of them. + +In this example, it is `MyApp`: + + + + + +Before clicking, count is stored in MyApp and passed down to both children as props. + + + + + +After clicking, count updates in MyApp and the new value is passed to both children as props. + + + + + +Now when you click either button, the `count` in `MyApp` will change, which will change both of the counts in `MyButton`. Here's how you can express this in code. First, *move the state up* from `MyButton` into `MyApp`: @@ -430,7 +449,6 @@ export default function MyApp() {

Counters that update separately

- ); } @@ -438,7 +456,7 @@ export default function MyApp() { Then, *pass the state down* from `MyApp` to each `MyButton`, together with the shared click handler. You can pass information to `MyButton` using the JSX curly braces, just like you previously did with built-in tags like ``: -```js {11-13} +```js {11-12} export default function MyApp() { const [count, setCount] = useState(0); @@ -451,7 +469,6 @@ export default function MyApp() {

Counters that update together

- ); } @@ -500,7 +517,6 @@ export default function MyApp() {

Counters that update together

- ); } diff --git a/beta/src/styles/index.css b/beta/src/styles/index.css index 7572e4380..f7a34d561 100644 --- a/beta/src/styles/index.css +++ b/beta/src/styles/index.css @@ -54,6 +54,22 @@ color-scheme: dark; } + html .dark-image { + display: none; + } + + html .light-image { + display: block; + } + + html.dark .dark-image { + display: block; + } + + html.dark .light-image { + display: none; + } + html, body { height: 100%;