React Sight — Visualise your React apps

React Sight is a live view of the component hierarchy tree of your React application with support for React Router and Redux.

Nishit Maheta
Dec 4, 2019 · 2 min read

Official Website: https://www.reactsight.com/

Credit — https://www.reactsight.com/

Set Up | Install From Chrome Store

  1. Make sure you’ve added React Dev Tools to Chrome.

Building Your Own Version

If you’d like to build your own version of React Sight:

  1. Clone the repo and npm install dependencies

Features

NO SET UP REQUIRED

React Sight requires NO modification to your codebase, so using it is as simple as adding our Chrome Extension

WORKS WITH ALL YOUR FAVORITE LIBRARIES

React-Sight supports React 14.7+ (including Fiber), React Router v4, React Redux, and more

BUILT FOR SPEED

React-Sight is light-weight and unobtrusive, and will show you how your Application is working

SEE ONLY WHAT YOU WANT TO SEE

Built in filters allow you to hide elements you don’t want to see, allowing you focus only on the components that you’ve written

Authors

David C Sally (https://github.com/davidcsally)

Grant Kang (https://github.com/Grant05)

William He (https://github.com/hewilliam)

GitHub

JavaScript in Plain English

Learn the web's most important programming language.

Nishit Maheta

Written by

Technology Lead At Mobio Solutions. http://mobiosolutions.com/. Follow me on https://www.linkedin.com/in/nishit-mehta/

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade