<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Cuaderno de notas segunda</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script src='https://cdn.rawgit.com/bradleyboy/codepen-react/master/dist/codepen-react-0.1.1.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/0utKast/cuaderno-de-notas-segunda-yNepYe */
.note-list {
border-bottom: solid 1px gray;
}
.note-summary {
border-top: solid 1px gray;
}
/*Downloaded from https://www.codeseek.co/0utKast/cuaderno-de-notas-segunda-yNepYe */
var notepad = {
notes: [
{
id: 1,
content: "¡Hola, mundo! \nUno.\nDos.\nTres."
},
{
id: 2,
content: "React es sorprendente.\nEn serio, es el más grande."
},
{
id: 3,
content: "Los robots son muy divertidos.\nLos Robots son magníficos, hasta que empiezan a pensar por su cuenta."
},
{
id: 4,
content: "Claudio.\nYo Claudio, excelente serie de TV."
}
]
};
var NoteSummary = React.createClass({
render: function () {
var note = this.props.note;
var title = note.content.substring(0,
note.content.indexOf('\n')
);
title = title || note.content;
return (
<div className="note-summary">{title}</div>
);
}
});
var NotesList = React.createClass({
render: function () {
var notes = this.props.notepad.notes;
return (
<div className="note-list">
{
notes.map(function (note) {
return (
<NoteSummary key={note.id} note={note}/>
);
})
}
</div>
);
}
});
React.render(
<NotesList notepad={notepad}/>,
document.body
);