I am making two seprate react application and both are combined as single application at the end.
Consider two apps,
- Sub App
- Main App
Here the main app consists of all sub apps.
Code for Sub App:
function App() {
return (
<h1> Here is the code of Sub App</h1>
)
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.6/index.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
Code for Main App:
function App() {
return (
<h1> How to implement the Sub App here in this Main App?</h1>
)
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.6/index.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
Requirement:
The requirement is we need to include the Sub App inside Main App like,
App.js:
import {ComponentName} from "sub-app"
function App() {
return (
<ComponentName />
)
}
Real world:
Consider the real world example as that I am having a big app and dashboard is part of it (Sub App), So we are about to create that dashboard as a separate react app and include the same inside Main App.
Things I tried:
- Both
Sub AppandMain Appare different git repos. - So thought of including the following code in
package.jsonofMain App.
And tried the following,
"dependencies": {
"sub-app": "https://git@myorganisation.com:<user>/sub-app.git"
}
But unfortunately this doesn't work.. I think I am doing something wrong here..
I kindly request you to please help me to include the Sub App inside Main App.