React Notepad App

Starting point for creating JSFiddles with React. This uses React with Addons.

by justindeal

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react-with-addons.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>

CSS

.note-list {
    border-bottom: solid 1px gray;
}

.note-summary {
    border-top: solid 1px gray;
}

JavaScript 1.7

var notepad = {
    notes: [
        {
            id: 1,
            content: "Hello, world!\nBoring.\nBoring.\nBoring."
        },
        {
            id: 2,
            content: "React is awesome.\nSeriously, it's the greatest."
        },
        {
            id: 3,
            content: "Robots are pretty cool.\nRobots are awesome, until they take over."
        },
        {
            id: 4,
            content: "Monkeys.\nWho doesn't love monkeys?"
        }
    ]
};

var NotesList = React.createClass({
    render: function () {
        var notes = this.props.notepad.notes;
    
        return (
            <div className="note-list">
                {
                    notes.map(function (note) {
                        var title = note.content.substring(0,
                            note.content.indexOf('\n')
                        );
                        title = title || note.content;
                    
                        return (
                            <div key={note.id} className="note-summary">{title}</div>
                        );
                    })
                }
            </div>
        );
    }
});

React.render(
    <NotesList notepad={notepad}/>,
    document.body
);