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.
