Created
May 26, 2020 00:00
-
-
Save starsinmypockets/6a52ad45184fc915353a5fe9dfeb5463 to your computer and use it in GitHub Desktop.
Idea for React App Factory
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* author Daniel Pehreson | |
* | |
* Notes from Philly Dev Slack: | |
* > If you’re not 100% sure where you’re getting dropped into, a pattern like that would allow | |
* > varying levels of flexibility / complexity in the config setup appropriate to who is using the dashboard. | |
* > The exact way you split it up is not important, it’s just a matter of splitting up the responsibilities | |
* > for things so that you can adapt. | |
* | |
* > One is just the component itself, and assumes the app has created it’s own react node tree and knows how to | |
* > use the component directly. | |
* > The next assumes the app can provide the config, but has no knowledge of react, it just provides a dom node and | |
* > the mounter does all the react work. | |
* > The last assumes the app literally knows nothing and starts making assumptions / pulling config in from a place | |
* > the app may not even be aware of. | |
*/ | |
const Dashboard = (props) => <p>Dashboard stuff</p>; | |
const DashboardMounter = (rootNode, config) => { | |
ReactDom.render(<Dashboard {...config}, rootNode); | |
} | |
const DashboardMagic = () => { | |
const root = document.createNode("div"); | |
document.body.appendChild(root); | |
const config = ... // get config somewhere magic | |
DashboardMounter(root, config) | |
} | |
export { | |
Dashboard, | |
DashboardMounter, | |
DashboardMagic | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment