React.js 视线扩展

React Sight 扩展： React Sight 是一个 Web 浏览器扩展，可用于 Mozilla firefox。它读取页面上呈现的组件的 React 虚拟 DOM 并形成交互式树形图。只需将鼠标悬停在树的节点上，就可以看到组件的状态、道具、子级。 React-Sight 还支持 React 14.7+（包括 Fiber）、React Router v4、React-Redux 等库。

先决条件：应预先安装 React 开发者工具。

添加扩展的步骤：

• 点击链接：https://addons.mozilla.org/en-US/firefox/addon/react-sight/
• 单击添加到 Firefox。
• 现在该工具已添加到您的浏览器中。要删除扩展，请单击Remove 。

为了更好地理解，让我们创建一个简单的主页，其中包含两个按钮，一个用于课程，另一个用于文章，并使用 React Sight Extension 可视化 DOM 树。

第 1 步：创建 react 项目文件夹，为此打开终端，如果您已经全局安装了 create-react-app，则编写命令 npm create-react-app 文件夹名称。如果您还没有使用命令npm -g create-react-app 全局安装 create-react-app ，或者可以通过npm i create-react-app在本地安装。

npm create-react-app project

项目结构：如下所示。对于主页，在 src 文件夹中创建一个名为 Components 的文件夹，并在该文件夹内创建一个文件名HomePage.js 。

文件结构

文件名：主页.js

HomePage.js

import React from 'react';
  
const Button = (props) => {
  const { variant, children, link, ...rest } = props;
  return (
    
      
        {children}
      
    
  );
};
  
const WelcomeText = () => {
  return 
Welcome to Geeksforgeeks
;
};
  
function HomePage() {
  return (
    

      
      
      
    
  );
}
  
export default HomePage;

文件名：index.css：在源文件夹的index.css中添加样式。

索引.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;
}

文件名：App.js现在在 App.js 中允许导入组件主页。

Javascript

Javascript
import './App.css';
import HomePage from './Components/HomePage';
  
function App() {
  return (
    

      
    
  );
}
  
export default App;

运行应用程序的步骤：转到终端并运行以下命令：

npm start

要打开检查器，请右键单击窗口并在出现的菜单中单击Inspect或只需按ctrl+shift+c 。 检查器打开后，单击React-Sight选项卡。

输出：

React Sight 扩展