Have you feel difficulty while switching to a new project which already have big codebase or while finding the performance issue of your React App. It’s not fun to travel all the files using your code editor. Rather then that there is more cooler way exists. In this article we will gonna learn how to use React Sight to visualize your React App.
What is React Sight ?
React Sight is a chrome extension which basically a cooler way to visualize your React App. It take helps from the React dev tools extension so you need to install that as well.
The best thing is that you don’t need to setup any configuration to use React Sight. It’s as simple as installing a new extension. It support all library related to React like react router, react redux etc.
It’s super fast when it comes to visualize the app. It also have built in filters which makes it more useful.
How to use React Sight?
React Sight requires React Dev Tools for reading information about your App. Simply add to Chrome if you don’t have it installed from chrome store.
After that install the React Sight extension from chrome store.
In latest version of chrome you need to give full permission from extension icon to React Sight extension.
Once its installed just open any react website. Open your React application, or open (almost!) any website running React!
Open the Chrome Developer Tools and click the React Sight panel. Now you will be available to see the whole structure of your React App. It’s best works in the local projects.
Feel free to comment your valuable thoughts.