Rendering From String

If for any reason you don't want to use JSX, you can render component from string or template tag.

Rendering from string is extremely simple. The syntax is very similar to stateless components, but instead of returning JSX your function should return a string:

const SuperHeader = ({ text }) => `
  <div>
    <h1>${text}</h1>
    <h3>It's Superpowered!</h3>
  </div>
`;

Your component function will have the props argument that you can use for interpolation (i.e. via ES6 template string).

Note that string render doesn't support state and lifecycle methods.

Last updated