I developed games using unity3d and unrealengine, and this time I developed the web for the first time. I am going to use react, javascript, material-ui, and styled-component with visual studio code and sourcetree for git.

The site I need to develop has a similar basic structure, but I need to create several sites with slightly different detailed functions.

For example, when running for domain aaa.com, component comp is from the file 'src/aaa/compPerTarget/comp', and when running for domain bbb.com, 'src/bbb/compPerTarget/comp' be used. And most important thing is the source where comp is used is not be changed for "import 'compPerTarget/comp'"

Pages using component comp

import Comp from 'compPerTarget/Comp'

...

When build or run source for target aaa.com use 'src/aaa/compPerTarget/comp'

function Comp() {
  const logicForAAA = () => {...};

  return (
    <div>using div..<div>
  );
}

When build or run source for target bbb.com use 'src/bbb/compPerTarget/comp'

function Comp() {
  const logicForBBB = () => {...};

  return (
    <li>using li..<li>
  );
}

I'm trying to solve it using jsonconfig.json and webpack.config.js, but I'm wondering if this is the right way to go, and if there is another way to solve it more easily, please advise me.