From afb177769a71c6f412e953ad84e78aee153e6f8a Mon Sep 17 00:00:00 2001 From: QC-L Date: Wed, 3 Nov 2021 22:44:58 +0800 Subject: [PATCH 01/12] fix: ci lint error --- .../react-dom-properties-before-update-after.js | 4 +--- .../react-dom-properties-before-update-before.js | 4 +--- plugins/gatsby-remark-header-custom-ids/gatsby-ssr.js | 2 +- .../gatsby-transformer-home-example-code/gatsby-node.js | 1 - src/components/Banner/Banner.js | 4 +--- src/components/CodeEditor/CodeEditor.js | 4 ++-- src/pages/languages.js | 4 +--- src/pages/versions.js | 7 ++----- 8 files changed, 9 insertions(+), 21 deletions(-) diff --git a/examples/update-on-async-rendering/react-dom-properties-before-update-after.js b/examples/update-on-async-rendering/react-dom-properties-before-update-after.js index 227dc625f6..31efd62144 100644 --- a/examples/update-on-async-rendering/react-dom-properties-before-update-after.js +++ b/examples/update-on-async-rendering/react-dom-properties-before-update-after.js @@ -26,9 +26,7 @@ class ScrollingList extends React.Component { render() { return ( -
- {/* ...内容... */} -
+
{/* ...内容... */}
); } diff --git a/examples/update-on-async-rendering/react-dom-properties-before-update-before.js b/examples/update-on-async-rendering/react-dom-properties-before-update-before.js index 1f82e5356f..69206bbfc6 100644 --- a/examples/update-on-async-rendering/react-dom-properties-before-update-before.js +++ b/examples/update-on-async-rendering/react-dom-properties-before-update-before.js @@ -26,9 +26,7 @@ class ScrollingList extends React.Component { render() { return ( -
- {/* ...内容... */} -
+
{/* ...内容... */}
); } diff --git a/plugins/gatsby-remark-header-custom-ids/gatsby-ssr.js b/plugins/gatsby-remark-header-custom-ids/gatsby-ssr.js index 3df4d8c95b..6e660a5578 100644 --- a/plugins/gatsby-remark-header-custom-ids/gatsby-ssr.js +++ b/plugins/gatsby-remark-header-custom-ids/gatsby-ssr.js @@ -70,7 +70,7 @@ exports.onRenderBody = ({setHeadComponents}, pluginOptions) => { var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); - ` + `; const style = icon ? ( ``` -Manipulating the UI works well enough for isolated examples, but it gets exponentially more difficult to manage in more complex systems. Imagine updating a page full of different forms like this one. Adding a new UI element or a new interaction would require carefully checking all existing code to make sure you haven't introduced a bug (for example, forgetting to show or hide something). +Manipulating the UI imperatively works well enough for isolated examples, but it gets exponentially more difficult to manage in more complex systems. Imagine updating a page full of different forms like this one. Adding a new UI element or a new interaction would require carefully checking all existing code to make sure you haven't introduced a bug (for example, forgetting to show or hide something). React was built to solve this problem. -In React, you don't directly manipulate the UI--meaning you don't enable, disable, show, or hide components directly. Instead, you **declare what you want to show**, and React figures out how to update the UI. Think of getting into a taxi and telling the driver where you want to go instead of telling them exactly where to turn. It's the driver's job to get you there, and they might even know some shortcuts you hadn't considered! +In React, you don't directly manipulate the UI--meaning you don't enable, disable, show, or hide components directly. Instead, you **declare what you want to show**, and React figures out how to update the UI. Think of getting into a taxi and telling the driver where you want to go instead of telling them exactly where to turn. It's the driver's job to get you there, and they might even know some shortcuts you haven't considered! @@ -141,7 +151,7 @@ You've seen how to implement a form imperatively above. To better understand how ### Step 1: Identify your component's different visual states -In computer science, you may hear about a ["state machine"](https://en.wikipedia.org/wiki/Finite-state_machine) being in one of several “states”. If you work with a designer, you may have seen visual mockups for different states. Designers work with visual states all the time. React stands at the intersection of design and computer science, so both of these ideas are sources of inspiration. +In computer science, you may hear about a ["state machine"](https://en.wikipedia.org/wiki/Finite-state_machine) being in one of several “states”. If you work with a designer, you may have seen mockups for different "visual states". React stands at the intersection of design and computer science, so both of these ideas are sources of inspiration. First, you need to visualize all the different "states" of the UI the user might see: @@ -156,58 +166,68 @@ Just like a designer, you'll want to "mock up" or create "mocks" for the differe ```js -export default function FeedbackForm({ +export default function Form({ status = 'empty' }) { if (status === 'success') { - return

Thank you!

+ return

That's right!

} return ( -
-