React Sandbox

In this example below you will see how to do a React Sandbox with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 08licia, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 08licia ©

Technologies

  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>React Sandbox</title>
  
  
  
  
  
</head>

<body>

  <div id="root">

</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/08licia/react-sandbox-VbKXXz */
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Hello = function (_React$Component) {
  _inherits(Hello, _React$Component);

  function Hello() {
    _classCallCheck(this, Hello);

    return _possibleConstructorReturn(this, (Hello.__proto__ || Object.getPrototypeOf(Hello)).apply(this, arguments));
  }

  _createClass(Hello, [{
    key: 'render',
    value: function render() {
      return React.createElement(
        'h1',
        null,
        'Hello ',
        this.props.name,
        ' !'
      );
    }
  }]);

  return Hello;
}(React.Component);

var SeparatedElement = function (_React$Component2) {
  _inherits(SeparatedElement, _React$Component2);

  function SeparatedElement() {
    _classCallCheck(this, SeparatedElement);

    return _possibleConstructorReturn(this, (SeparatedElement.__proto__ || Object.getPrototypeOf(SeparatedElement)).apply(this, arguments));
  }

  _createClass(SeparatedElement, [{
    key: 'render',
    value: function render() {
      return React.createElement(
        'div',
        null,
        React.createElement('hr', null),
        this.props.children,
        React.createElement('hr', null)
      );
    }
  }]);

  return SeparatedElement;
}(React.Component);

var SeparatedTitle = function (_React$Component3) {
  _inherits(SeparatedTitle, _React$Component3);

  function SeparatedTitle() {
    _classCallCheck(this, SeparatedTitle);

    return _possibleConstructorReturn(this, (SeparatedTitle.__proto__ || Object.getPrototypeOf(SeparatedTitle)).apply(this, arguments));
  }

  _createClass(SeparatedTitle, [{
    key: 'render',
    value: function render() {
      return React.createElement(
        SeparatedElement,
        null,
        React.createElement(
          'h2',
          null,
          this.props.title
        )
      );
    }
  }]);

  return SeparatedTitle;
}(React.Component);

var VolumeForm = function (_React$Component4) {
  _inherits(VolumeForm, _React$Component4);

  function VolumeForm(props) {
    _classCallCheck(this, VolumeForm);

    var _this4 = _possibleConstructorReturn(this, (VolumeForm.__proto__ || Object.getPrototypeOf(VolumeForm)).call(this, props));

    _this4.state = { 'volume': '', 'unit': 'L' };
    _this4.onChangeL = _this4.onChangeL.bind(_this4);
    _this4.onChangeM = _this4.onChangeM.bind(_this4);
    return _this4;
  }

  _createClass(VolumeForm, [{
    key: 'onChangeL',
    value: function onChangeL(volume) {
      this.setState({ 'volume': volume, 'unit': 'L' });
    }
  }, {
    key: 'onChangeM',
    value: function onChangeM(volume) {
      this.setState({ 'volume': volume, 'unit': 'm3' });
    }
  }, {
    key: 'render',
    value: function render() {
      var volume = this.state.volume;
      var unit = this.state.unit;
      var volumeL = unit == 'L' ? volume : volume * 1000;
      var volumeM = unit == 'm3' ? volume : volume / 1000;
      return React.createElement(
        'div',
        null,
        React.createElement(InputVolume, { volume: volumeL, unit: 'L', onChange: this.onChangeL }),
        React.createElement(InputVolume, { volume: volumeM, unit: 'm3', onChange: this.onChangeM })
      );
    }
  }]);

  return VolumeForm;
}(React.Component);

var InputVolume = function (_React$Component5) {
  _inherits(InputVolume, _React$Component5);

  function InputVolume(props) {
    _classCallCheck(this, InputVolume);

    var _this5 = _possibleConstructorReturn(this, (InputVolume.__proto__ || Object.getPrototypeOf(InputVolume)).call(this, props));

    _this5.onChange = _this5.onChange.bind(_this5);
    return _this5;
  }

  _createClass(InputVolume, [{
    key: 'onChange',
    value: function onChange(e) {
      this.props.onChange(e.target.value);
    }
  }, {
    key: 'render',
    value: function render() {
      return React.createElement(
        'fieldset',
        null,
        React.createElement(
          'legend',
          null,
          'Volume in ',
          this.props.unit
        ),
        React.createElement('input', { value: this.props.volume, onChange: this.onChange })
      );
    }
  }]);

  return InputVolume;
}(React.Component);

var SelectionMenu = function (_React$Component6) {
  _inherits(SelectionMenu, _React$Component6);

  function SelectionMenu(props) {
    _classCallCheck(this, SelectionMenu);

    var _this6 = _possibleConstructorReturn(this, (SelectionMenu.__proto__ || Object.getPrototypeOf(SelectionMenu)).call(this, props));

    _this6.state = { value: props.elements[0] };
    _this6.onChange = _this6.onChange.bind(_this6);
    return _this6;
  }

  _createClass(SelectionMenu, [{
    key: 'onChange',
    value: function onChange(event) {
      var newValue = event.target.value;
      this.setState({ value: newValue });
    }
  }, {
    key: 'render',
    value: function render() {
      return React.createElement(
        'form',
        null,
        React.createElement(
          'select',
          { value: this.state.value, onChange: this.onChange },
          this.props.elements.map(function (elem) {
            return React.createElement(
              'option',
              { value: elem },
              elem
            );
          })
        )
      );
    }
  }]);

  return SelectionMenu;
}(React.Component);

var TextArea = function (_React$Component7) {
  _inherits(TextArea, _React$Component7);

  function TextArea(props) {
    _classCallCheck(this, TextArea);

    var _this7 = _possibleConstructorReturn(this, (TextArea.__proto__ || Object.getPrototypeOf(TextArea)).call(this, props));

    _this7.state = { value: '' };
    _this7.onChange = _this7.onChange.bind(_this7);
    return _this7;
  }

  _createClass(TextArea, [{
    key: 'onChange',
    value: function onChange(event) {
      this.setState({ value: event.target.value.toUpperCase() });
    }
  }, {
    key: 'render',
    value: function render() {
      return React.createElement(
        'form',
        null,
        React.createElement(
          'label',
          null,
          'Please enter some text below:'
        ),
        React.createElement('textarea', { value: this.state.value, onChange: this.onChange })
      );
    }
  }]);

  return TextArea;
}(React.Component);

var Liste = function (_React$Component8) {
  _inherits(Liste, _React$Component8);

  function Liste() {
    _classCallCheck(this, Liste);

    return _possibleConstructorReturn(this, (Liste.__proto__ || Object.getPrototypeOf(Liste)).apply(this, arguments));
  }

  _createClass(Liste, [{
    key: 'render',
    value: function render() {
      var elements = this.props.elements;
      var listItems = elements.map(function (elem) {
        return React.createElement(
          'li',
          { key: elem.toString() },
          elem
        );
      });
      return React.createElement(
        'ul',
        null,
        listItems
      );
    }
  }]);

  return Liste;
}(React.Component);

var Welcome = function (_React$Component9) {
  _inherits(Welcome, _React$Component9);

  function Welcome() {
    _classCallCheck(this, Welcome);

    return _possibleConstructorReturn(this, (Welcome.__proto__ || Object.getPrototypeOf(Welcome)).apply(this, arguments));
  }

  _createClass(Welcome, [{
    key: 'render',
    value: function render() {
      return React.createElement(
        'h1',
        null,
        this.props.isLogged ? 'Welcome back !' : 'Please sign in!'
      );
    }
  }]);

  return Welcome;
}(React.Component);

var Clock = function (_React$Component10) {
  _inherits(Clock, _React$Component10);

  function Clock(props) {
    _classCallCheck(this, Clock);

    var _this10 = _possibleConstructorReturn(this, (Clock.__proto__ || Object.getPrototypeOf(Clock)).call(this, props));

    _this10.state = { date: new Date() };
    return _this10;
  }

  _createClass(Clock, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      var _this11 = this;

      this.time = setInterval(function () {
        return _this11.tick();
      }, 1000);
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      clearInterval(this.time);
    }
  }, {
    key: 'tick',
    value: function tick() {
      this.setState({
        date: new Date()
      });
    }
  }, {
    key: 'render',
    value: function render() {
      return React.createElement(
        'p',
        null,
        'Hello ',
        this.props.name,
        ' ! Current time: ',
        this.state.date.toLocaleTimeString()
      );
    }
  }]);

  return Clock;
}(React.Component);

var SwitchingButton = function (_React$Component11) {
  _inherits(SwitchingButton, _React$Component11);

  function SwitchingButton(props) {
    _classCallCheck(this, SwitchingButton);

    var _this12 = _possibleConstructorReturn(this, (SwitchingButton.__proto__ || Object.getPrototypeOf(SwitchingButton)).call(this, props));

    _this12.state = { onoff: true };
    _this12.onclick = _this12.onclick.bind(_this12);
    return _this12;
  }

  _createClass(SwitchingButton, [{
    key: 'onclick',
    value: function onclick() {
      this.setState(function (prevState) {
        return {
          onoff: !prevState.onoff
        };
      });
    }
  }, {
    key: 'render',
    value: function render() {
      return React.createElement(
        'button',
        { onClick: this.onclick },
        this.state.onoff ? 'oui' : 'non'
      );
    }
  }]);

  return SwitchingButton;
}(React.Component);

function App() {
  return React.createElement(
    'div',
    null,
    React.createElement(VolumeForm, null),
    React.createElement(Hello, { name: 'Alicia', surname: 'Bel-L\xE9toile' }),
    React.createElement(Hello, { name: 'Justine', surname: 'Bel-L\xE9toile' }),
    React.createElement(Clock, { name: 'Simone' }),
    React.createElement(Clock, { name: 'Justine' }),
    React.createElement(SwitchingButton, null),
    React.createElement(Welcome, { isLogged: false }),
    React.createElement(Liste, { elements: [1, 2, 3, 7, 45] }),
    React.createElement(SelectionMenu, { elements: ["vanille", "fraise", "chocolat"] }),
    React.createElement(TextArea, null),
    React.createElement(SeparatedTitle, { title: 'Salut nounou !' })
  );
}

var element = React.createElement(Hello, { name: 'Alicia', surname: 'Bel-L\xE9toile' });

ReactDOM.render(React.createElement(App, null), document.getElementById('root'));

Comments