Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

View the source code of a website built with React

Tags:

reactjs

Is there anyway to view the react source code of websites built with React?

If you inspect the source code of a react page you will only see the root div. Is there a way to see the actual components?

like image 273
JohnSnow Avatar asked May 27 '17 04:05

JohnSnow

People also ask

How do I see source code in React?

Its source code is located in packages/react-dom/src/events .

Can you see the React code for a website?

Do you know that when you deploy your React application which is created using create-react-app or your own webpack configuration to a live website like Netlify, Vercel, Heroku etc, your entire source code is visible to everyone from the sources tab of the dev tools.

2 Answers

You can use React Developer Tools browser extension. This will allow you to see the Component Tree of any React application. Also, you can inspect props and state of each component with it. But still, you won't be able to see the source code of Component after a production build.

like image 158
Tharaka Wijebandara Avatar answered Sep 18 '22 18:09

Tharaka Wijebandara

There are 2 tools which might help .
One is already mentioned in the answer by @tharaka
The other tool is Redux Dev Tools for state management .

like image 38
Yash Sharma Avatar answered Sep 18 '22 18:09

Yash Sharma
Sign in to Comment

Related questions

componentWillReceiveProps vs getDerivedStateFromProps
PWA update icon after user add to homescreen
What does the @ symbol mean in a react import statement
Why does react class component always need to call super(props) in its constructor?
What makes React.memo unreliable for preventing renders?
Why does my mock of my api return a 404 error?
React useCallback hook for map rendering
How to load environment variables in React
What is the right way to use Ionic Native / Cordova Plugins with Ionic (React) & Capacitor?
How to run useEffect once even if there're dependencies? And why ESLint is complaining about it?
Configure ESLint to parse .ts and .tsx as Typescript and .js and .jsx as Ecmascript
Unsupported platform for [email protected] installation issue
Reactjs promises, how should we use it?
Why doesn't ReactJS autogenerate keys for dynamic children?
Is it possible to call dom element methods like focus() without using a ref? (Stateless Component Functions)
How to serve static assets like json file in webpack dev server?
webpack react process.env always empty (windows 10)
enzyme simulate submit form, Cannot read property 'value' of undefined
JSX files in create-react-app
Jest snapshots work locally but consistently fail on Travis CI

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!