React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

by Wietse De Vries

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="root"></div>

CSS

body {
  background: #369;
}
.block {
  font-size: 50px;
  color: #FFF;
  float: left;
  line-height: 100%;
  text-align: center;
}

Babel + JSX

class Fiddle extends React.Component {
  constructor(props) {
    super(props);
    this.count = 6;
    this.state = {
    	blocks: {},
      fixed: {},
      intervalId: 0,
    }
    this.scramble = this.scramble.bind(this);
  }
  componentDidMount() {
    this.getBlocks(true);
    const intervalId = setInterval(this.scramble, 1000);
    this.setState({ intervalId: intervalId });
  }
  componentWillUnmount() {
     clearInterval(this.state.intervalId);
  }
  checkValue() {
    const { blocks } = this.state;
  	if (blocks[3] === 'w') {
    	return { 3: 'w'}
    }
    if (blocks[4] === 'i') {
    	return { 4: 'i'}
    }
    if (blocks[5] === 'e') {
    	return { 5: 'e'}
    }
    if (blocks[6] === 't') {
    	return { 6: 't'}
    }
    if (blocks[7] === 's') {
    	return { 7: 's'}
    }
    if (blocks[8] === 'e') {
    	return { 8: 'e'}
    }
  	return 0;
  }
  scramble() {
    const { intervalId, blocks, fixed } = this.state;
    const fixedBlock = this.checkValue();
  	if (fixedBlock) {
    	this.setState({
      	fixed: {
        	...fixed,
          fixedBlock,
        }
      })
    	if (Object.values(fixed).length === this.count) {
        clearInterval(intervalId);
      }
    } else {
      this.getBlocks();
    }
  }
  getBlocks(all = false) {
    let blocks = {};
    let nrBlocks = 32*16;
    let possibilities = "abcdefghijklmnopqrstuvwxyz";
    let randomIncrement = Math.floor(Math.random() * Math.floor(10))

    for (let i=0; i < nrBlocks; i += (all ? 1 : randomIncrement)) {
      let randomChar = possibilities.charAt(Math.floor(Math.random() * possibilities.length));
      blocks[i] = randomChar;
    }
    this.setState({ 
      blocks: {
      	...this.state.blocks,
        blocks,
        ...this.state.fixed,
      }
    });
  }

  render() {
    return (
    	<div>
    	  {Object.values(this.state.blocks).map((char, i) => {
        	const width = `${100/32}%`;
          const height = `${100/16}%`;
        	return (
            <div
             ...