Extensión de vista de React.js

Extensión React Sight: React Sight es una extensión de navegador web, disponible para Mozilla firefox. Lee el DOM virtual de React de los componentes representados en la página y forma un diagrama de árbol interactivo. Con solo pasar el cursor sobre los Nodes del árbol, se puede ver el estado, los accesorios y los elementos secundarios del componente. React-Sight también admite bibliotecas como React 14.7+ (incluida Fiber), React Router v4, React-Redux y muchas más.

Requisito previo: las herramientas de desarrollo de React deben estar preinstaladas.

Pasos para agregar la extensión:

• Siga el enlace: https://addons.mozilla.org/en-US/firefox/addon/react-sight/
• Haga clic en Agregar a Firefox.
• Ahora la herramienta se ha agregado a su navegador. Para eliminar la extensión, haga clic en Eliminar .

Para una mejor comprensión, creemos una página de inicio simple con dos botones, uno para los cursos y otro para el artículo, y usemos React Sight Extension para visualizar el árbol DOM. 

Paso 1: cree la carpeta del proyecto de reacción, para eso abra la terminal y escriba el comando npm create-react-app folder name, si ya instaló create-react-app globalmente. Si no lo ha hecho, instale create-react-app globalmente usando el comando npm -g create-react-app o puede instalarlo localmente con npm i create-react-app .

npm create-react-app project

Estructura del proyecto: Se verá como a continuación. Para la página de inicio, cree una carpeta denominada Componentes en la carpeta src y, dentro de la carpeta, cree un archivo con el nombre HomePage.js .

Estructura de archivos

Nombre de archivo: 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://practice.geeksforgeeks.org/courses/geeks-classes-live?source=google&medium=cpc&device=c&keyword=&matchtype=&gclid=EAIaIQobChMI7-73_5_P9QIVT66WCh3-nwqREAAYASAAEgImzfD_BwE"
      />
      <Button
        link="https://www.geeksforgeeks.org/category/articles/"
        variant="courses-btn"
        children="Courses"
      />
    </div>
  );
}
  
export default HomePage;

Nombre de archivo: index.css: agregar los estilos en index.css en la carpeta de origen.

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;
}

Nombre de archivo: App.js Ahora en App.js permite importar la página de inicio del componente.

Javascript
import './App.css';
import HomePage from './Components/HomePage';
  
function App() {
  return (
    <div className="App">
     <HomePage/> 
    </div>
  );
}
  
export default App;

Paso para ejecutar la aplicación: Vaya a la terminal y ejecute el siguiente comando:

npm start

Para abrir el inspector, haga clic con el botón derecho en la ventana y, en el menú que aparece, haga clic en Inspeccionar o simplemente presione ctrl+shift+c . Después de que se abra el inspector, haga clic en la pestaña React-Sight .

Producción:

Reaccionar extensión de vista