Comments (1)
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:
- The HTML generated by the server includes React attributes
- You include the
react-dom
library as ascript
tag - 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.
from express-react-views.
Related Issues (20)
- onClick event listener not working
- babel-register not updated in release from nine months ago HOT 2
- document is not defined HOT 1
- Feature request: Locals as a context HOT 3
- Error: Cannot find module 'babel-core' HOT 3
- Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3" HOT 3
- If we need a view engine of ‘tsx’.
- Dynamic example is vulnerable to XSS HOT 2
- React component use HOT 1
- Dealing with different file extensions for production HOT 1
- Any plans for webpack support?
- SyntaxError: Unexpected token '<'
- Error: Cannot find module '@babel/plugin-transform-flow-strip-types'
- cannot import bootstrap when using the jsx view engine HOT 4
- Is this reactive? HOT 3
- React setState did not rerender the page HOT 4
- add external script file
- How to load javascript with express-react-views HOT 2
- React 17
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from express-react-views.