Componente de botón React Desktop macOS

React Desktop es una biblioteca popular para llevar la experiencia de escritorio nativa a la web. Esta biblioteca proporciona componentes de macOS y Windows OS. El componente de botón se utiliza para permitir a los usuarios realizar acciones y tomar decisiones con un solo toque. Podemos usar el siguiente enfoque en ReactJS para usar el componente de botón React Desktop macOS.

Accesorios de botón:

• color: Se utiliza para establecer el color del botón.
• oculto: Se utiliza para establecer la visibilidad de un componente.
• margin: Se utiliza para establecer el margen exterior del componente.
• marginBottom: se utiliza para establecer el margen inferior exterior del componente.
• marginLeft: se utiliza para establecer el margen exterior izquierdo del componente.
• marginRight: Se utiliza para establecer el margen exterior derecho del componente.
• marginTop: Se utiliza para establecer el margen superior exterior del componente.
• onClick: es una función de devolución de llamada que se activa con el clic de un botón.
• onEnter: es una función de devolución de llamada que se activa cuando se presiona la tecla enter.
• relleno: Se utiliza para establecer el relleno dentro de un componente.
• paddingBottom: se utiliza para establecer el relleno inferior dentro de un componente.
• paddingLeft: se utiliza para establecer el relleno izquierdo dentro de un componente.
• paddingRight: se utiliza para establecer el relleno derecho dentro de un componente.
• paddingTop: se utiliza para establecer el relleno superior dentro de un componente.
• tamaño: se utiliza para indicar el tamaño de fuente del componente.
• type: Se utiliza para establecer el tipo del botón.

Creación de la aplicación React e instalación del módulo:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir , el nombre de la carpeta , acceda a ella con el siguiente comando:

cd foldername

Paso 3: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:

npm install react-desktop

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

Nombre de archivo: App.js

import React from 'react'
import { Button } from 'react-desktop/macOs';
 
export default function App() {
  return (
    <div style={{
      display: 'block', width: 700, paddingLeft: 30
    }}>
      <h4>React-Desktop macOS Button Component</h4>
      <Button type="button"
        onClick={()=> alert('You clicked!')}
      >Button Text</Button>
    </div>
  );
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Referencia: https://reactdesktop.js.org/docs/mac-os/button