React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

by Lydia Demi

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>
<!DOCTYPE html>

    <title>Boggle Game</title>
    <link rel='stylesheet' type='text/css' href="./index.css">
  <body>
    <div id="container"></div>
    <script src='bundle.js'></script>
  </body>
</html>

CSS

body {
  background: #F57921;
}

tbody, th, td {
  border: 1px solid orange;
  background-color: white;
  padding: 6px;
}

table {
  background-color: #FFCD00;
}

.btn {
  height: 43px;
  width: 45px;
  margin: 3px;
  border: 1px solid black;
  background-color: #FFF;
  border-radius: 8px;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
  padding: 8px;
}

.row {
    display: flex;
    text-align:center;
    flex-direction:row;
    padding: 5px;
}

#container {
  margin: auto;
  float: left;
}

#container img {
  display: block;
  margin: auto;
}

#title {
  float: center;
  max-width: 200px;
}

#board {
 margin: auto;
 height: 400px;
 width: 375px;
 border: 5px solid #FFCA08;
 padding: 15px;
 background: #398BD4;
}

#cw-submit {
  margin: auto;
}

#submit {
  float: right;
}

#scoreboard {
  padding-bottom: 30px;
}

Babel + JSX

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      total: 0,
      color: '#FFF',
      currentWord: '',
      color_white: true,
      data: [],
      board1: [],
      board2: [],
      board3: [],
      board4: [],
      board5: [],
      row1: ["aaafrs","aaeeee","aafirs","adennn","aeeeem"],
      row2: ["aeegmu","aegmnn","afirsy","bjkqxz","ccenst"],
      row3: ["ceiilt","ceilpt", "ceipst","ddhnot","dhhlor"],
      row4: ["dhlnor","dhlnor", "eiiitt","emottt","ensssu"],
      row5: ["fiprsy","gorrvw", "iprrry","nootuw","ooottu"],
    }

    this.clicked = this.clicked.bind(this);
    this.submitWord = this.submitWord.bind(this);
  }

  componentWillMount() {
      let letter1 = '';
      let letter2 = '';
      let letter3 = '';
      let letter4 = '';
      let letter5 = '';

      this.state.row1.forEach(die => {
        letter1 = die[Math.floor(Math.random() * 6)].toUpperCase();
        if (letter1 === 'Q') {
          this.state.board1.push("Qu")
        } else {
          this.state.board1.push(letter1);
        }
      })
      this.state.row2.forEach(die => {
        letter2 = die[Math.floor(Math.random() * 6)].toUpperCase();
        if (letter2 === 'Q') {
          this.state.board2.push("Qu")
        } else {
          this.state.board2.push(letter2);
        }
      })
      this.state.row3.forEach(die => {
        letter3 = die[Math.floor(Math.random() * 6)].toUpperCase();
        if (letter3 === 'Q') {
          this.state.board3.push("Qu")
        } else {
          this.state.board3.push(letter3);
        }
      })
      this.state.row4.forEach(die => {
        letter4 = die[Math.floor(Math.random() * 6)].toUpperCase();
        if (letter4 === 'Q') {
          this.state.board5.push("Qu")
        } else {
          this.state.board4.push(letter4);
        }
      })
      this.state.row5.forEach(die => {
        letter5 = die[Math.floor(Math.random() * 6)].toUpperCase();
        if (letter5 ===...