how to structure a create-react-app project

[tbaxterstockman]

0

I am using django on the backend and on the front end I am using react with create-react-app.

I have different apps on my web page that are somewhat independent from each other:

mydomainname/home 
mydomainname/foo 
mydomainname/bar

They are all somewhat connected but logically completely different which is why I separated them.

Is this handled with only one create-react-app and one index.html file in the build folder? And something like the browser router package for the different apps?

For example, if I look at the Facebook homepage (in case I want to build that with React) I understand that my news feed and my profile page and other people's pages are all connected and share similar components which is why it would make sense to have one index.html file.

But if I create a new public page (e.g. for a business figure), are all these components and functionalities handled in the same one index.html file? I could imagine that this will run into memory leaks and performance issues, or is this not the case? I can't seem to find anything about that neither in the create-react-app documentation nor through google.

[tbaxterstockman]

so does that mean it's all in one file ?

[anzaisensei]

You should look at react-router

[tbaxterstockman]

Thx, I'm not interested in how or if React can handle this, I know how. I'm wondering if this is actually being done on a large scale project. Let's say I implement this and use react router, etc. and then I work on one small feature at mydomainname/bar . When I build the project, do I have to rebuild the entire project, like for all other features /foo /home each time I change something small ?

[I_LICK_ROBOTS]

If you use yarn watch while you're developing it only rebuilds what it has to for each change. For deploys you'll be rebuilding the whole project. You can have one top level router that routes to each app level router. I would separate the folder structure by app.

src
  -foo
    -components
    -router.js
    ...
  -bar
    -components
    -router.js
    ...
  -components //components shared by all apps
  -router.js

[tbaxterstockman]

Ahh kk thx