Not loading Bootstrap Navbar - React - reactjs

Question

Updated, now the problem i'm seeing the navbar with format problems, shouldn't it be taking the CSS properties from bootstrap?
I Commited the project to make it easier: https://github.com/damianaguilarcogan/pfi_front_v4
Image: https://ibb.co/fdFTb4C
i just created a project but the navbar it's not loading, for sure it's a silly mistake but i'm not beeing able to find it.
I created the project, imported bootstrap in the index.html trought css links.
I created the folder components and inside ir navbar.js.
Afterwards I selected a common template from bootstrap navbar and Finally y called it from my app.js.
I don't get to see whats wrong, it should have already worked with this steps.
app.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
import navbar from './components/navbar';
function App() {
return (
<div className="App">
<navbar />
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
navbar.js
import React from 'react';
class navbar extends React.Component {
render() {
return (
<nav className="navbar navbar-toggleable-md navbar-light bg-faded">
<button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<a className="navbar-brand" href="#">Navbar</a>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav mr-auto">
<li className="nav-item active">
<a className="nav-link" href="#">Home <span className="sr-only">(current)</span></a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Link</a>
</li>
<li className="nav-item">
<a className="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form className="form-inline my-2 my-lg-0">
<input className="form-control mr-sm-2" type="text" placeholder="Search"></input>
<button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
)
}
}
export default navbar;
[1]: https://i.stack.imgur.com/zk8Lf.png

Answer 1

React expects components to be named with an uppercase. Try renaming the navbar to Navbar.
class Navbar extends React.Component
<Navbar/>

Answer 2

Changing your navbar to Navbar works. In addition there is a bootstrap wrapper for React that can be useful if you are just starting now. https://react-bootstrap.github.io/