Permalink
Browse files

Step 2 of TODO App with React tutorial - add React and define views w…

…ith React components
  • Loading branch information...
itamaro committed Nov 28, 2015
1 parent a451b32 commit b0d76bc077b8893f8126667f2761688e02c05082
Showing with 187 additions and 32 deletions.
  1. +1 −0 .meteor/packages
  2. +8 −0 .meteor/versions
  3. +30 −0 App.jsx
  4. +13 −0 Task.jsx
  5. +125 −0 simple-todos-react.css
  6. +2 −9 simple-todos-react.html
  7. +0 −23 simple-todos-react.js
  8. +8 −0 simple-todos-react.jsx
@@ -18,3 +18,4 @@ ecmascript # Enable ECMAScript2015+ syntax in app code

autopublish # Publish all data to the clients (for prototyping)
insecure # Allow all DB writes from clients (for prototyping)
react
@@ -12,6 +12,8 @@ caching-compiler@1.0.0
caching-html-compiler@1.0.2
callback-hook@1.0.4
check@1.1.0
coffeescript@1.0.11
cosmos:browserify@0.8.4
ddp@1.2.2
ddp-client@1.2.1
ddp-common@1.2.2
@@ -31,6 +33,7 @@ http@1.1.1
id-map@1.0.4
insecure@1.0.4
jquery@1.11.4
jsx@0.2.3
launch-screen@1.0.4
livedata@1.0.15
logging@1.0.8
@@ -47,6 +50,11 @@ observe-sequence@1.0.7
ordered-dict@1.0.4
promise@0.5.1
random@1.0.5
react@0.14.1_1
react-meteor-data@0.2.3
react-runtime@0.14.1_1
react-runtime-dev@0.14.1
react-runtime-prod@0.14.1
reactive-dict@1.1.3
reactive-var@1.0.6
reload@1.1.4
30 App.jsx
@@ -0,0 +1,30 @@
// App component - represents the whole app
App = React.createClass({
getTasks() {
return [
{ _id: 1, text: "This is task 1" },
{ _id: 2, text: "This is task 2" },
{ _id: 3, text: "This is task 3" }
];
},

renderTasks() {
return this.getTasks().map((task) => {
return <Task key={task._id} task={task} />;
});
},

render() {
return (
<div className="container">
<header>
<h1>Todo List</h1>
</header>

<ul>
{this.renderTasks()}
</ul>
</div>
);
}
});
@@ -0,0 +1,13 @@
// Task component - represents a single todo item
Task = React.createClass({
propTypes: {
// This component gets the task to display through a React prop.
// We can use propTypes to indicate it is required
task: React.PropTypes.object.isRequired
},
render() {
return (
<li>{this.props.task.text}</li>
);
}
});
@@ -1 +1,126 @@
/* CSS declarations go here */
body {
font-family: sans-serif;
background-color: #315481;
background-image: linear-gradient(to bottom, #315481, #918e82 100%);
background-attachment: fixed;

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;

padding: 0;
margin: 0;

font-size: 14px;
}

.container {
max-width: 600px;
margin: 0 auto;
min-height: 100%;
background: white;
}

header {
background: #d2edf4;
background-image: linear-gradient(to bottom, #d0edf5, #e1e5f0 100%);
padding: 20px 15px 15px 15px;
position: relative;
}

#login-buttons {
display: block;
}

h1 {
font-size: 1.5em;
margin: 0;
margin-bottom: 10px;
display: inline-block;
margin-right: 1em;
}

form {
margin-top: 10px;
margin-bottom: -10px;
position: relative;
}

.new-task input {
box-sizing: border-box;
padding: 10px 0;
background: transparent;
border: none;
width: 100%;
padding-right: 80px;
font-size: 1em;
}

.new-task input:focus{
outline: 0;
}

ul {
margin: 0;
padding: 0;
background: white;
}

.delete {
float: right;
font-weight: bold;
background: none;
font-size: 1em;
border: none;
position: relative;
}

li {
position: relative;
list-style: none;
padding: 15px;
border-bottom: #eee solid 1px;
}

li .text {
margin-left: 10px;
}

li.checked {
color: #888;
}

li.checked .text {
text-decoration: line-through;
}

li.private {
background: #eee;
border-color: #ddd;
}

header .hide-completed {
float: right;
}

.toggle-private {
margin-left: 5px;
}

@media (max-width: 600px) {
li {
padding: 12px 15px;
}

.search {
width: 150px;
clear: both;
}

.new-task input {
padding-bottom: 5px;
}
}
@@ -1,14 +1,7 @@
<head>
<title>simple-todos-react</title>
<title>Todo List</title>
</head>

<body>
<h1>Welcome to Meteor!</h1>

{{> hello}}
<div id="render-target"></div>
</body>

<template name="hello">
<button>Click Me</button>
<p>You've pressed the button {{counter}} times.</p>
</template>

This file was deleted.

Oops, something went wrong.
@@ -0,0 +1,8 @@
if (Meteor.isClient) {
// This code is executed on the client only

Meteor.startup(function () {
// Use Meteor.startup to render the component after the page is ready
React.render(<App />, document.getElementById("render-target"));
});
}

0 comments on commit b0d76bc

Please sign in to comment.