React Dev Tools Does Not Comprehend React Components

[ardaorkin]

Hello. When I opened up project page, I saw that React dev tools doesn't comprehend React components in the project: What should I do for React Dev Tools to see my React components?

[marshalhayes]

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.