From 52bd6d9ed1d786608f9f2f12db7d3e166ac04403 Mon Sep 17 00:00:00 2001 From: Rachel Nabors Date: Tue, 26 Oct 2021 23:59:51 +0100 Subject: [PATCH] Adding descriptions to all the guide pages --- src/pages/learn/add-react-to-a-website.md | 1 + src/pages/learn/adding-interactivity.md | 1 + src/pages/learn/choosing-the-state-structure.md | 1 + src/pages/learn/conditional-rendering.md | 1 + src/pages/learn/describing-the-ui.md | 1 + src/pages/learn/editor-setup.md | 1 + src/pages/learn/escape-hatches.md | 1 + src/pages/learn/extracting-state-logic-into-a-reducer.md | 1 + src/pages/learn/importing-and-exporting-components.md | 1 + src/pages/learn/index.md | 1 + src/pages/learn/installation.md | 1 + src/pages/learn/javascript-in-jsx-with-curly-braces.md | 1 + src/pages/learn/keeping-components-pure.md | 1 + src/pages/learn/managing-state.md | 1 + src/pages/learn/manipulating-the-dom-with-refs.md | 1 + src/pages/learn/passing-data-deeply-with-context.md | 1 + src/pages/learn/passing-props-to-a-component.md | 1 + src/pages/learn/preserving-and-resetting-state.md | 1 + src/pages/learn/queueing-a-series-of-state-updates.md | 1 + src/pages/learn/react-developer-tools.md | 1 + src/pages/learn/reacting-to-input-with-state.md | 1 + src/pages/learn/referencing-values-with-refs.md | 1 + src/pages/learn/render-and-commit.md | 1 + src/pages/learn/rendering-lists.md | 1 + src/pages/learn/responding-to-events.md | 1 + src/pages/learn/scaling-up-with-reducer-and-context.md | 1 + src/pages/learn/sharing-state-between-components.md | 1 + src/pages/learn/start-a-new-react-project.md | 1 + src/pages/learn/state-a-components-memory.md | 1 + src/pages/learn/state-as-a-snapshot.md | 1 + src/pages/learn/updating-arrays-in-state.md | 1 + src/pages/learn/updating-objects-in-state.md | 1 + src/pages/learn/writing-markup-with-jsx.md | 1 + src/pages/learn/your-first-component.md | 1 + 34 files changed, 34 insertions(+) diff --git a/src/pages/learn/add-react-to-a-website.md b/src/pages/learn/add-react-to-a-website.md index 18da6d843..72b1ac895 100644 --- a/src/pages/learn/add-react-to-a-website.md +++ b/src/pages/learn/add-react-to-a-website.md @@ -1,5 +1,6 @@ --- title: Add React to a Website +description: "How to add interactive React components to an HTML page with just a few lines of code—and no build tooling!" --- diff --git a/src/pages/learn/adding-interactivity.md b/src/pages/learn/adding-interactivity.md index d010fcc43..3441c22e1 100644 --- a/src/pages/learn/adding-interactivity.md +++ b/src/pages/learn/adding-interactivity.md @@ -1,5 +1,6 @@ --- title: Adding Interactivity +description: "How to use React's useState() Hook to make interfaces interactive." --- diff --git a/src/pages/learn/choosing-the-state-structure.md b/src/pages/learn/choosing-the-state-structure.md index d0f3d1d99..1040733e1 100644 --- a/src/pages/learn/choosing-the-state-structure.md +++ b/src/pages/learn/choosing-the-state-structure.md @@ -1,5 +1,6 @@ --- title: Choosing the State Structure +description: "Some guidelines for structuring your state among components." --- diff --git a/src/pages/learn/conditional-rendering.md b/src/pages/learn/conditional-rendering.md index 1641865cd..dae65c862 100644 --- a/src/pages/learn/conditional-rendering.md +++ b/src/pages/learn/conditional-rendering.md @@ -1,5 +1,6 @@ --- title: Conditional Rendering +description: "You can use plain JavaScript to conditionally render JSX inside React components." --- diff --git a/src/pages/learn/describing-the-ui.md b/src/pages/learn/describing-the-ui.md index c53707a23..42f6e9840 100644 --- a/src/pages/learn/describing-the-ui.md +++ b/src/pages/learn/describing-the-ui.md @@ -1,5 +1,6 @@ --- title: Describing the UI +description: "React describes user interfaces from web sites to phone apps with reusable, nestable components." --- diff --git a/src/pages/learn/editor-setup.md b/src/pages/learn/editor-setup.md index 8f90eef11..a93947f70 100644 --- a/src/pages/learn/editor-setup.md +++ b/src/pages/learn/editor-setup.md @@ -1,5 +1,6 @@ --- title: Editor Setup +description: "How to install and configure a code editor for writing React code." --- diff --git a/src/pages/learn/escape-hatches.md b/src/pages/learn/escape-hatches.md index 66a500271..79ce98564 100644 --- a/src/pages/learn/escape-hatches.md +++ b/src/pages/learn/escape-hatches.md @@ -1,5 +1,6 @@ --- title: Escape Hatches +description: "Coming soon!" --- This chapter is incomplete and is still being written! diff --git a/src/pages/learn/extracting-state-logic-into-a-reducer.md b/src/pages/learn/extracting-state-logic-into-a-reducer.md index 919c6b472..b03372a83 100644 --- a/src/pages/learn/extracting-state-logic-into-a-reducer.md +++ b/src/pages/learn/extracting-state-logic-into-a-reducer.md @@ -1,5 +1,6 @@ --- title: Extracting State Logic into a Reducer +description: "A reducer function lets you consolidate many state updates from many event handlers into one place." --- diff --git a/src/pages/learn/importing-and-exporting-components.md b/src/pages/learn/importing-and-exporting-components.md index c364354c5..2bd1743ec 100644 --- a/src/pages/learn/importing-and-exporting-components.md +++ b/src/pages/learn/importing-and-exporting-components.md @@ -1,5 +1,6 @@ --- title: Importing and Exporting Components +description: "Modular React components often get spread across multiple files. To nest them, you'll need to import and export your components." --- diff --git a/src/pages/learn/index.md b/src/pages/learn/index.md index 17a32a139..a59558ac8 100644 --- a/src/pages/learn/index.md +++ b/src/pages/learn/index.md @@ -1,5 +1,6 @@ --- title: Quick Start +description: "A succinct overview of React to get an idea of how the library works." --- diff --git a/src/pages/learn/installation.md b/src/pages/learn/installation.md index 18570cb12..b8e4dfd8d 100644 --- a/src/pages/learn/installation.md +++ b/src/pages/learn/installation.md @@ -1,5 +1,6 @@ --- title: Installation +description: "Get started setting up React and your developer environment." --- diff --git a/src/pages/learn/javascript-in-jsx-with-curly-braces.md b/src/pages/learn/javascript-in-jsx-with-curly-braces.md index 1e8c837df..f1623bcc5 100644 --- a/src/pages/learn/javascript-in-jsx-with-curly-braces.md +++ b/src/pages/learn/javascript-in-jsx-with-curly-braces.md @@ -1,5 +1,6 @@ --- title: JavaScript in JSX with Curly Braces +description: "Use curly braces inside your JSX to 'open a window' to JavaScript." --- diff --git a/src/pages/learn/keeping-components-pure.md b/src/pages/learn/keeping-components-pure.md index 0f6524750..843308939 100644 --- a/src/pages/learn/keeping-components-pure.md +++ b/src/pages/learn/keeping-components-pure.md @@ -1,5 +1,6 @@ --- title: Keeping Components Pure +description: "Pure functions perform calculations without mutating any data. Keeping components pure will eliminate a class of bugs and behaviors from your React app." --- diff --git a/src/pages/learn/managing-state.md b/src/pages/learn/managing-state.md index 1b9ff52b0..bf25fc00f 100644 --- a/src/pages/learn/managing-state.md +++ b/src/pages/learn/managing-state.md @@ -1,5 +1,6 @@ --- title: Managing State +description: "Learn how to structure and share state between components." --- diff --git a/src/pages/learn/manipulating-the-dom-with-refs.md b/src/pages/learn/manipulating-the-dom-with-refs.md index 844051349..7875f1089 100644 --- a/src/pages/learn/manipulating-the-dom-with-refs.md +++ b/src/pages/learn/manipulating-the-dom-with-refs.md @@ -1,5 +1,6 @@ --- title: 'Manipulating the DOM with Refs' +description: "Sometimes you need to access DOM elements managed by React. Refs can help you access a DOM node outside React." --- diff --git a/src/pages/learn/passing-data-deeply-with-context.md b/src/pages/learn/passing-data-deeply-with-context.md index f3ed5dd0f..62d2a634e 100644 --- a/src/pages/learn/passing-data-deeply-with-context.md +++ b/src/pages/learn/passing-data-deeply-with-context.md @@ -1,5 +1,6 @@ --- title: Passing Data Deeply with Context +description: "Rather than passing props down the component tree, you can make data available to any component in a parent's component tree." --- diff --git a/src/pages/learn/passing-props-to-a-component.md b/src/pages/learn/passing-props-to-a-component.md index 4b459f9c3..0ffb2a90b 100644 --- a/src/pages/learn/passing-props-to-a-component.md +++ b/src/pages/learn/passing-props-to-a-component.md @@ -1,5 +1,6 @@ --- title: Passing Props to a Component +description: "Parent components pass information to child components by giving them props." --- diff --git a/src/pages/learn/preserving-and-resetting-state.md b/src/pages/learn/preserving-and-resetting-state.md index 220b6adff..829480a55 100644 --- a/src/pages/learn/preserving-and-resetting-state.md +++ b/src/pages/learn/preserving-and-resetting-state.md @@ -1,5 +1,6 @@ --- title: Preserving and Resetting State +description: "Understand how React keeps track of what state belongs with which components so you can deliberately preserve and reset state between renders." --- diff --git a/src/pages/learn/queueing-a-series-of-state-updates.md b/src/pages/learn/queueing-a-series-of-state-updates.md index 93cfa6838..978bdbe88 100644 --- a/src/pages/learn/queueing-a-series-of-state-updates.md +++ b/src/pages/learn/queueing-a-series-of-state-updates.md @@ -1,5 +1,6 @@ --- title: Queueing a Series of State Updates +description: "Because React batches state updates, you can pass a function to your state setting function to perform multiple operations on a state value before queuing the next render." --- diff --git a/src/pages/learn/react-developer-tools.md b/src/pages/learn/react-developer-tools.md index 366605485..ae8e8248b 100644 --- a/src/pages/learn/react-developer-tools.md +++ b/src/pages/learn/react-developer-tools.md @@ -1,5 +1,6 @@ --- title: React Developer Tools +description: "Install React DevTools in your browser to inspect and debug React components." --- diff --git a/src/pages/learn/reacting-to-input-with-state.md b/src/pages/learn/reacting-to-input-with-state.md index 545568d1a..00d66cb90 100644 --- a/src/pages/learn/reacting-to-input-with-state.md +++ b/src/pages/learn/reacting-to-input-with-state.md @@ -1,5 +1,6 @@ --- title: Reacting to Input with State +description: "Use state to describe the different states your component can be in according to different user inputs." --- diff --git a/src/pages/learn/referencing-values-with-refs.md b/src/pages/learn/referencing-values-with-refs.md index e6cad55d6..adf437545 100644 --- a/src/pages/learn/referencing-values-with-refs.md +++ b/src/pages/learn/referencing-values-with-refs.md @@ -1,5 +1,6 @@ --- title: 'Referencing Values with Refs' +description: "Use refs to store data between renders without triggering a render." --- diff --git a/src/pages/learn/render-and-commit.md b/src/pages/learn/render-and-commit.md index 7107158dd..88a698494 100644 --- a/src/pages/learn/render-and-commit.md +++ b/src/pages/learn/render-and-commit.md @@ -1,5 +1,6 @@ --- title: Render and Commit +description: "Understanding React's render and commit cycle is key to understanding how your component goes from JSX to the screen." --- diff --git a/src/pages/learn/rendering-lists.md b/src/pages/learn/rendering-lists.md index da9cc0b3b..4959516a5 100644 --- a/src/pages/learn/rendering-lists.md +++ b/src/pages/learn/rendering-lists.md @@ -1,5 +1,6 @@ --- title: Rendering Lists +description: "Use JavaScript to render lists and collections of React components from arrays of data." --- diff --git a/src/pages/learn/responding-to-events.md b/src/pages/learn/responding-to-events.md index 0c75cf259..862175e51 100644 --- a/src/pages/learn/responding-to-events.md +++ b/src/pages/learn/responding-to-events.md @@ -1,5 +1,6 @@ --- title: Responding to Events +description: "Event handlers are your own functions that will be triggered in response to user interactions like clicking, hovering, focusing on form inputs, and so on." --- diff --git a/src/pages/learn/scaling-up-with-reducer-and-context.md b/src/pages/learn/scaling-up-with-reducer-and-context.md index 9dea592f1..3d53cf4f2 100644 --- a/src/pages/learn/scaling-up-with-reducer-and-context.md +++ b/src/pages/learn/scaling-up-with-reducer-and-context.md @@ -1,5 +1,6 @@ --- title: Scaling Up with Reducer and Context +description: "Combine reducers and context together to manage state of a complex screen." --- diff --git a/src/pages/learn/sharing-state-between-components.md b/src/pages/learn/sharing-state-between-components.md index 9267ec726..74e3b1d20 100644 --- a/src/pages/learn/sharing-state-between-components.md +++ b/src/pages/learn/sharing-state-between-components.md @@ -1,5 +1,6 @@ --- title: Sharing State Between Components +description: "When multiple components need access to state, "lift the state up" by moving the it to the nearest common parent." --- diff --git a/src/pages/learn/start-a-new-react-project.md b/src/pages/learn/start-a-new-react-project.md index dfff124ba..b3eaed117 100644 --- a/src/pages/learn/start-a-new-react-project.md +++ b/src/pages/learn/start-a-new-react-project.md @@ -1,5 +1,6 @@ --- title: Start a New React Project +description: "Get started with a new React project using a framework or a toolchain." --- diff --git a/src/pages/learn/state-a-components-memory.md b/src/pages/learn/state-a-components-memory.md index d0ee608e4..4f4fe4b22 100644 --- a/src/pages/learn/state-a-components-memory.md +++ b/src/pages/learn/state-a-components-memory.md @@ -1,5 +1,6 @@ --- title: "State: A Component's Memory" +description: "State is a piece of information a component 'remembers' between renders." --- diff --git a/src/pages/learn/state-as-a-snapshot.md b/src/pages/learn/state-as-a-snapshot.md index b21bf3a23..f46e2ef6a 100644 --- a/src/pages/learn/state-as-a-snapshot.md +++ b/src/pages/learn/state-as-a-snapshot.md @@ -1,5 +1,6 @@ --- title: State as a Snapshot +description: "State variables are like a snapshot in time. Setting them triggers React to re-render the component." --- diff --git a/src/pages/learn/updating-arrays-in-state.md b/src/pages/learn/updating-arrays-in-state.md index 429a17d81..89c4d1f61 100644 --- a/src/pages/learn/updating-arrays-in-state.md +++ b/src/pages/learn/updating-arrays-in-state.md @@ -1,5 +1,6 @@ --- title: Updating Arrays in State +description: "How to keep components pure by handling arrays used for state as though they are immutable." --- diff --git a/src/pages/learn/updating-objects-in-state.md b/src/pages/learn/updating-objects-in-state.md index b0f4e2422..028c7544b 100644 --- a/src/pages/learn/updating-objects-in-state.md +++ b/src/pages/learn/updating-objects-in-state.md @@ -1,5 +1,6 @@ --- title: Updating Objects in State +description: "How to keep components pure by handling state objects as though they were immutable." --- diff --git a/src/pages/learn/writing-markup-with-jsx.md b/src/pages/learn/writing-markup-with-jsx.md index 0458579cc..d462774fd 100644 --- a/src/pages/learn/writing-markup-with-jsx.md +++ b/src/pages/learn/writing-markup-with-jsx.md @@ -1,5 +1,6 @@ --- title: Writing Markup with JSX +description: "JSX is a syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file." --- diff --git a/src/pages/learn/your-first-component.md b/src/pages/learn/your-first-component.md index 19b92f6a1..9a66ebe20 100644 --- a/src/pages/learn/your-first-component.md +++ b/src/pages/learn/your-first-component.md @@ -1,5 +1,6 @@ --- title: Your First Component +description: "Write your first React component." ---