Hacker News Reader

Comment by fensipens | Hacker News Reader

> But there's something to be said for having a single template file for a single page in Angular, versus having JSX scattered among 20+ components for that same single page in React.

Good point; How does one view the resulting react-page anyway? CTRL+U shows <body><script.../></body> no matter what state the SPA is in..

View on HN

You want to look at the DOM structure of the page as it exists in the loaded page and have I got a treat for you! Figure out how to open the web inspector for your browser; the keyboard shortcuts are ctrl-shift-I or cmd-shift-I or cmd-opt-I on a few (platform, browser) pairs.

(This will show you the actual DOM, not the React components... but since you were talking about 'view-source', this might help you too.)

Thanks, that's what I've been looking for!

You're welcome!

Using the web inspector has been such a massive and continuous boost to my learning/work with webpages and I'm extremely glad to share it with someone it might help.

Or hit F12, works in every browser and platform as long as the key is present.

Between Firefox, Chrome, and Safari on OSX, it only does anything in Firefox (toggles Firebug).

In Chrome, there's a cool React dev tools extension that shows you the React components.

https://chrome.google.com/webstore/detail/react-developer-to...

That's actually better than looking at the HTML output, unless you're debugging something really weird. With React you should treat HTML as an implementation detail and work in terms of component trees.

There's a React Dev Tools plugin for Chrome that will show a tree of components instead of the DOM.

Reply on news.ycombinator.com