React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

HTML

<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>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.chem-box {
  display: inline-blox;
  width: 30px;
  height: 30px;
  text-align: center;
  border: 1px solid black;
}

.group {
  display: inline-block;
  width: 32px;
  height: auto;
}

Babel + JSX

// example data format

// https://raw.githubusercontent.com/asturur/periodic-table/master/data.json
/*
[
  {
    "atomicNumber":1,
    "symbol":"H",
    "name":"Hydrogen",
    "atomicMass":"1.00794(4)",
  }
]
*/

const text = [
 
];


class Boxed extends React.Component {
	render() {
    const children = this.props.children;
  	return (<div className="chem-box">
  	  {children}
  	</div>);
  }
}


class Group extends React.Component {
  render() {
  	return <div className="group">
    {this.props.group.map(el => {
      return <Boxed
        key={el.symbol}
      >
        {el.symbol}
      </Boxed>;
    })}
    </div>
  }
}

// props: atomicInfo
class PeriodicTable extends React.Component {
	render() {
    const groups = this.props.atomicInfo.reduce((acc, current) => {
    	if (!acc[current.group]) {
        acc[current.group] = [];
      }
    	acc[current.group].push(current)
      return acc;
    }, []);
    const lanthanid
  	return groups.map((group, index) => {
    	return <Group
        key={`g_${index}`}
        group={group}
      />
    })
  }	
}




fetch('https://raw.githubusercontent.com/asturur/periodic-table/master/data.json')
	.then(response => {
    return response.json();
  })
  .then(response => {  
  	ReactDOM.render(
    	<PeriodicTable
        atomicInfo={response}
      />,
      document.getElementById('container')
    );
  })