We can add an instant theme to the ReactJS project by using Bootswatch.
Bootswatch: It is an open-source project, that provides a number of free themes for bootstrap that a web developer can use. It helps the developer to get proper UI without spending hours and energy on styling different elements.
Prerequisite:
To start follow the given link. Scroll down a bit, the themes will appear. Some of the most used themes are cosmos, darkly.
Link:
https://bootswatch.com/
Project structure:Â
Installation of Bootswatch in ReactJS project:
- Click on the preview button to have a wider perspective of the different components like forms, dropdown, and others to see how these components will appear if we use this particular theme.
- After selecting the theme, click on the download button, to download the bootstrap.min.css file.
- Inside your react.js folder open terminal, write command, this will install react-bootstrap in your application.
npm install react-bootstrap bootstrap
- As an example we choose Cyborg or https://bootswatch.com/cyborg/ is the theme that is chosen. Now add the downloaded bootstrap.min.css file, in the src folder.
- Import the bootstrap.min.css file in index.js. Filename- index.js: Here we will just import the bootstrap.min.css. Now the theme is applicable to the entire application.
Javascript
import React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import reportWebVitals from './reportWebVitals';Â
// Import downloaded themeimport './bootstrap.min.css';Â
ReactDOM.render(  <React.StrictMode>    <App />  </React.StrictMode>,  document.getElementById('root'));reportWebVitals(); |
- In the src folder create another folder Components and inside it create a file and name it as Home.js it will be our functional component.
- Create a functional component in the file, like below. Now add any bootstrap component in your react.js application and it will be styled according to the theme.
Filename- Home.js:Â
Javascript
import React from 'react';import {Image , Row} from 'react-bootstrap';Â
const Home = () => {Â
    return (        <div>            <h1>Welcome to neveropen</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 |
- Now we just need to import the Home.js component in our App.js root component.
Filename- App.js: Remove the unnecessary things from this file and add the below code.
Javascript
import './App.css';// Importing Home componentimport Home from './component/Home';Â
function App() {Â Â return (Â Â Â Â <div className="App">Â Â Â Â Â Â <Home />Â Â Â Â </div>Â Â );}Â
export default App; |
Start the Server: Run the below command to start the server.
npm start
Output: The applied theme is Cyborg (dark theme) and here is the output.
