I used bootstrap to create a collapsible navbar when my HTML page was resized past a certain smaller browser width. It worked before I "converted" my website to a React web application. The navbar still collapses to a hamburger button, but the drop down menu no longer works. I read several posts saying that I need to import:
import "../node_modules/jquery/dist/jquery.min.js";
import "../node_modules/bootstrap/dist/js/bootstrap.min.js";
However, when I do this, the page does not load in Chrome at all and the inspector gives these errors which I don't understand. If I comment these import statements out, the page loads fine but the navbar doesn't work as described above. Anyone have any thoughts?
my JS file code:
import React, {PropTypes} from 'react';
import { Link, IndexLink } from 'react-router';
import LoadingDots from './LoadingDots';
import "../../../node_modules/jquery/dist/jquery.min.js";
import "../../../node_modules/bootstrap/dist/js/bootstrap.min.js";
const Header = ({loading}) => {
return (
<nav className="navbar navbar-inverse" id="my-navbar">
<div className="container ">
<div className="navbar-header">
<button type="button" className="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span className="icon-bar"></span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
</button>
<img className="img-responsive navLogo" alt="logo" src={require('../../images/colorMatchLogo75px.jpg')}></img>
</div>
<div className="collapse navbar-collapse" id="navbar-collapse">
<ul className="nav navbar-nav">
<li><Link to="/">Home</Link></li>
<li><Link to="/adoptpet">Adopt A Pet</Link></li>
<li><Link to="/findhome">Find A Home For Your Pet</Link></li>
<li><Link to="/contactvet">Contact Veterinarian</Link></li>
</ul>
<ul className="nav navbar-nav navbar-right">
<li><Link to="/login">Login/Register</Link></li>
</ul>
</div>
</div>
</nav>
);
};
Header.propTypes = {
loading: PropTypes.bool.isRequired
};
export default Header;
Try adding this code in your webpack file. This should resolve your Bootstrap Javascript error.
new webpack.ProvidePlugin({
$: "jquery",
jquery: "jquery",
"window.jQuery": "jquery",
jQuery:"jquery"
})
Now install bootstrap-sass using npm install bootstrap-sass --save and import it in ./lib/main.js like this.
import bootstrap from '../../../node_modules/bootstrap-sass/assets/javascripts/bootstrap.js'
import bootstrapmin from '../../../node_modules/bootstrap-sass/assets/javascripts/bootstrap.min.js'
Now in your routes file where your whole app is rendering import your ./lib/main.js like this.
import React from 'react';
import {render} from 'react-dom';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import javascript from './lib/main.js
render(
<Router history={browserHistory}>
<Route path='/dashboard' component={App}></Route>
</Router>, document.getElementById('app')
)
Related
Navbar.js
import React,{ Component } from "react";
class Navbar extends Component {
state = {};
render() {
return (
<>
<div>
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
<div className="container-fluid">
<a className="navbar-brand" href="#">
Hetazon
</a>
</div>
</nav>
</div>
</>
);
}
}
export default Navbar;
App.js
import './App.css';
import Navbar from './Components/Navbar';
function App() {
return (
<>
<Navbar/>
</>
);
}
export default App;
error is*
ERROR in [eslint]
src\Component\Navbar.js
Line 2:22: 'Component' is not defined no-undef
Search for the keywords to learn more about each error.
I even try class Navbar extends React.Component in line 3 Navbar.js but the same error was received.
Please help me to solve this error,
I tried so much to solve it but I can't...
It seems eslint has problem with it, and your code is ok
you might need eslint-plugin-react package to be installed
I seem to be having an issue displaying the fontawesome icon in my browser. It does show in inspect, but not on my website itself.
Does anyone know how to resolve this issue?
import React, { Fragment, useState} from "react";
import { NavLink } from "react-router-dom";
import "../styles/common/Navbar.css";
const Navbar = () => {
const [showMenu, setShowMenu] = useState(false);
return (
<Fragment>
<nav>
<a href="/">
<h1>AnRa<span>Caribbean</span></h1>
</a>
<div className={showMenu ? "menu mobile-menu" : "menu"}>
<ul>
<li><NavLink to="/">Home</NavLink></li>
<li><NavLink to="/PropertiesForSale">Buy a Property</NavLink></li>
<li><NavLink to="/PropertiesForRent">Rent a Property</NavLink></li>
<li><NavLink to="/About">About</NavLink></li>
<li><NavLink to="/Contact">Contact</NavLink></li>
</ul>
<button className="btn">
<NavLink to="#">Add Property</NavLink>
</button>
</div>
<i className="fa fa-solid fa-bars" onClick={() => setShowMenu(!showMenu)}></i>
</nav>
</Fragment>
);
}
export default Navbar;
Web view
How I have it in css from max-width screen.
.fa-bars{
display: flex;
color: gold;
}
Thank you in advance
downloaded
npm i --save #fortawesome/fontawesome-svg-core
npm install --save #fortawesome/free-solid-svg-icons
Still nothing.
tried deleting nodemodules.
restarted the application.
Nothing seems to work.
Based on Font Awesome docs, it should be used like the following:
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faCoffee } from '#fortawesome/free-solid-svg-icons'
const App = () => {
return (<div><FontAwesomeIcon icon={faCoffee} /></div>)
}
export default App
Did you follow all the steps from the documentation?
The third step is to add the FontAwesomeIcon component and use it the following way:
<FontAwesomeIcon icon={faBars} />
Check the docs about how to use icons
PS: do not forget to import the component and the icon:
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faBars } from '#fortawesome/free-solid-svg-icons';
This is my first time using bootstrap with react and it is not applying the dimensions to my Navbar and Navbar Icon I installed dependencies and used className instead of class and still no affect.
import React, { Component } from "react";
import { Link } from "react-router-dom";
import logo from "../logo.svg";
import 'bootstrap/dist/css/bootstrap.min.css';
export default class Navbar extends Component {
render() {
return (
<nav className="navbar navbar-expand-sm bg-primary navbar-dark px-sm-5">
{/*
https://www.iconfinder.com/icons/1243689/call_phone_icon
Creative Commons (Attribution 3.0 Unported);
https://www.iconfinder.com/Makoto_msk */}
<Link to="/">
<img
src={logo}
alt="store"
className="navbar-brand"/>
</Link>
<ul className=" navbar-nav align-items-center">
<li className="nav-item ml-5">
<Link to="/" className="nav-link">
Products
</Link>
</li>
</ul>
</nav>
);
}
}
NavBar to be created and not huge logo and huge bar.
Are you sure, you have the bootstrap.css added in the document? Here is a working example of your same code https://codesandbox.io/s/0c9iz
Every time I try to use something from react-bootstrap, I get this error. " Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports." My export is there for App.js and is imported in index.js so I don't see what's the issue. If I remove the import Nav statement in app.js and take the nav.link tags out, it runs fine.
App.js
import React, { Component } from 'react';
import './App.css';
import { Nav } from 'react-bootstrap';
class App extends Component {
render() {
return (
<div className="App">
<div class="container">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
</ul>
</div>
</nav>
</div>
<div className="container"> //if I remove this container and the third import statement, it renders with no issues.
<Nav defaultActiveKey="/home" className="flex-column">
<Nav.Link href="/home">Active</Nav.Link>
<Nav.Link eventKey="link-1">Link</Nav.Link>
<Nav.Link eventKey="link-2">Link</Nav.Link>
</Nav>;
</div>
</div>
);
}
}
export default App;
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
I am using pure Bootstrap with Reactjs and I have build a navBar using Bootstrap component but the problem I am facing is with data toggle collapse it is not working.
When I shrink my display view size then the hamburger icon becomes visible but when I click on it then nothing happens. While it works perfect with pure HTML and JS but not working with reactjs.
Here is index.js file
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
Here is app.js
import React, { Component } from 'react';
import './App.css';
import NavBar from './components/navBar/navBar';
class App extends Component {
render() {
return (
<div>
<NavBar />
</div>
);
}
}
export default App;
here is NavBar.js file
import React, { Component } from 'react';
class NavBar extends Component {
render() {
return (
<div>
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<a className="navbar-brand" href="/">Navbar</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNavAltMarkup">
<div className="navbar-nav">
<a className="nav-item nav-link active" href="/">Home <span class="sr-only">(current)</span></a>
<a className="nav-item nav-link" href="/">Features</a>
<a className="nav-item nav-link" href="/">Pricing</a>
<a className="nav-item nav-link" href="/">logout</a>
</div>
</div>
</nav>
</div>
);
}
}
export default NavBar;
This is complete code I have used for navBar.
Bootstrap menu toggle is a JS functionality. It's not a good idea to mix the JS part of Bootstrap with ReactJS, since both libraries manipulate the DOM and it can lead to bigger problems.
I suggest implementing the small functionality you need. Most of the menu toggle is just a class toggle thing.
import React, { Component } from "react";
export default class Menu extends Component {
constructor(props) {
super(props);
this.state = {
menu: false
};
this.toggleMenu = this.toggleMenu.bind(this);
}
toggleMenu(){
this.setState({ menu: !this.state.menu })
}
render() {
const show = (this.state.menu) ? "show" : "" ;
return (
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<a className="navbar-brand" href="/">Navbar</a>
<button className="navbar-toggler" type="button" onClick={ this.toggleMenu }>
<span className="navbar-toggler-icon"></span>
</button>
<div className={"collapse navbar-collapse " + show}>
<div className="navbar-nav">
<a className="nav-item nav-link active" href="/">Home <span class="sr-only">(current)</span></a>
<a className="nav-item nav-link" href="/">Features</a>
<a className="nav-item nav-link" href="/">Pricing</a>
<a className="nav-item nav-link" href="/">logout</a>
</div>
</div>
</nav>
);
}
}
There is an equivalent library called "react-bootstrap" that you can use to style your components the same way as you would use bootstrap https://react-bootstrap.github.io. This way you can follow react and bootstrap best practices without making unnecessary manipulations to do DOM which can sometimes bring unwanted side effects.
Best Solution is the simplest :
<div style={show?{display:"block"}:{display:'none'}} className={"collapse navbar-collapse"}>........</div>
where show is a : const [show, setShow]=React.useState(false);
and on the button: onClick={()=>setShow(!show)}