How to convert this bootstrap to react bootstrap - reactjs

Question

I am having a website which was created using bootstrap. now i am migrating my project to react. So, I was trying to use react-bootstrap. can someone help me to translate this Nav bar code written in bootstrap to react-bootstrap. I have tried changing class to className but it didnt work.
<nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light" id="ftco-navbar">
<div class="container">
<a class="navbar-brand" href="/index"><img src="{% static 'lab/images/logos/newlogo.png' %}" /></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ftco-nav"
aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="oi oi-menu"></span> Menu
</button>
<div class="collapse navbar-collapse" id="ftco-nav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active"><a href="/index" class="nav-link"
onMouseOver="this.style.color='#A41034'" onmouseout="this.style.color='black'"
style="text-transform: capitalize;">Home</a></li>
<li class="nav-item active"><a href="/research" class="nav-link"
onMouseOver="this.style.color='#A41034'" onmouseout="this.style.color='black'"
style="text-transform: capitalize;">Research</a></li>
<li class="nav-item active"><a href="/publications" class="nav-link"
onMouseOver="this.style.color='#A41034'" onmouseout="this.style.color='black'"
style="text-transform: capitalize;">Publications</a></li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="/team" id="navbarDropdown" role="button"
onMouseOver="this.style.color='#A41034'" onmouseout="this.style.color='black'"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
style="text-transform: capitalize;">
People
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/pi" onMouseOver="this.style.color='#A41034'"
onmouseout="this.style.color='black'">Principal Investigators</a>
<a class="dropdown-item" href="/researchers"
onMouseOver="this.style.color='#A41034'"
onmouseout="this.style.color='black'">Senior Scientists</a>
<a class="dropdown-item" href="/phd_students"
onMouseOver="this.style.color='#A41034'" onmouseout="this.style.color='black'">PhD/Masters
Students</a>
<a class="dropdown-item" href="/students" onMouseOver="this.style.color='#A41034'"
onmouseout="this.style.color='black'">Research Trainees</a>
<a class="dropdown-item" href="/alumni" onMouseOver="this.style.color='#A41034'"
onmouseout="this.style.color='black'">Alumni</a>
</div>
</li>
<li class="nav-item active"><a href="/contact" class="nav-link"
onMouseOver="this.style.color='#A41034'" onmouseout="this.style.color='black'"
style="text-transform: capitalize;">Projects</a></li>
<li class="nav-item active"><a href="/joinus" class="nav-link"
onMouseOver="this.style.color='#A41034'" onmouseout="this.style.color='black'"
style="text-transform: capitalize;">Join
Us</a></li>
</ul>
</div>
</div>
</nav>

Answer 1

program the react extension class to render as React components then program the react bootstrap in another file exporting the navbar CSS as props to app return, make sure you import bootstrap

Answer 2

Can you please make sure you include bootstrap CDN or install bootstrap properly?
And also make sure you import bootstrap.
According to your code, it should work.