Introducción a React Suite

React Suite es una biblioteca front-end popular con un conjunto de componentes React que están diseñados para la plataforma intermedia y los productos back-end. Es un marco de interfaz de usuario fácil de usar para desarrolladores.

Instalación: Puedes instalarlo con el siguiente comando:

npm i rsuite
// or
yarn add rsuite

Ahora puede importar componentes de la suite como:

import { Button } from 'rsuite';

Entendamos que está funcionando con la ayuda de ejemplos.

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 rsuite

Estructura del proyecto: Tendrá el siguiente aspecto.

Ejemplo 1: En este ejemplo, usaremos cómo usar el componente de entrada de ReactJS Suite.

import React from 'react'
import 'rsuite/dist/styles/rsuite-default.css';
import { Input } from 'rsuite';
  
export default function App() {
  
// State of our dream city
const [dreamCity, setDreamCity] = React.useState('')
  
return (
    <div style={{
    display: 'block', width: 700, paddingLeft: 30
    }}>
    <h4>React Suite Input Component</h4>
    <Input
        placeholder="Enter your dream city"
        onChange={(e) => setDreamCity(e)}
    />
    Dream City Value: {dreamCity}
    </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:

 

Ejemplo 2: En este ejemplo, veremos cómo usar el componente domHelper de ReactJS Suite. Usaremos el método addTheStyling para agregar el estilo a nuestro elemento con solo hacer clic en el botón.

import React from 'react'
import 'rsuite/dist/styles/rsuite-default.css';
import { Button, DOMHelper } from 'rsuite';
const { addStyle } = DOMHelper;
  
export default class App extends React.Component {
  
// State holding initial style
constructor(props) {
    super(props);
    this.state = {
    htmlCode: '<div class="view"></div>'
    };
}
  
// Function to set the states with latest style
showView() {
    const htmlCode = this.container.innerHTML;
    this.setState({ htmlCode });
}
  
// Function to add the styles
addTheStyling() {
    addStyle(this.view, { 
        'margin-top': '16px', 
        'color': 'orange' 
    });
    this.showView();
}
  
render() {
    const { htmlCode } = this.state;
    return (
    <div>
        <h4>React Suite DOMHelper Component</h4>
        <Button appearance="primary" 
            onClick={() => this.addTheStyling()} >
            Click to Add Style
        </Button>
  
        <div>{htmlCode}</div>
        <div ref={ref => { this.container = ref }}>
        <div className="view" ref={ref => { this.view = ref }} />
        </div>
    </div>
    );
}
}

Producción:

 

Características:

• Representación del lado del servidor (SSR): React Suite es compatible con la representación del lado del servidor, que admite Next.js para crear aplicaciones.

Plataformas compatibles:

Entorno de desarrollo compatible:

• Soporta reaccionar v16.0
• Soporta TypeScript
• Admite electrones
• Razón de apoyo