11ty
https://snipcart.com/blog/11ty-tutorial

- install globally using `npm install -g @11ty/eleventy`
- to build it use `eleventy` and for hot reloading in dev mode use `eleventy --serve`.
 

 for integrating with  react
 https://github.com/kaicataldo/eleventy-plugin-react
 sample project :  [react.zip](../../../../_resources/react.zip)


 
 - install all thise required modules
 `npm install eleventy-plugin-react babel-loader @babel/core @babel/preset-env @babel/preset-react react react-dom core-js@3 regenerator-runtime`
- in project , in .eleventy.js configuration is like this:  the layout with .njk  and postprocess option is changed to just return html because rest part is hamdled by this layout `base.njk`.
- for custom layout for separate pages do this in `.eleventy.js`
```js
module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(eleventyReact);

  // Set custom layouts for different pages
  eleventyConfig.addPassthroughCopy("src/assets"); // Optional: For copying static assets

  // This is where you can set different layouts based on conditions
  eleventyConfig.addGlobalData("layout", (data) => {
    if (data.page.url === "/about/") {
      return "about-layout.njk"; // Use 'about-layout.njk' for the about page
    } else {
      return "base.njk"; // Default layout for all other pages
    }
  });

  return {
    dir: {
      input: "src/pages", // Input directory for pages
      output: "_site", // Output directory for generated static files
    },
  };
};

```
 
 - in gatsby for client side component
  ```js


import React, { useEffect, useState } from 'react';

const ClientOnlyComponent = () => {
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    setIsClient(true); // This sets isClient to true only on the client-side
  }, []); // The empty dependency array ensures this effect runs only once after the initial render

  if (!isClient) {
    return null; // Avoid rendering anything on the server-side
  }

  return (
    <div>
      This component is rendered on the client-side only.
    </div>
  );
};

export default ClientOnlyComponent;

```