I am simply trying to understand react components.
I know I am doing something wrong but I dont know what.
I am just trying to get a navbar component to show up on the test page of the Create-React-App Boilerplate.
Here is my Package JSON:
{
"name": "Test_WebSite",
"version": "0.1.0",
"private": true,
"devDependencies": {
"react-scripts": "0.8.4"
},
"dependencies": {
"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-bootstrap": "^0.30.7"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
}
// ...
"eslintConfig": {
"extends": "react-app"
},
}
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Navbar, Nav, NavItem } from 'react-bootstrap';
const MenuBar =({name, Link1, Link2})=>(
<Navbar inverse collapseOnSelect>
<Navbar.Header>
<Navbar.Brand>
<a href="#">{name}</a>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<NavItem eventKey={1} href="#">{Link1}</NavItem>
<NavItem eventKey={2} href="#">{Link2}</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
);
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<div>
<MenuBar name="WTF"/>
</div>
</div>
);
}
}
export default App;
import { Navbar, Nav, NavItem } from 'react-bootstrap'
Failed to compile.
Error in ./src/App.js
Module not found: Syntax/Volumes/Main Drive/Test_WebSite/package.json (directory description file): SyntaxError: Unexpected token } in JSON at position 411
@ ./src/App.js 21:22-48
Here is how I got it to work:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import bootstrap from 'bootstrap/dist/css/bootstrap.css' //<< added this css file
import { Navbar, Nav, NavItem } from 'react-bootstrap';
const MenuBar =({Name, Link1, Link2})=>(
<Navbar inverse collapseOnSelect>
<Navbar.Header>
<Navbar.Brand>
<a href="#">{Name}</a>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<NavItem eventKey={1} href="#">{Link1}</NavItem>
<NavItem eventKey={2} href="#">{Link2}</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
);
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<div>
<MenuBar Name="Am I a Fool" Link1="Foo" Link2="Bar" />
</div>
</div>
);
}
}
export default App;