admin管理员组

文章数量:1302269

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 ponent,

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <script src="@latest/dist/react.js"></script>
        <script src="@latest/dist/react-dom.js"></script>
        <script src="/[email protected]/babel.min.js"></script>
      </head>
    <body>
        <div id="root">
        <h1>POC</h1>


    </body>
    <script type="text/babel">
        class Application extends React.Component {
            render() {
                //debugger             
                console.log('hi there')
                return (
                    <div>
                        <h1>hello world</h1>
                    </div>
                );
            }
        }

        ReactDOM.render(<Application />, document.getElementById('root'));
    </script>
</html>

But i want to know is its possible to have my react app in the same path like,

- htdocs
    - plainhtmljswebapp.html
    - react-app-folder
        - index.html
        - main.js
        - src
            - ponents
            - actions
            - reducers
        - package.json
        - webpack.config.js

as my web app and load/ import it and pass it some values as props if its possible. I have never done such integration before and any help on its feasibility/ approach would be much appreciated.

Thanks alot

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 ponent,

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <script src="https://unpkg./react@latest/dist/react.js"></script>
        <script src="https://unpkg./react-dom@latest/dist/react-dom.js"></script>
        <script src="https://unpkg./[email protected]/babel.min.js"></script>
      </head>
    <body>
        <div id="root">
        <h1>POC</h1>


    </body>
    <script type="text/babel">
        class Application extends React.Component {
            render() {
                //debugger             
                console.log('hi there')
                return (
                    <div>
                        <h1>hello world</h1>
                    </div>
                );
            }
        }

        ReactDOM.render(<Application />, document.getElementById('root'));
    </script>
</html>

But i want to know is its possible to have my react app in the same path like,

- htdocs
    - plainhtmljswebapp.html
    - react-app-folder
        - index.html
        - main.js
        - src
            - ponents
            - actions
            - reducers
        - package.json
        - webpack.config.js

as my web app and load/ import it and pass it some values as props if its possible. I have never done such integration before and any help on its feasibility/ approach would be much appreciated.

Thanks alot

  • javascript
  • html
  • reactjs
Share asked Apr 18, 2017 at 6:08 Hasitha ShanHasitha Shan 2,9806 gold badges46 silver badges85 bronze badges 6
  • why can't you just iframe the react part? – A. L Commented Apr 18, 2017 at 6:23
  • @A.Lau the reason i need to pass it some values as props to the react app from the web app..to my knowledge this is not possible with iframes right – Hasitha Shan Commented Apr 18, 2017 at 6:24
  • 1 I don't see why not. ReactDOM.render will render any ponent to a div, so you could wrap it in a function to pass it some custom props import you bundle like normal and call the function in a script tag. – Michael Peyper Commented Apr 18, 2017 at 6:25
  • @MichaelPeyper is it possible for that application use the redux state? – Hasitha Shan Commented Apr 18, 2017 at 8:13
  • Again, I don't see why not. If i get some time, I'll knock together a quick example for you an post an answer. – Michael Peyper Commented Apr 18, 2017 at 10:45
 |  Show 1 more ment

1 Answer 1

Reset to default 9

See ments 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.

本文标签： javascriptRender a react app in a non react web pageStack Overflow

版权声明：本文标题：javascript - Render a react app in a non react web page - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741711836a2393889.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。