React - Static Markup

> (World Wide) Web - (W3|WWW) > Javascript (Js|ECMAScript) > React

1 - About

This page is about the creation of page with static markup (ie without server-rendered markup).

The page then doesn't need to be hydrated

This is same output than the server-rendered markup (the ToString function) but without any react attribute.

3 - Example

To generate static markup, the function ReactDOMServer.renderToStaticMarkup(element) is used.

  • The definition of Welcome tag
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
const myPage = <Welcome name="Nico" />;
const staticMarkup  = ReactDOMServer.renderToStaticMarkup(myPage);
  • The output has no react attribute (clean) (and cannot be hydrated).
console.log(staticMarkup);
  • Output:

Advertising