React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

by Andy Jones

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>
<script src="https://unpkg.com/@material-ui/[email protected]/umd/material-ui.development.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

const {useState, useEffect} = React;
const {
  Button
  , ThemeProvider /* this is a Component */
  , CssBaseline
  , createMuiTheme /* this is a FN */
  , makeStyles /* this is a FN too */
  , Checkbox
  , Radio
  , TextField 
  , FormControl
  , InputLabel
  , Select
  , MenuItem
} = MaterialUI; //de-strucure assignment, to extract the Button Component, from the exposed MaterialUI lib
const muiTheme = createMuiTheme({
  palette: {
    primary: {
      // light: will be calculated from palette.primary.main,
      main: '#ff0000',
      // dark: will be calculated from palette.primary.main,
      // contrastText: will be calculated to contrast with palette.primary.main
    },
    secondary: {
      main: '#0000ff',
      contrastText: '#ffcc00',
    },
    // error: will use the default color
  },
});
const randomProperty = (obj) => {
  var keys = Object.keys(obj);
  const randomKey = keys.length * Math.random() << 0;
  const newObj = {
    key: keys[randomKey],
    value: obj[keys[randomKey]]
  };
  return newObj

};

const dataSet = [{
    "atomicNumber": 1,
    "symbol": "H",
    "name": "Hydrogen",
    "massNumber": 1.008,
    "protons": 1,
    "electrons": 1,
    "neutrons": 0.008000000000000007,
    "electronArrangement": 1
  },
  {
    "atomicNumber": 1,
    "symbol": "H+",
    "name": "Hydrogen ion",
    "massNumber": 1.008,
    "protons": 1,
    "electrons": 0,
    "neutrons": 0.008000000000000007,
    "electronArrangement": 0
  },
  {
    "atomicNumber": 2,
    "symbol": "He",
    "name": "Helium",
    "massNumber": 4.0026,
    "protons": 2,
    "electrons": 2,
    "neutrons": 2.0026,
    "electronArrangement": 2
  },
  {
    "atomicNumber": 3,
    "symbol": "Li",
    "name": "Lithium",
    "massNumber": 7,
    "protons": 3,
    "electrons": 3,
    "neutrons": 4,
    "electronArrangement": "2,1"
  },
  {
    "atomicNumber": 3,
    "symbol": "Li+",
    "name": "Lithium ion",
    "massNumber": 7,
    "protons": 3,
    "electrons": 2,
    "neutrons": 4,
  ...