acmplanner/planner repository overview

git clone https://github.com/ACM-Planner/planner.git
cd planner

npm install

npm start

PORT=5000 npm start

# Change 'NewComponent' to the component name
mkdir src/components/NewComponent
touch src/components/NewComponent/index.js
touch src/components/NewComponent/style.css

// src/components/NewComponent/index.js
import React, { Component, PropTypes } from 'react';
import classnames from 'classnames';

import './style.css';

export default class NewComponent extends Component {

  // Props must not be modified
  static propTypes = {
    name: PropTypes.string,
  }

  static defaultProps = {
    name: 'Patricio',
  }

  // State must be changed using this.setState
  state = {
    message: '',
  }

  onChange = (e) => {
    this.setState({ message: e.target.value });
  }

  render() {
    const { name } = this.props;
    const { message } = this.state;

    return (
      <div className={classnames('NewComponent', this.props.className)} style={this.props.style}>
        <h1 className="NewComponent-title">
          Hi {name}!
        </h1>
        <input type="text" value={message} onChange={this.onChange}>
      </div>
    );
  }
}

npm test