title: Create an extensible architecture with React
body: <p>My team is creating the administration panel of a CMS using React, Typescript, TSX and Webpack. Each page of the administration panel has been created as a React component, and each page contains many other child components (one for each section).</p>
  
  <p><a href="https://i.stack.imgur.com/WFx1N.png" rel="noreferrer"><img src="https://i.stack.imgur.com/WFx1N.png" alt="enter image description here"></a></p>
  
  <p>The CMS distribution currently includes a bundled version of the javascript needed to run the web app, but not the original TSX files.</p>
  
  <p>Now, we would like to make it possible to the developers using our CMS to extend the web app by </p>
  
  <p>1) <em>Injecting</em> additional sections into the UI using a "slot-fill" approach</p>
  
  <p>2) Possibly even <em>overriding</em> the existing sections rendering a different component in the same place.</p>
  
  <pre><code>&lt;div&gt;
    &lt;SidebarComponent /&gt;
    &lt;Section1Component /&gt;
    &lt;Section2Component /&gt;
    // How to inject a  possible PluginComponent here?
  &lt;/div&gt;
  </code></pre>
  
  <p>From the research we've conducted so far, there seem to be no "official" way to do this, so I'm wondering what would be the best approach in this case.</p>