Skip to content Skip to sidebar Skip to footer
Home / Html / Javascript / Reactjs

Render A React App In A Non React Web Page

Post a Comment
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"