I am starting with react and I would like to make simple navigation bar for beginning. I am using component for item in the list of links. Which is used in the component with whole list and than it´s rendered by another component.
This is one item in the list.
import React from 'react';
import ReactDOM from 'react-dom';
export default class NavLi extends React.Component {
render() {
return (
<li className="nav-item active"><a className="nav-link" href={this.props.href}>{this.props.children}</a></li>
);
}
}
Called by this class:
import React from 'react';
import ReactDOM from 'react-dom';
import NavLi from './NavLi';
export default class NavUl extends React.Component {
render() {
return (
<ul className="nav navbar-nav">
<NavLi href="home">Home</NavLi>
<NavLi href="about">About</NavLi>
<NavLi href="contact">Contact</NavLi>
</ul>
);
}
}
And again and again.
import Log from './Log';
import NavUl from './NavUl';
export default class Nav extends React.Component {
render() {
return (
<nav className="navbar navbar-fixed-top navbar-dark bg-inverse">
<div className="container">
<a className="navbar-brand" href="#">ProjectName</a>
<NavUl/>
<Log/>
</div>
</nav>
);
}
}
.
import React from 'react';
import ReactDOM from 'react-dom';
import Nav from './navbar/Nav';
class App extends React.Component {
render() {
return (
<div>
<Nav/>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('react'));
This whole thing is in .html like this: <div id="react"></div>
I am using bootsrtap4 and the problem is, that in every item in the list of navigation bar I can´t see css class at <a></a> when I run the app. Everything worsk fine, but in tags <a></a> are no classess at all after running this app screenshot from browser.
Any advice why this is not working? Thank you.
NavLi