app.js
```javascript
import React, { Component } from 'react';
import './app.scss';

const Bracket = ({b}) => <span className="bracket">&nbsp;{b}&nbsp;</span>;
const ListWrapper = ({children}) => <section>{children}</section>;
const MapWrapper = ({children}) => <section>{children}</section>;

const NodeKey = ({k}) => (<label>{'"' + k + '"'}:</label>);
const NodeList = ({list}) => {
  return (
    <ListWrapper>
      {
        list.map((val, index) => {
          return <Node key={index} val={val} last={index === list.length - 1}/>;
        })
      }
    </ListWrapper>
  )
}

const NodeMap = (({map}) => {
  let length = Object.keys(map).length;
  let count = 0;
  return (
    <MapWrapper>
      {
        Object.keys(map).map(key => {
          count ++;
          return <Node key={key} k={key} val={map[key]} last={count === length}/>
        })
      }
    </MapWrapper>
  )
})

const Node = ({k, val, last=false}) => {
  let nodes = [];
  if (typeof k != 'undefined') {
    nodes.push(<NodeKey key={0} k={k}/>);
  }
  if (val instanceof Array) {
    nodes.push(<Bracket b={'['}/>);
    nodes.push(<NodeList key={1} list={val}/>);
    nodes.push(<Bracket b={']'}/>);
  } else if(typeof val === 'object') {
    nodes.push(<Bracket b={'{'}/>);
    nodes.push(<NodeMap key={1} map={val}/>);
    nodes.push(<Bracket b={'}'}/>);
  } else {
    nodes.push(<span key={1}>{typeof val === 'string' ? '"' + val + '"': val}</span>);
  }
  return <div>{nodes}{!last&&','}</div>;
}


const JsonViewer = ({json}) => {
  return <section className={'json-viewer'}><Node val={json} last={true}/></section>;
}

```

app.scss
```scss
html {
  font-size: 62.5%;
}

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.json-viewer {
  font-family: Menlo;
  background-color:#6d5826;
  color: #fff;
  text-align: left;
  font-size: 1.2rem;
  line-height: 1.5;

  .bracket {
    color: #dec674;
  }

  label {
    font-weight: bold;
  }

  section {
    padding-left: 2em;
  }
}
```