Use React as a templating engine

This topic was raised way back in the past by @vbulant. At that point of time we found some disadvantages to switch to React as a templating engine choice. When thinking of it now, I cannot come with a single disadvantage at the first glance.

What

Use React as a templating engine.

Why

React === JavaScript. This brings variables, loops, inheritance, extendibility, flexibility and much more out of the box.
React template === React component. Template is the component without (or with minimal) logic built in. This makes converting from static HTML to React SPA/PWA incredibly more simple.
Increases team understanding of React. Writing templates in React gives you an overview what this library is about without demanding to understand more than you should (advanced lifecycle hooks, props propagation, store management). You can still to advanced things if needed.
Saves from constant tweaks/adjustments of any existing templating engine. Each custom templating engine uses its own syntax, features and therefore has differences. They are meant to be plain and simple, which often makes us write custom tweaks (macros, functions, etc.) to ease our work. JavaScript, on the other hand, was designed to bear functional logic, and it wouldn't even be a problem if something is missing.
JavaScript is more familiar. Lets be honest, we all use JavaScript to a certain extent. Everybody knows the basic rules and syntax of powerful JS. This is something you cannot say about custom templating engines, as you need to spend additional time to read the docs, get used to syntax, still writing markup in try-and-error approach. I believe JavaScript is much better in this case.
Reusability. Each template is a component, therefore you can use it in other templates without any difficulty. You can even reuse templates in fully functional React components just by importing them. This is a good pattern since templates represent dumb or presentational components in this case.

How does it look?

Simple template

const Button = ({ children, className }) => (
    <button className={className}>{children}</button>
);

Template with additional logic

const Button = ({ children, className }) => {
    const classes = [className, defaultClassName];

    return (
        <button className={classes}>{children}</button>
    );
};

/* Hey, {defaultProps} are quite handy! */
Button.defaultProps = {
    defaultClassName: 'btn'
};

Template reusing another template

import { Button } from '../templates';

const MyPanel = ({ title }) => (
    <div className="my-panel">
        <h3>{title}</h3>
        <Button className="primary">Refresh</Button>
    </div>
);

How does it work?

There are a few plugins to generate HTML from React, but I think the best approach will be to use native ReactDOM.renderToStaticMarkup() method:

import ReactDOM from 'react-dom';
import { Button } from '../templates';

ReactDOM.renderToStaticMarkup(Button); // <-- returns rendered static HTML

Integrate it into the pipeline should not be a problem either.

What this suggestion is not

This is not a suggestion to integrate React in general into devstack, and it does not force to use React in JavaScript as components (even though it lets you do so). You may still combine static HTML (generated from React templates) and vanillaJS for logic.

What still needs to be resolved

Proper folder structure
Possibility to create boilerplate (Image, Link, Button, etc. components)

Please provide your feedback on this topic and participate in the discussion. Thank you.

actum / gulp-dev-stack