DT90 DT90 - 1 year ago 80
React JSX Question

Getting a JSON error after importing react-bootsrap components into FB Create-React-App Boilerplate

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"
},
}


Here is my App.js:

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;


After adding
import { Navbar, Nav, NavItem } from 'react-bootstrap'
and creating the Menubar Component I get this error:

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


I dont think it is JSON related though because if I remove everything I added the test page renders correctly.

I have no doubt it is something simple but I ca not see it. Any help would greatly be appresated

Answer Source

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;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download