React mixing components and html inside root element












0















I want to pass server side data to React components without making async call.
I was wondering about building React app directly from my html page, something like what's written down here.



Is there a way to do something like this inside my html:






<body>
<div id="root">
<h1>Title</h1>
<ReactComponentA description="Lorem ipsum">
<div>
Test
</div>
...(maybe other react components or html here)
</ReactComponentA>
</div>
</body>





In other words I'm trying to mix html and react components inside react root element in my html view.



I hope I was clear



Thank you very much










share|improve this question

























  • You can't use React components in HTML because they aren't HTML. What is your case?

    – estus
    Nov 28 '18 at 11:30











  • I want to pass server side data to react components without making async call

    – Daniele Sesoldi
    Nov 28 '18 at 11:31











  • nesting react components is feasible , sorry did not get what are you trying to achieve here

    – Shushanth Pallegar
    Nov 28 '18 at 11:32











  • Then this is XY problem that should be addressed in another way. Consider updating the question with this information. It's also unclear from pseudocode you posted what kind of data it is.

    – estus
    Nov 28 '18 at 11:32


















0















I want to pass server side data to React components without making async call.
I was wondering about building React app directly from my html page, something like what's written down here.



Is there a way to do something like this inside my html:






<body>
<div id="root">
<h1>Title</h1>
<ReactComponentA description="Lorem ipsum">
<div>
Test
</div>
...(maybe other react components or html here)
</ReactComponentA>
</div>
</body>





In other words I'm trying to mix html and react components inside react root element in my html view.



I hope I was clear



Thank you very much










share|improve this question

























  • You can't use React components in HTML because they aren't HTML. What is your case?

    – estus
    Nov 28 '18 at 11:30











  • I want to pass server side data to react components without making async call

    – Daniele Sesoldi
    Nov 28 '18 at 11:31











  • nesting react components is feasible , sorry did not get what are you trying to achieve here

    – Shushanth Pallegar
    Nov 28 '18 at 11:32











  • Then this is XY problem that should be addressed in another way. Consider updating the question with this information. It's also unclear from pseudocode you posted what kind of data it is.

    – estus
    Nov 28 '18 at 11:32
















0












0








0


0






I want to pass server side data to React components without making async call.
I was wondering about building React app directly from my html page, something like what's written down here.



Is there a way to do something like this inside my html:






<body>
<div id="root">
<h1>Title</h1>
<ReactComponentA description="Lorem ipsum">
<div>
Test
</div>
...(maybe other react components or html here)
</ReactComponentA>
</div>
</body>





In other words I'm trying to mix html and react components inside react root element in my html view.



I hope I was clear



Thank you very much










share|improve this question
















I want to pass server side data to React components without making async call.
I was wondering about building React app directly from my html page, something like what's written down here.



Is there a way to do something like this inside my html:






<body>
<div id="root">
<h1>Title</h1>
<ReactComponentA description="Lorem ipsum">
<div>
Test
</div>
...(maybe other react components or html here)
</ReactComponentA>
</div>
</body>





In other words I'm trying to mix html and react components inside react root element in my html view.



I hope I was clear



Thank you very much






<body>
<div id="root">
<h1>Title</h1>
<ReactComponentA description="Lorem ipsum">
<div>
Test
</div>
...(maybe other react components or html here)
</ReactComponentA>
</div>
</body>





<body>
<div id="root">
<h1>Title</h1>
<ReactComponentA description="Lorem ipsum">
<div>
Test
</div>
...(maybe other react components or html here)
</ReactComponentA>
</div>
</body>






javascript html reactjs components react-component






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 28 '18 at 11:34







Daniele Sesoldi

















asked Nov 28 '18 at 11:22









Daniele SesoldiDaniele Sesoldi

387




387













  • You can't use React components in HTML because they aren't HTML. What is your case?

    – estus
    Nov 28 '18 at 11:30











  • I want to pass server side data to react components without making async call

    – Daniele Sesoldi
    Nov 28 '18 at 11:31











  • nesting react components is feasible , sorry did not get what are you trying to achieve here

    – Shushanth Pallegar
    Nov 28 '18 at 11:32











  • Then this is XY problem that should be addressed in another way. Consider updating the question with this information. It's also unclear from pseudocode you posted what kind of data it is.

    – estus
    Nov 28 '18 at 11:32





















  • You can't use React components in HTML because they aren't HTML. What is your case?

    – estus
    Nov 28 '18 at 11:30











  • I want to pass server side data to react components without making async call

    – Daniele Sesoldi
    Nov 28 '18 at 11:31











  • nesting react components is feasible , sorry did not get what are you trying to achieve here

    – Shushanth Pallegar
    Nov 28 '18 at 11:32











  • Then this is XY problem that should be addressed in another way. Consider updating the question with this information. It's also unclear from pseudocode you posted what kind of data it is.

    – estus
    Nov 28 '18 at 11:32



















You can't use React components in HTML because they aren't HTML. What is your case?

– estus
Nov 28 '18 at 11:30





You can't use React components in HTML because they aren't HTML. What is your case?

– estus
Nov 28 '18 at 11:30













I want to pass server side data to react components without making async call

– Daniele Sesoldi
Nov 28 '18 at 11:31





I want to pass server side data to react components without making async call

– Daniele Sesoldi
Nov 28 '18 at 11:31













nesting react components is feasible , sorry did not get what are you trying to achieve here

– Shushanth Pallegar
Nov 28 '18 at 11:32





nesting react components is feasible , sorry did not get what are you trying to achieve here

– Shushanth Pallegar
Nov 28 '18 at 11:32













Then this is XY problem that should be addressed in another way. Consider updating the question with this information. It's also unclear from pseudocode you posted what kind of data it is.

– estus
Nov 28 '18 at 11:32







Then this is XY problem that should be addressed in another way. Consider updating the question with this information. It's also unclear from pseudocode you posted what kind of data it is.

– estus
Nov 28 '18 at 11:32














1 Answer
1






active

oldest

votes


















0














React components aren't HTML and cannot be used in HTML page. JSX syntax is syntactic sugar for React.createComponent(...). Even though React.createComponent(...) could be used in HTML within <script>, it wouldn't make much sense there because React components should be rendered with ReactDOM.render any way in order to be useful, and this happens inside React application.



Another problem is that if ReactComponentA is defined inside React application, it wouldn't be available as ReactComponentA in global scope.



If an application is hydrated with data to avoid asynchronous AJAX calls, data can be provided with globals:



<script>
window.__APP_DATA__ = {/* provided in server-side template */};
</script>


And be used inside an application as window.__APP_DATA__.






share|improve this answer























    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53518303%2freact-mixing-components-and-html-inside-root-element%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    0














    React components aren't HTML and cannot be used in HTML page. JSX syntax is syntactic sugar for React.createComponent(...). Even though React.createComponent(...) could be used in HTML within <script>, it wouldn't make much sense there because React components should be rendered with ReactDOM.render any way in order to be useful, and this happens inside React application.



    Another problem is that if ReactComponentA is defined inside React application, it wouldn't be available as ReactComponentA in global scope.



    If an application is hydrated with data to avoid asynchronous AJAX calls, data can be provided with globals:



    <script>
    window.__APP_DATA__ = {/* provided in server-side template */};
    </script>


    And be used inside an application as window.__APP_DATA__.






    share|improve this answer




























      0














      React components aren't HTML and cannot be used in HTML page. JSX syntax is syntactic sugar for React.createComponent(...). Even though React.createComponent(...) could be used in HTML within <script>, it wouldn't make much sense there because React components should be rendered with ReactDOM.render any way in order to be useful, and this happens inside React application.



      Another problem is that if ReactComponentA is defined inside React application, it wouldn't be available as ReactComponentA in global scope.



      If an application is hydrated with data to avoid asynchronous AJAX calls, data can be provided with globals:



      <script>
      window.__APP_DATA__ = {/* provided in server-side template */};
      </script>


      And be used inside an application as window.__APP_DATA__.






      share|improve this answer


























        0












        0








        0







        React components aren't HTML and cannot be used in HTML page. JSX syntax is syntactic sugar for React.createComponent(...). Even though React.createComponent(...) could be used in HTML within <script>, it wouldn't make much sense there because React components should be rendered with ReactDOM.render any way in order to be useful, and this happens inside React application.



        Another problem is that if ReactComponentA is defined inside React application, it wouldn't be available as ReactComponentA in global scope.



        If an application is hydrated with data to avoid asynchronous AJAX calls, data can be provided with globals:



        <script>
        window.__APP_DATA__ = {/* provided in server-side template */};
        </script>


        And be used inside an application as window.__APP_DATA__.






        share|improve this answer













        React components aren't HTML and cannot be used in HTML page. JSX syntax is syntactic sugar for React.createComponent(...). Even though React.createComponent(...) could be used in HTML within <script>, it wouldn't make much sense there because React components should be rendered with ReactDOM.render any way in order to be useful, and this happens inside React application.



        Another problem is that if ReactComponentA is defined inside React application, it wouldn't be available as ReactComponentA in global scope.



        If an application is hydrated with data to avoid asynchronous AJAX calls, data can be provided with globals:



        <script>
        window.__APP_DATA__ = {/* provided in server-side template */};
        </script>


        And be used inside an application as window.__APP_DATA__.







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 28 '18 at 11:40









        estusestus

        76.8k22113234




        76.8k22113234
































            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53518303%2freact-mixing-components-and-html-inside-root-element%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            A CLEAN and SIMPLE way to add appendices to Table of Contents and bookmarks

            Calculate evaluation metrics using cross_val_predict sklearn

            Insert data from modal to MySQL (multiple modal on website)