React at CodePen

index.html

<div id="app"></app>

react-at-codepen.markdown

React at CodePen

An easy way to get started at CodePen with React 0.13 and ES6.

A Pen by garrettmac on CodePen.

License.

script.babel

class App extends React.Component {
  constructor() {
    super();
  }
  
  clicky = () => {
    alert("clicked the button");
  }

  render() {
    return (
      <React.Fragment>
        <p><Button onClick={this.clicky} color="light">Light Button</Button></p>
        <p><Button onClick={this.clicky} color="dark">Dark Button</Button></p>
        <p><Button onClick={this.clicky} color="secondary">Secondary Button</Button></p>
        <p><Button onClick={this.clicky} color="light" disabled={true}>Disabled Button</Button></p>
      </React.Fragment>
    );
  }
}

class Button extends React.Component {
  constructor() {
    super();
  }

  render() {
    const buttonColor = `button--${this.props.color}`;
    return (
      <button
        type="button"
        className={`button ${buttonColor}`}
        disabled={this.props.disabled}
        onClick={this.props.onClick}
      >{this.props.children}</button>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>

style.css

p {
  margin-bottom: 10px;
}

.button {
  background: none;
  border: none;
  transition: all 0.3s ease;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  letter-spacing: 1.4px;
  line-height: 1.4;
  font-size: 14px;
  padding: 1.42rem 1.4rem 1.2rem;
}

.button--light {
  border: 1px solid #000;
  background-color: #fff;
}

.button--light:hover {
  background: #000;
  color: #fff;
  border-color: #000;
}

.button--dark {
  color: #fff;
  border: 1px solid #000;
  background-color: #000;
}

.button--dark:hover {
  color: #000;
  background-color: #fff;
}

.button--secondary {
  color: #fff;
  border: 1px solid #d22030;
  background-color: #d22030;
}

.button--secondary:hover {
  background-color: #ea5a67;
}

.button:disabled {
  color: #494949;
  cursor: not-allowed;
  border-color: #dbdbdb;
  background-color: #dbdbdb;
}

asd