Open ardaorkin opened 3 years ago
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 andReactDOM.hydrate()
on the client
This would theoretically indicate to the React Dev Tools extension that you're using React since:
react-dom
library as a script
tagReactDOM.hydrate()
, even further using client-side React thingsI'm personally not using React in that way, but I'm sure you could get it to work.
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?