¿Cómo agregar un tema a su página web usando Bootswatch en el proyecto ReactJS?

Podemos agregar un tema instantáneo al proyecto ReactJS usando Bootwatch.

Bootswatch: es un proyecto de código abierto que proporciona una serie de temas gratuitos para bootstrap que un desarrollador web puede usar. Ayuda al desarrollador a obtener una interfaz de usuario adecuada sin gastar horas y energía en diseñar diferentes elementos.

Requisito previo:

  1. Introducción y funcionamiento de ReactJS
  2. ReactJS configurando el entorno de desarrollo

Para comenzar, siga el enlace dado. Desplácese un poco hacia abajo, aparecerán los temas. Algunos de los temas más utilizados son cosmos, darkly.

Enlace:

https://bootswatch.com/

Estructura del proyecto: 

Instalación de Bootswatch en el proyecto ReactJS:

  1. Haga clic en el botón de vista previa para tener una perspectiva más amplia de los diferentes componentes, como formularios, menús desplegables y otros, para ver cómo aparecerán estos componentes si usamos este tema en particular.
  2. Después de seleccionar el tema, haga clic en el botón de descarga para descargar el archivo bootstrap.min.css .
  3. Dentro de su carpeta react.js, abra el terminal , escriba el comando, esto instalará react-bootstrap en su aplicación.
    npm install react-bootstrap bootstrap
  4. Como ejemplo elegimos Cyborgor https://bootswatch.com/cyborg/ es el tema que se elige. Ahora agregue el archivo bootstrap.min.css descargado , en la carpeta src .
  5. Importe el archivo bootstrap.min.css en index.js.
    Filename- index.js: aquí solo importaremos bootstrap.min.css. Ahora el tema es aplicable a toda la aplicación.

    JavaScript

    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import reportWebVitals from './reportWebVitals';
      
    // Import downloaded theme
    import './bootstrap.min.css';
      
    ReactDOM.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>,
      document.getElementById('root')
    );
    reportWebVitals();
  6. En la carpeta src cree otra carpeta Componentes y dentro de ella cree un archivo y asígnele el nombre Home.js , será nuestro componente funcional .
  7. Cree un componente funcional en el archivo, como se muestra a continuación. Ahora agregue cualquier componente de arranque en su aplicación react.js y se diseñará de acuerdo con el tema.

    Nombre de archivo- Home.js: 

    JavaScript

    import React from 'react';
    import {Image , Row} from 'react-bootstrap';
      
    const Home =() => {
      
        return (
            <div>
                <h1>Welcome to GeeksforGeeks</h1> 
                <h2>Let's Learn</h2>
      
                {/* aligning the image at the center */}
                <Row className="justify-content-md-center">
                   <Image src=
                          roundedCircle fluid />
                </Row>
            </div>
        )
    }
      
    export default Home
  8. Ahora solo necesitamos importar el componente Home.js en nuestro componente raíz App.js.

    Filename- App.js: elimine las cosas innecesarias de este archivo y agregue el siguiente código.

    JavaScript

    import './App.css';
    // Importing Home component
    import Home from './component/Home';
      
    function App() {
      return (
        <div className="App">
          <Home />
        </div>
      );
    }
      
    export default App;

Inicie el servidor: ejecute el siguiente comando para iniciar el servidor.

npm start

Salida: El tema aplicado es Cyborg (tema oscuro) y aquí está la salida.

Publicación traducida automáticamente

Artículo escrito por aniluom y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *