Planner Web Client

Single Page Application written with React.js.

Development

Clone this repository:

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

Install the dependencies:

npm install

Meanwhile, install Google Chrome extensions for a better development experience (optional):

• React Developer Tools
• Redux DevTools

Start the application on port 3000 with:

npm start

To use another port instead of the default:

PORT=5000 npm start

Create a new Component

We are using ES6 Components, this means we create ES6 classes. To start:

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

Dummy or presentation component

A dummy component is not aware of the global state of Redux. This kind of component are preferred.

// 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>
    );
  }
}

Testing

Currently we are only testing the Express.js server.

npm test

Need help with React or Redux?

React.js tutorial

• https://egghead.io/courses/react-fundamentals

Redux tutorial

• https://egghead.io/courses/getting-started-with-redux
• https://egghead.io/courses/building-react-applications-with-idiomatic-redux