React.js Sight Extension

React Sight Extension: React Sight is a web browser extension, available for Mozilla firefox. It reads React’s virtual DOM of the components rendered on the page and forms an interactive tree diagram. Just Hovering over the nodes of the tree, one can see the state, props, children of the component. React-Sight also supports libraries like React 14.7+ (including Fiber), React Router v4, React-Redux, and many more.

Prerequisite: React Developer Tools should be pre-installed.

Steps to add the extension:

• Follow the link:  https://addons.mozilla.org/en-US/firefox/addon/react-sight/
• Click on Add to Firefox.
• Now the tool has been added to your Browser. To remove the extension click on Remove.

For better understanding let’s create a simple Home page with two buttons one for the courses and another one for the article and use React Sight Extension to visualize the DOM tree. 

Step 1: Create the react project folder, for that open the terminal, and write the command npm create-react-app folder name, if you have already installed create-react-app globally. If you haven’t then install create-react-app globally by using the command npm -g create-react-app or can install locally by npm i create-react-app.

npm create-react-app project

Project Structure: It will look like below. For the home page create a folder named Components in the src folder and inside the folder create a file name HomePage.js.

File Structure

Filename: HomePage.js

HomePage.js

import React from 'react';

const Button = (props) => {
  const { variant, children, link, ...rest } = props;
  return (
    <a href={link}>
      <button className={`btn ${variant}`} {...rest}>
        {children}
      </button>
    </a>
  );
};

const WelcomeText = () => {
  return <div className="welcome-text">Welcome to Geeksforgeeks</div>;
};

function HomePage() {
  return (
    <div>
      <WelcomeText />
      <Button
        variant="article-btn"
        children="Articles" link=
"https://www.geeksforgeeks.org/courses/geeks-classes-live?utm_source=gfg-article&utm_medium=Q1-2023&utm_campaign=geeks-classes-live"
      />
      <Button
        link="https://www.geeksforgeeks.org/category/articles/"
        variant="courses-btn"
        children="Courses"
      />
    </div>
  );
}

export default HomePage;

Filename: index.css: Adding the styles in index.css in the source folder.

index.css

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont,
    'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans',
    'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo,
    Monaco, Consolas, 'Courier New',
    monospace;
}

.welcome-text{
  color: green;
  font-size: larger;
  font-weight: 900;
}

.btn{
  background-color: white;
  color: black;
  transition-duration: 0.5s;
  cursor: pointer;
  padding: 10px 30px;
  font-size: large;
  margin:8px;

}

.btn:hover{
    opacity:0.6;
}

.courses-btn{
    border:2px solid red;
}

.article-btn{
    border:2px solid green;
}

Filename: App.js Now in App.js lets the import the Component HomePage.

Javascript

Javascript
import './App.css';
import HomePage from './Components/HomePage';

function App() {
  return (
    <div className="App">
     <HomePage/>
    </div>
  );
}

export default App;

Step to run the application: Go to the terminal and run the following command:

npm start

To open the inspector right click on the window and in menu that appears click on Inspect or simply press ctrl+shift+c. After the inspector opens click on the React-Sight tab.

Output:

React Sight Extension