Best way to change React render structure

Question

I allow to request your opinion. In fact, I think of a way to change the structure of a react component (The DOM). For example, I have a component Page1 . Normaly, we have this:

import React from "react";

class Page1 extends React.Component
{
    ...
    render()
    {
        return (
            /*Here JSX DOM*/
        );
    }
}

For change the DOM of this page (according a template), I think this:

import React from "react";

class Page1 extends React.Component
{
    ...
    render()
    {
        return Template.get("page1", this.props);
    }

}

The get method of Template class return the JSX DOM according the template define in config:

{
    template: "base"
}

The Template class:

import {template} from "config" // Name of a template

class Template
{
    static get(componentName, props)
    {
        var templatePath = path.join("templates", template);
        return require(templatePath)[componentName](props);
    }
}

In templates folder, we can have this structure:

templates
    |
    |____base
    |       |
    |       |__index.js
    |       |
    |       |__pag1.tpl.jsx
    |
    |____other
            |
            |__index.js
            |
            |__page1.tpl.jsx

And the page1.tpl.jsx to base template look like this:

import React from "react";

export default function(props) {
   return (
      <div>Hello World !!!</div>
   );
}

I 'm interested in you opinion.

Answer 1

In my opinion react components should be as modular as possible, so they will be like an template.

So, your idea is good, but you should use react components as templates instead of normal es6 classes.

React components can check the (required) properties automatically be defining propTypes . Additionally, the syntax will be change from

return Template.get("page1", this.props);

to

return <Page1 {...this.props} />;

Wich, in my opinion, is easier to read.