<repo_name>huangcheng/todo<file_sep>/src/app/todo.component.jsx
import React from 'react';

/*
 *  Paper component
 */
class Paper extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div className="layer paper">
                <TodoListControls />
                <TodoList { ...this.props }/>
                <TodoListPager />
            </div>
        );
    }
}


/*
 *  Shadow component
 */
class Shadow extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        let clsName = "layer shadow";
        clsName += '-' + this.props.id;
        return (
            <div className={ clsName }></div>
        );
    }
}


/*
 *  To-do list controls component
 */
class TodoListControls extends React.Component {
    render() {
        return (
            <div className="controls">
                <Checkbox />
                <Separator />
                <ControlContent />
            </div>
        );
    }
}


/*
 *  To-do list component
 */
class TodoList extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        let items = [];
        this.props.data.map(function(item) {
            items.push(<TodoItem key={ item.id } todo={ item } />);
        });

        return (
            <div className="list">
                { items }
            </div>
        );
    }
}


/*
 *  To-do component
 */
class TodoItem extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div className="todo">
                <Checkbox />
                <Separator />
                <TodoContent todo={ this.props.todo } />
            </div>
        );
    }
}


/*
 *  Pager component.
 */
class TodoListPager extends React.Component {
    render() {
        return(
            <div className="pager">
                <Checkbox />
                <Separator />
                <PagerContent />
            </div>
        );
    }
}


/*
 *  Checkbox component
 */
class Checkbox extends React.Component {
    render() {
        return(
            <div className="checkbox">
                <input type="checkbox" />
            </div>
        );
    }
}


/*
 *  Separator component
 */
class Separator extends React.Component {
    render() {
        return(
            <span className="separator"></span>
        );
    }
}


/*
 *  Content component for control panel.
 */
class ControlContent extends React.Component {
    render() {
        return(
            <div className="content">
                <div className="control add">
                    <i className="icon"></i>
                    <span className="tip">Add</span>
                </div>
                <div classNameName="control trash">
                    <i className="icon"></i>
                    <span className="tip">Trash</span>
                </div>
                <div className="control setting">
                    <i className="icon"></i>
                    <span className="tip">Setting</span>
                </div>
            </div>
        );
    }
}


/*
 *  Content component for pager panel.
 */
class PagerContent extends React.Component {
    render() {
        return(
            <div className="content">
                <span className="button prev"></span>
                <span className="button next"></span>
            </div>
        );
    }
}


/*
 *  Content component for to-do list item.
 */
class TodoContent extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return(
            <p className="content">{ this.props.todo.content } </p>
        );
    }
}


export default class Todo extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        var shadows = [];
        for(let i = 1; i <= this.props.shadowCount; ++i) {
            shadows.push(<Shadow key={i} id={i} />);
        }
        return (
            <div className="todo-list">
                <Paper data={ this.props.data }/>
                { shadows }
            </div>
        );
    }
}<file_sep>/README.md
# Todo List

[![devDependency Status](https://david-dm.org/huangcheng/todo/dev-status.svg)](https://david-dm.org/huangcheng/todo#info=devDependencies) [![Build Status](https://travis-ci.org/huangcheng/todo.svg?branch=master)](https://travis-ci.org/huangcheng/todo)

## Introduction

A simple todo list built upon ***React.js***



## Usage

### Run a live demo

``` shell
gulp develop
```

### Build

``` shell
gulp build
```

### Todo

- [x] Constructing basic UI elements.
- [ ] Storing & fetching data from ***Web SQL Database***.
- [ ] Achieving multiple pages. 
- [ ] Achieving page switch effect.



## Acknowledgement

Thanks for [<NAME>](https://dribbble.com/facugonzalez)'s [degin](https://dribbble.com/shots/240035-Simple-to-do-Freebie)<file_sep>/gulpfile.js
/*
 *   Load gulp and its plugins.
 */
const gulp = require('gulp');
const less = require('gulp-less');
const copy = require('gulp-copy');
const autoprefix = new (require('less-plugin-autoprefix'))({ browsers: ["last 2 versions"] });


/*
 *   Load utilities.
 */
const webpack = require('webpack-stream');
const browserSync = require('browser-sync').create();


/*
 *  Prevent a faulty task from crashing the server.
 */
function preventCrash (error) {
    console.log(error.toString());
    this.emit('end');
}


/*
 *  Serve files under dist directory.
 */
gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: "dist"
        }
    });
});



gulp.task('webpack', function() {
    return gulp.src('src/app/main.js')
               .pipe(webpack(require('./webpack.config.js')))
               .on('error', preventCrash)
               .pipe(gulp.dest('dist/js'));
});


gulp.task('less', function() {
    return gulp.src('src/less/*.less')
               .pipe(less({
                   plugins: [autoprefix]
               }))
               .on('error', preventCrash)
               .pipe(gulp.dest('dist/css'));
});


gulp.task('serve', ['browser-sync'], function() {
    gulp.watch("dist/*.html").on('change', browserSync.reload);
    gulp.watch("dist/js/*.js").on('change', browserSync.reload);
    gulp.watch("dist/css/*.css").on('change', browserSync.reload);
});


gulp.task('watch', function() {
    gulp.watch('src/**/*.less', ['less']);
    gulp.watch(['src/**/*.js', 'src/**/*.jsx'], ['webpack']);
    gulp.watch('src/**/*.html', ['html']);
    gulp.watch('src/images/*.*', ['images']);
});


gulp.task('html', function() {
    return gulp.src('src/**/index.html')
               .pipe(copy('dist/', {
                   prefix: 2
               }));
});


gulp.task('images', function() {
    return gulp.src('src/images/*.*')
                .pipe(copy('dist/images', {
                    prefix: 2
                }));
});


gulp.task('build', ['webpack', 'less', 'html', 'images']);
gulp.task('develop', ['build', 'serve', 'watch']);
gulp.task('default', ['build']);
<file_sep>/src/app/main.js
import React from 'react';
import ReactDOM from 'react-dom';
import Todo from './todo.component.jsx';


const todo = [
    {
        id: 1,
        status: "pending",
        content: "Reading"
    },
    {
        id: 2,
        status: "pending",
        content: "Coding"
    },
    {
        id: 3,
        status: "pending",
        content: "Shopping"
    },
    {
        id: 4,
        status: "pending",
        content: "Doing some homework"
    },
    {
        id: 5,
        status: "pending",
        content: "Playing games"
    }
];

function main() {
    ReactDOM.render(<Todo shadowCount={ 3 } data={ todo }/>, document.getElementById('app'));
}

main();