score:0

the actual source is mostly js, between libraries that react uses, libraries you've imported, and the js you've written.

when you write a view, typically in .jsx format, it is js that is translated into html. so after the dom has populated by using the combination of the libraries and what you have written it is then available to view the html in the dom, but the source will still only display the js.

sudo example

example.jsx

...
render() {
  const example = ['a', 'b', 'c'];
  return ( <div> { example.map((val) => (<p>{val}</p>)) } </div> }
}
...

source

...
require('example.js')
...

dom

...
<div>
  <p>a</p>
  <p>b</p>
  <p>c</p>
</div>
...

score:2

view source will have the the content what you have in build/index.html or public/index.html

index.html will have some <script> tags. browser executes these javascript files in script tag and renders the page. we can say this as dynamic code or runtime generated html, css and other code.

so view source will show only static contents, that is what you have in index.html. its same as if you open index.html in any editor like notepad.

where as when using dev tools you will see all runtime generated code. that is what dev tools indend to do.

and if you need to see the react components, state, props and other details, you need to use react dev tools for chrome

a simple example would be:

index.html

<html>
  <body>
    <div id="app"></div>
    <script>
     document.getelementbyid("app").innerhtml = "hello world";
    </script>
  </body>
</html>

you will see the above code in view source.

you will see below code in dev tools

<html>
  <body>
    <div id="app">hello world</div>
    <script>
     document.getelementbyid("app").innerhtml = "hello world";
    </script>
  </body>
</html>

hope this is clear.


Related Query

More Query from same tag