Hacker News new | ask | show | jobs
by fensipens 4055 days ago
> 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..
3 comments
ble 4055 days ago
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.)

link
hirsin 4055 days ago
Or hit F12, works in every browser and platform as long as the key is present.
link
hobby_body 4054 days ago
Between Firefox, Chrome, and Safari on OSX, it only does anything in Firefox (toggles Firebug).
link
fensipens 4055 days ago
Thanks, that's what I've been looking for!
link
ble 4054 days ago
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.

link
jawns 4055 days ago
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...

link
hcarvalhoalves 4055 days ago
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.
link
jkkramer 4055 days ago
There's a React Dev Tools plugin for Chrome that will show a tree of components instead of the DOM.
link