Divisor de React Suite con texto

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. Divider permite al usuario separar los componentes de la interfaz de usuario entre sí. 

Divisor con texto: el usuario puede proporcionar contexto a la separación usando esto.

Enfoque: Vamos a crear un proyecto React e instalar el módulo React Suite. Luego, crearemos una interfaz de usuario que creará React Suite Divider with Text . 

Creando proyecto React:

Paso 1: para crear una aplicación de reacción, debe instalar los módulos de reacción a través del comando npx. Se usa «npx» en lugar de «npm» porque necesitará este comando en el ciclo de vida de su aplicación solo una vez.

npx create-react-app project_name

Paso 2: después de crear su proyecto de reacción, muévase a la carpeta para realizar diferentes operaciones.

cd project_name

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: después de ejecutar los comandos mencionados en los pasos anteriores, si abre el proyecto en un editor, puede ver una estructura de proyecto similar a la que se muestra a continuación. El nuevo componente que el usuario crea o los cambios de código que realizaremos se realizarán en la carpeta de origen.

Estructura del proyecto

Ejemplo 1: estamos creando una interfaz de usuario que muestra la descripción de diferentes cursos divididos con un divisor con texto.

Nombre de archivo: App.js

import React from "react";
import { Divider } from 'rsuite';
import '../node_modules/rsuite/dist/rsuite.min.css';
  
class App extends React.Component {
  
    render() {
        return (
            <div>
                <p>
                    <b style={{ color: "green" }}>DSA Self Paced 
                    </b> <br /> Most popular course on DSA trusted 
                    by over 75,000 students! Built with years of 
                    experience by industry experts and gives you a 
                    complete package of video lectures, practice 
                    problems, quizzes, discussion forums and contests.
                </p>
  
                <Divider>
                    Geeks for Geeks Preparation - Interactive Live Courses
                </Divider>
                <p>
                    <b style={{ color: "green" }}>Amazon SDE Preparation Test 
                    Series</b><br />A test series that will help you prepare 
                    for coding interviews for Amazon and other product-based 
                    companies. Programming questions similar to those asked 
                    in real-time Amazon interviews. The perfect test series 
                    to practice and test your skills!
                </p>
  
                <Divider>
                    Geeks for Geeks Preparation - Interactive Live Courses
                </Divider>
                  
                <p>
                    <b style={{ color: "green" }}>Complete Interview 
                    Preparation</b><br />An interview-centric course
                    designed to prepare you for the role of SDE for 
                    both product and service based companies. A 
                    placement preparation pack built with years of 
                    expertise. 
                </p>
            </div>
        );
    }
}
  
export default App;

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:

Divisor con Texto

Ejemplo 2: estamos creando una interfaz de usuario que muestra diferentes secciones divididas con un divisor con texto.

import React from "react";
import { Divider } from 'rsuite';
import '../node_modules/rsuite/dist/rsuite.min.css';
  
const myComponentStyle = {
    height: 50,
    paddingTop: 15,
    backgroundColor: "green",
    color: "white",
    fontWeight: "bold",
    textAlign: "center"
}
  
class App extends React.Component {
    render() {
        return (
            <div style={{ margin: 100 }}>
                <p style={myComponentStyle}>Section</p>
  
                <Divider>Divider 1</Divider>
                <p style={myComponentStyle}>Section</p>
  
                <Divider>Divider 2</Divider>
                <p style={myComponentStyle}>Section</p>
  
                <Divider>Divider 3</Divider>
                <p style={myComponentStyle}>Section</p>
  
            </div>
        );
    }
}
  
export default App;

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

Separadores con Texto 

Referencia: https://rsuitejs.com/components/divider/#divider-with-text