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.
Source: stackoverflow.com
Related Query
- React View source in Browser Newbe React
- Rerender view on browser resize with React
- View the source code of a website built with React
- react helmet not showing meta tags in view page source but shows in element on inspect
- Prod build of React App allows React Dev Tools and show components in source tab inside Browser
- npm run-script build(production build) command, shows source code in browser in React JS
- How to view an uploaded image in react in the browser
- React Redux: Can view props in browser console, but return undefined when rendered
- React Router Changes URL, but view does't change, but if i press enter when the url is on the browser tab it does
- React router changes url but not view
- Make view 80% width of parent in React Native
- How to disable source maps for React JS Application
- react dev tools not loading in Chrome browser
- Is it ok to use ReactDOMServer.renderToString in the browser in areas where React isn't directly managing the DOM?
- Can I disable a View component in react native?
- React router 4 does not update view on link, but does on refresh
- Updating source URL on HTML5 video with React
- How to adjust font size to fit view in React Native for Android?
- react open file browser on click a div
- Scroll View inside view not working react native
- React router, how to restore state after browser back button?
- Run simple react js in browser locally
- Browser navigation broken by use of React Error Boundaries
- React debug in browser when using bundle.js
- How to set React component state and props from browser
- Prevent routing in React when user manually changes url in browser tab
- React router not showing browser history
- react material ui not responsive when opened in mobile browser
- React Source code: What does it mean by "real internal dependencies"
- Can touch out side a View Component be detected in react native?
More Query from same tag
- react-router-dom BrowserRouter not working after build
- How to load active class for link in react
- Why does moving the array map of props outside the render function not work in React?
- How to update events from event array by using reducer and handling events?
- Next Auth "Credentials" redirection when throwing error on custom login page
- Build files name change - files that are generated from create react app
- how to fix firebase Attempted import error: 'getAnalytics' is not exported from 'firebase/analytics'
- How to type link prop in component (React + TypeScript)?
- how do you mock a default exported object with jest per test?
- Is it possible to modify error messages based on the status of the error?
- Add click event to render props?
- Conditional Yup validation according to state variable
- React SSR router - redux state loss when navigating to sub route
- How do I get around window not defined during Gatsby build? If check is not working
- Material UI custom text field on date picker
- Object relationships in ReactJS?
- ReactJS change the background color of the selected Navlink in a react bootstrap navbar
- Chaining redux connect mapStateToProps , to access props inside mapDispatchToProps
- Why is my fetch promise being stored in the prop as empty instead of the json i'm fetching?
- How do I convert this function into a class component so that I can use render to call the return?
- react - state gets set to null after button click
- Content policy in react google maps
- ioHook on electron consumes too much CPU. Is there anyway around? Or alternative to ioHook
- What is the difference between nesting and flattening in rxjs?
- why react behaves weird when I move tr tag into a deep level?
- Cannot read property 'map' of undefined with promise all
- React changing value of object change order of array
- Module build failed: Error: write EPIPE (or make processCssUrls:false) in css imports Laravel Mix
- react-native-share promise rejection error
- formik form reset after form submit react js