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>
        <script type="text/javascript" src="/bundle.js"></script>
    </head>
    <body>
        <div id="content1">
        </div>
        <script type="text/javascript">
            mount("content1", "testing")
        </script>

        <div id="content2">
        </div>
        <script type="text/javascript">
            mount("content2", "more testing")
        </script>
    </body>
</html>

index.js

import React from '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(
        <Provider store={store}>
            <App text={customText} />
        </Provider>, 
        document.getElementById(id)
    )
}

app.js

import React from 'react'

export const App = ({ 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"