Render A React App In A Non React Web Page
I was wondering if its possible to render an entire react app in a non react web page. I tried many links where it suggested code snippets as follows which shows to render just a c
Solution 1:
See comments on question for more context on this answer
index.html
<!DOCTYPE html><html><head><title>Example</title><scripttype="text/javascript"src="/bundle.js"></script></head><body><divid="content1"></div><scripttype="text/javascript">mount("content1", "testing")
</script><divid="content2"></div><scripttype="text/javascript">mount("content2", "more testing")
</script></body></html>index.js
importReactfrom'react'import { render } from'react-dom'import { createStore } from'redux'import { Provider } from'react-redux'import { App } from'./app'window.mount = function(id, customText) {
const store = createStore((state = {}) => state)
render(
<Providerstore={store}><Apptext={customText} /></Provider>,
document.getElementById(id)
)
}
app.js
importReactfrom'react'exportconstApp = ({ text }) => {
return (
<div>{text}</div>
)
}
This only has redux integration in so far as it creates a store and wraps the app in a Provider, but I can't see any reason why it wont work like normal from there.
I tested this using webpack to bundle and webpack-dev-server to serve.
Post a Comment for "Render A React App In A Non React Web Page"