React Class Component Example

index.html

<div id="root"></div>

react-class-component-example.markdown

React Class Component Example

This component is a React.Component in the Class structure, and includes some of the basic scaffolding for that, like a constructor with date, and a click handler for a form element that changes state.

A Pen by CodePen on CodePen.

License.

script.babel

// to do... proptypes? error handling?

class Card extends React.Component {
  
  constructor(props) {
    super(props)
    this.state = { 
      darkMode: true
    }
    this.handleChange = this.handleChange.bind(this);
  }
  
  handleChange(event) {
    this.setState({ darkMode: !this.state.darkMode });
  }
  
  componentWillMount() {
    // could do something like pull state from API
  }
  
  componentDidMount() {
  }
  
  componentWillUnmount() {
  }
  
  componentDidUpdate() {
  }
  
  render() {
    const { title } = this.props;
    let modeClass = this.state.darkMode ? "dark-mode" : "light-mode";
    let checked = this.state.darkMode ? "checked" : "unchecked";
    
    return <div className={`box content ${modeClass}`}>
      <h1>{title}</h1>
      <p>I was built with a Class component extending React.Component.</p>
      <label className="checkbox">
        <input 
          type="checkbox" 
          defaultChecked={checked} 
          onChange={this.handleChange} />
        {' '}Dark Mode
      </label>
    </div>;
  }
  
}

const el = document.querySelector("#root");
ReactDOM.render(<Card title='Example Component' />, el);

scripts

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

style.scss

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
}

.box {
  width: 300px;
  
  h1 {
    font-size: 20px;
  }
  
  &.dark-mode {
    background: black;
    color: #bbb;
    
    h1 {
      color: white;
    }
    
    .checkbox:hover {
      color: white;
    }
  }
  
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" rel="stylesheet" />