Skip to content

Instantly share code, notes, and snippets.

@erspark2002
Last active August 30, 2016 03:29
Show Gist options
  • Save erspark2002/7edb9cbd05f18a008fe24bbe801cf58d to your computer and use it in GitHub Desktop.
Save erspark2002/7edb9cbd05f18a008fe24bbe801cf58d to your computer and use it in GitHub Desktop.
Simple React Todo Application using CDN resources for babel/ES6 - VERSION 1 - Single Component
<!DOCTYPE html>
<!--
NOTES:
single component
usees refs
no state
-->
<html>
<head>
<meta charset="utf-8">
<script src="https://fb.me/react-with-addons-15.0.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.4/redux.min.js"></script>
<script src="https://fb.me/react-dom-0.14.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<title>React Template with CDN Resources - JSX</title>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
console.log('start');
const Component = React.Component;
let count = 0;
let todos = [{desc: 'milk', id: count++}, {desc: 'eggs', id: count++}];
let todoList;
class Todo extends Component {
addItem(description) {
todos.push({
desc: description,
id: count++
});
this.forceUpdate();
}
render() {
let input;
return (
<div>
<input ref={el=>(input=el)}/>
<button onClick={()=>this.addItem(input.value)}>Add</button>
<ul ref={el=>{todoList=el}}>
{todos.map(todo => (
<li key={todo.id}>
{todo.desc}
</li>
))}
</ul>
</div>
);
}
};
ReactDOM.render(<Todo />, document.getElementById('app'));
console.log('done');
</script>
</body>
</html>
@erspark2002
Copy link
Author

Version 2 splits the component into multiple components: https://gist.github.com/erspark2002/eaf05f3e064accd9ec54f4b1aed4836a

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment