I am trying to use reactjs/jsx/es6(I'm not sure which one is the right term to use) to create a website that is just a navigation bar with 3 links on it. This is a plain html file that would do the same thing.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React tutorial</title>
<link rel="stylesheet" type="text/css" href="navBar.css">
</head>
<body>
<div id="navBar">
<a link='#About' class="navBarItem">About</a>
<a link='#Publications' class="navBarItem">Publications</a>
<a link='#Contact' class="navBarItem">Contact</a>
</div>
</body>
</html>
This is my html file which includes reactjs and ES6 script embedded. The navigation bar is printed to the screen, but I cannot see any of the links.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React tutorial</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.2/browser.min.js"></script>
<link rel="stylesheet" type="text/css" href="navBar.css">
</head>
<body>
<div id="navBar"></div>
<script type="text/babel">
NavBar = () => {
return (
<div id="navBar">
<NavBarItem link='#About' text='About'/>
<NavBarItem link='#Publications' text='Publications'/>
<NavBarItem link='#Contact' text='Contact'/>
</div>
)
}
NavBarItem = () => {
return (
<a href={this.props.link} class="navBarItem">{this.props.text}</a>
)
}
ReactDOM.render(
<NavBar />,
document.getElementById('navBar')
)
</script>
</body>
</html>
Thank you
navBar.css
.navBarItem {
display: inline-block;
width: 31%;
background: #016241;
font-size: 1.5em;
transition: background 1s;
height: 49px;
line-height: 49px;
white-space: nowrap;
text-decoration: none;
color: #FFFFFF;
}
#navBar {
background: #016241;
position: relative;
width: 100%;
display: flex;
align-items: stretch;
flex-direction: row;
height: 49px;
column-count: 3;
justify-content: space-around;
}
Aucun commentaire:
Enregistrer un commentaire