React to this
☝️ Who generated that heading?
That heading came from a wrapper layout. If you check out this page's source (react-page), you'll notice some frontmatter applied between those
---
blocks:
- title:
- The title we'll apply as the page heading and the browser tab title. You'll see this applied using
{`React to this`}in the layout file described below 👇 - layout:
- The name of the layout file to apply. In this case,
layout: layouttranslates to_includes/layout.njksince 11ty looks in the _includes folder by default.
You'll notice this page is wrapped in a layout. This pulls in a few parameters using 11ty's data cascade:
-
titleuses the "title" attribute from our page's front matter. -
content | saferenders our page.
To create the page you see here, we placed areact-page.jsx file alongside the other pages on our site. That's because component pages are like any other template on your 11ty site, just with 1 extra superpower:you can hydrate the page with JavaScript.
Hydrating this page
We opted-in to shipping JavaScript using the hydrate key in ourfrontMatter. Learn more onour partial hydration docs.
Tip: try setting hydrate to "none", or removing the key entirely. The counter below should stop working! This is because we're no longer sending our component to the client, effectively turning React into just another templating language.
Count: 0
Front matter
Our included frontMatter wires up the layout and passes information "upstream" for other templates to read from. It works the same way for component-based pages as it does for11ty's front matter. Here, the title key is accessible from any layout templates applied to our page.