¿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:

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:

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.
Después de seleccionar el tema, haga clic en el botón de descarga para descargar el archivo bootstrap.min.css .
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
```
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 .

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();

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 .

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=
"https://www.geeksforgeeks.org/wp-content/uploads/gfg_200X200-1.png" 
                      roundedCircle fluid />
            </Row>
        </div>
    )
}
  
export default Home

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

JavaScript

JavaScript

JavaScript

Deja una respuesta Cancelar la respuesta