import React, { Component, PropTypes } from 'react';
import Slide from '../slide';
import BulletPoint from '../bullet-point';

require('./app.scss');

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            current: 1,
            total: 2
        }
    }

    render() {
        return (
            <div className="presentation">
                <Slide title="What is ReactJS?" order="1" total={this.state.total} current={this.state.current}>
                    <BulletPoint>Hello this will be a simple slide presentation app when done.</BulletPoint>
                    <BulletPoint>A tag is just a tag</BulletPoint>
                </Slide>
                <Slide title="V is for View" order="2" total={this.state.total} current={this.state.current}>
                    <BulletPoint>Hello this will be a simple slide presentation app when done.</BulletPoint>
                    <BulletPoint>A tag is just a tag</BulletPoint>
                </Slide>
            </div>
        );
    }
}

export default App;

import React, { Component, PropTypes } from 'react';
import Slide from '../slide';
import BulletPoint from '../bullet-point';
import Presentation from '../presentation';

require('./app.scss');

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            current: 3
        }
    }

    render() {
        return (
            <Presentation current={this.state.current}>
                <Slide title="What is ReactJS?">
                    <BulletPoint>Hello this will be a simple slide presentation app when done.</BulletPoint>
                    <BulletPoint>A tag is just a tag</BulletPoint>
                </Slide>
                <Slide title="V is for View">
                    <BulletPoint>Hello this will be a simple slide presentation app when done.</BulletPoint>
                    <BulletPoint>A tag is just a tag</BulletPoint>
                </Slide>
                <Slide title="Why Use ReactJS?">
                    <BulletPoint>Thinking in modularity</BulletPoint>
                    <BulletPoint>Flexiblity</BulletPoint>
                </Slide>
            </Presentation>
        );
    }
}

export default App;

Add presentation to the app component
feature: Add presentation to the app component

This replaces the presentation div with the presentation component.
This also cleans up the state object and simplifies the slides.
