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=
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.