1. First, we need fresh reactjs setup, and for that, we need to run below commands into out terminal, and also we should have latest node version installed on our system:
npx create-react-app my-awesome-project
cd my-awesome-project
npm start
2. Now we need to run below commands into our project terminal to get bootstrap and related modules into our reactjs application:
npm install [email protected] --save
npm start //For start project again
3. Finally for the main output, we need to add below code into our my-awesome-project/src/App.js file or if you have fresh setup then you can replace my-awesome-project/src/App.js file code with below code:
import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div>
<div class="navbar navbar-default navbar-static-top">
<div class="container bootstrap snippets bootdey">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#/">Grones</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#/">Home</a></li>
<li class="dropdown "><a href="#/" id="drop1" data-toggle="dropdown" class="dropdown-toggle" role="button">Music <b class="caret"></b></a>
<ul role="menu" class="dropdown-menu" aria-labelledby="drop1">
<li role="presentation"><a href="#/" role="menuitem">Bootdey.com</a></li>
<li role="presentation"><a href="#/" role="menuitem">Option 2</a></li>
<li role="presentation"><a href="#/" role="menuitem">Option 3</a></li>
<li role="presentation"><a href="#/" role="menuitem">New Snippets</a></li>
</ul>
</li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</div>
<div class="container bootstrap snippets bootdey">
</div>
</div>
);
}
export default App;
4. Now we need to add below code into our my-awesome-project/src/App.css file :
.open > .dropdown-menu {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
opacity:1;
}
.dropdown-menu {
opacity:.3;
-webkit-transform-origin: top;
transform-origin: top;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-transform: scale(1, 0);
display: block;
transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
}