Page contents

{
  "data": {
    "requestId": "1439cae649ae681862209e7f6cef928e",
    "results": [
      {
        "id": "https://react.dev/learn",
        "title": "Quick Start – React",
        "url": "https://react.dev/learn",
        "author": null,
        "text": "Welcome to the React documentation! This page will give you an introduction to 80% of the React concepts that you will use on a daily basis.\n\n- How to create and nest components\n- How to add markup and styles\n- How to display data\n- How to render conditions and lists\n- How to respond to events and update the screen\n- How to share data between components\n\n## Creating and nesting components {/ components/}\n\nReact apps are made out of components. A component is a piece of the UI (user interface) that has its own logic and appearance. A component can be as small as a button, or as large as an entire page.\n\nReact components are JavaScript functions that return markup:\n\n```js\nfunction MyButton() {\n  return (\n    <button>I'm a button</button>\n  );\n}\n\n```\n\nNow that you've declared `MyButton`, you can nest it into another component:\n\n```js\nexport default function MyApp() {\n  return (\n    <div>\n      <h1>Welcome to my app</h1>\n      <MyButton />\n    </div>\n  );\n}\n\n```\n\nNotice that `` starts with a capital letter. That's how you know it's a React component. React component names must always start with a capital letter, while HTML tags must be lowercase.\n\nHave a look at the result:\n\n```js\nfunction MyButton() {\n  return (\n    <button>\n      I'm a button\n    </button>\n  );\n}\n\nexport default function MyApp() {\n  return (\n    <div>\n      <h1>Welcome to my app</h1>\n      <MyButton />\n    </div>\n  );\n}\n\n```\n\nThe `export default` keywords specify the main component in the file. If you're not familiar with some piece of JavaScript syntax, MDN and javascript.info have great references.\n\n## Writing markup with JSX {/ writing-markup-with-jsx/}\n\nThe markup syntax you've seen above is called JSX. It is optional, but most React projects use JSX for its convenience. All of the tools we recommend for local development support JSX out of the box.\n\nJSX is stricter than HTML. You have to close tags like ` `. Your component also can't return multiple JSX tags. You have to wrap them into a shared p… [truncated for committed sample]",
        "image": "https://react.dev/images/og/learn.png",
        "favicon": "https://react.dev/favicon-32x32.png"
      }
    ],
    "statuses": [
      {
        "id": "https://react.dev/learn",
        "status": "success",
        "source": "cached"
      }
    ],
    "costDollars": {
      "total": 0.001,
      "contents": {
        "text": 0.001
      }
    },
    "searchTime": 8.39295500004664
  },
  "h402": {
    "routeId": "web/contents",
    "provider": "exa",
    "selectedCandidateId": "web/contents/exa",
    "routing": "manual",
    "paidBy": "x402-exact"
  }
}