React + JSX

Simple React + JSX Learning Project

by Joe Coviello

HTML

<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">

<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>


<div className="wrapper__app">
  <div id="app">
    <!-- Counter App Here -->
  </div>
</div>

CSS

/***************************************************
**       Simple React + JSX Demo App by NytekSF   **
**         -For learning purposes.                **
***************************************************/

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
  color: #333;
}

.appWrap {
  border: 1px solid #333;
  border-radius: 3px;
  padding-top: 3px;
  padding-left: 2px;
  padding-bottom: 1px;
  padding-right: 2px;
  background: #FFF;
  -webkit-box-shadow: 1px 2px 2px rgba(0, 0, 0, .5), 0 0 1px #888888;
  box-shadow: 1px 2px 2px rgba(0, 0, 0, .5), 0 0 1px #888888;
  width: 73%;
  position: relative;
  top: -21px;
  left: -5%;
}

.resetScreen {
  background: green !important;
}

.output__alert {
  color: #F5F5F5;
  background: #FF6666 !important;
}

#app {
  border-radius: 4px;
  padding: 18px;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  background: -webkit-gradient(linear, left top, left bottom, from(white), to(whitesmoke));
  background: -webkit-linear-gradient(white, whitesmoke);
  background: -o-linear-gradient(white, whitesmoke);
  background: linear-gradient(white, whitesmoke);
  width: 289px;
  border: 1px solid #333;
  padding-top: 23px;
  -webkit-box-shadow: 1px -4px 36px -4px #888888, -1px -1px 0px #333333;
  box-shadow: 1px -4px 36px -4px #888888, 1px 1px 0px #333333;
  height: 53px;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.outputClicks {
  font-family: 'Press Start 2P', cursive;
  border: 1px solid #333;
  border-radius: 3px;
  padding: 6px;
  height: 38px;
  float: left;
  background: rgb(198, 198, 174);
  -webkit-box-shadow: inset 0px -2px 10px #b2b292;
  box-shadow: inset 0px -2px 10px #b2b292;
  margin-left: 1px;
  width: 93%;
  -webkit-transition: ease-out .35s;
  -o-transition: ease-out .35s;
  transition: ease-out .35s;
}

.btn {
...

React

class BtnAddOne extends React.Component {
    render() {
        return ( 
        		<div>
                <button className="btn btn__add" onClick={this.props.addToCount}>Add One</button>
            </div> 
        );
    }
};


class BtnSubtractOne extends React.Component {
    render() {
        return (
        		<button className="btn btn__subtract" onClick={this.props.subtractFromCount}>Subtract One</button>
        );
    }
};


class Switch extends React.Component {
    constructor(props) {
    	super(props);
      this.state = {
      	power: "on"
      };
    }
    
		flipSwitch() { 
			// SWITCHS COMPONENTS:
  		const $audio = $("#switchClickSound")[0];
  		$audio.play(); // ACTIVATE CLICK SOUND FX

  		if (this.state.power === "on") {
    		this.setState({ power: "off" });
    		$(".outputClicks").addClass("offMode");
    		$(".outputClicks").css("color", "rgb(175, 175, 146)");
    		$("iframe .wrapper__app, #app, .outputClicks").css("background","#333 !important");
    		$("*").addClass("powerDown");
  			$(".btn").attr("disabled","true");
    		$(".btn").css("cursor","default");
  		} else {
  			this.setState({ power: "on" });
    		$(".outputClicks").removeClass("offMode");
    		$(".outputClicks").css("color","#333");
    		$("*").removeClass("powerDown");
    		$(".btn").removeAttr("disabled");
    		$(".btn").css("cursor","pointer");
  		}
		};
    
    render() {
        return ( 
        		<div>
                <input type="checkbox" name="switch" id="switch" onClick={(this.flipSwitch).bind(this)} />
                <label className="switch" id="lightSwitch" htmlFor="switch"><span id="textSwitch">ON</span></label>

                <audio id="switchClickSound" preload="auto">
                    <source src="https://www.soundjay.com/switch/switch-24.wav">
                    </source>
                </audio>
            </div> 
    		);
    }
}


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