Get started with react-faux-dom CDN


import React from 'react';
import { renderToString, findByTestId } from 'react-dom/server';
import { StaticRenderer } from 'react-faux-dom';

class MyComponent extends React.Component {
  render() {
    return (
      <div data-testid="my-component">
        <h1>Hello, World!</h1>
      </div>
    );
  }
}

const App = () => {
  return (
    <StaticRenderer
      html={(ReactDOMServer) => renderToString(<MyComponent />)}
      head={<title>Get started with react-faux-dom CDN - cdnhub.io</title>}
    >
      <MyComponent />
    </StaticRenderer>
  );
};

export default App;

// Server-side rendering
const serverRender = async () => {
  const App = require('./App').default; // Import your component

  const html = await new Promise((resolve) => {
    const container = document.createElement('div');
    const root = ReactDOM.createRoot(container);
    root.render(<App />);

    const appHtml = renderToString(<App />);
    const initialMarkup = ReactDOMServer.renderToString(<App />);

    const { getHTML: getServerHTML } = require('react-dom/server');
    const serverAppHtml = getServerHTML(<App />);

    const finalMarkup = `
      <!DOCTYPE html>
      <html>
        <head>
          <meta charSet="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <title>Get started with react-faux-dom CDN - cdnhub.io</title>
          <style id="jss-server-side">${serverAppHtml.styles.css.toString()}</style>
        </head>
        <body>
          <div id="root">${initialMarkup}</div>
          <script src="https://cdn.cdnhub.io/react-faux-dom/4.5.0/ReactFauxDOM.min.js"></script>
          <script>
            window.preloadScript = async () => {
              const container = document.createElement('div');
              document.body.appendChild(container);
              const root = ReactDOM.createRoot(container);
              root.render(React.createElement(App.default, {}));
              document.body.removeChild(container);
            };
            window.preloadScript();
          </script>
          <script id="jss-client" dangerouslySetInnerHTML={{ __html: serverAppHtml.scripts[0].toString() }}></script>
          <script id="jss-client-hydrate" dangerouslySetInnerHTML={{ __html: appHtml }}></script>
        </body>
      </html>
    `;

    resolve(finalMarkup);
  });

  console.log(html);
};

serverRender().then((html) => console.log(html));
Get started with react-faux-dom CDN

Stable version

How to start using react-faux-dom CDN

All versions
