React Dev Tools Does Not Comprehend React Components #164

Activity

1. ardaorkin

   changed the title [-]React Dev Tools Does Not comprehend[/-] [+]React Dev Tools Does Not Comprehend React Components[/+] on Dec 27, 2020
2. marshalhayes commented on Jan 28, 2021

   

   marshalhayes

   on Jan 28, 2021

   More actions

   I haven't used the React Dev Tools extension you're asking about, but I want to clarify something.

   This system is completely server-side. There is no JavaScript rendered to the client at all. We import React tools, yes, but again that's on the server-side. From the client's perspective there is no way to know we are using React. If you setup a simple express server with a controller, say:

   const ReactDOMServer = require('react-dom/server');
   
   // An express controller
   app.get('/', function (req, res) {
     // Assume this loads the React view
     const loadedComponent = ...;
   
     res.status(200);
     res.send(ReactDOMServer.renderToStaticMarkup(loadedComponent));
   });

   The key here is renderToStaticMarkup(). You can read the docs, but it only generates HTML markup. No React anything.

   Now, with that said, I don't think it would then be possible for the React Dev Tools extension to know the markup came from React.

   However, you could follow what the React docs recommend if you want your server-rendered React components to become interactive and:

   ...use renderToString on the server and ReactDOM.hydrate() on the client

   This would theoretically indicate to the React Dev Tools extension that you're using React since:

   1. The HTML generated by the server includes React attributes
   2. You include the react-dom library as a script tag
   3. You call ReactDOM.hydrate(), even further using client-side React things

   I'm personally not using React in that way, but I'm sure you could get it to work.