Limenius / ReactBundle

Client and Server-side React.js rendering in a Symfony Bundle
MIT License
390 stars 53 forks source link

Client_side rendering does nothing #41

Closed lpeliberty closed 5 years ago

lpeliberty commented 5 years ago

Hello, there's a few days i'm working on this bundle and i definitively dont make it works like i want... My server side rendering is good, but the HTML generated is not recognized like it's said :

Client-side render will take the server-side rendered DOM, recognize it, and take control over it without rendering again the component until needed.

and if i choose to render only on client-side, my block is empty (where i should get my react component). {{ react_component('RecipesAppRedux', {'rendering': 'client_side'}) }} In a first time, i'm trying to display a button that can be incremented (with react hooks useState) My HTML code generated with client_side only :

<div>
  <script type="application/json" id="js-react-on-rails-context">
{"serverSide":false,"href":"http:\/\/www.localhost\/fr\/checkout\/customize","location":"\/fr\/checkout\/customize","scheme":"http","host":"www.localhost","port":80,"base":"","pathname":"\/fr\/checkout\/customize","search":null}
  </script>
  <script type="application/json" class="js-react-on-rails-component" data-component-name="RecipesAppRedux" data-dom-id="sfreact-reactRenderer5cc6f5c4ac9313.07783638">
    []
  </script>
  <div id="sfreact-reactRenderer5cc6f5c4ac9313.07783638">
  </div>
</div>

My HTML code generated with both rendering :

<div>
  <script type="application/json" id="js-react-on-rails-context"> 
{"serverSide":false,"href":"http:\/\/www.localhost\/fr\/checkout\/customize","location":"\/fr\/checkout\/customize","scheme":"http","host":"www.localhost","port":80,"base":"","pathname":"\/fr\/checkout\/customize","search":null}
  </script>
  <script type="application/json" class="js-react-on-rails-component" data-component-name="RecipesAppRedux" data-dom-id="sfreact-reactRenderer5cc6f67028c5a4.23079602">
    []
  </script>
  <div id="sfreact-reactRenderer5cc6f67028c5a4.23079602">
    <div data-reactroot="">
      <p>You clicked <!-- -->0<!-- --> times</p>
      <button type="button">Click inc hook counter</button>
    </div>
  </div>
</div>

Do i have to do something special to deal with it ?

Ty

mtsvr commented 3 years ago

Hey there @lpeliberty I know this is an old issue but it seems to be closed without any solution. Could you give us some light on how you solved it? I am having the same problem integrating react on a big Symfony/Sonata application. Thanks in advance.