React TODO
How do I make an react todo?
What is a react todo? How do you make a react todo? This script and codes were developed by Victoria on 02 December 2022, Friday.
React TODO - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>React TODO</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
</head>
<body> <div id="app"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
React TODO - Script Codes JS Codes
"use strict";
var TODO = React.createClass({ displayName: "TODO", getInitialState: function getInitialState() { return { items: [] }; }, handleDelete: function handleDelete(i) { this.setState({ items: this.state.items.filter(function (item, _i) { return _i !== i; }) }); }, deleteAll: function deleteAll() { this.setState({ items: [] }); }, addItem: function addItem(item) { this.setState({ items: this.state.items.concat([item]) }); }, render: function render() { return React.createElement( "div", { className: "todo col-md-4 col-md-offset-4" }, React.createElement(TodoBanner, { count: this.state.items.length, deleteAll: this.deleteAll }), React.createElement(TodoList, { items: this.state.items, handleDelete: this.handleDelete }), React.createElement(TodoForm, { onFormSubmit: this.addItem }) ); }
});
var TodoBanner = React.createClass({ displayName: "TodoBanner", render: function render() { return React.createElement( "h3", null, "TODO list (", this.props.count, ") ", this.props.count ? React.createElement( "button", { onClick: this.props.deleteAll, className: "btn btn-warning" }, "Forget all" ) : false ); }
});
var TodoList = React.createClass({ displayName: "TodoList", render: function render() { var _this = this; return React.createElement( "ul", null, this.props.items.map(function (itemText, i) { return React.createElement(TodoListItem, { deleteClicked: function deleteClicked() { return _this.props.handleDelete(i); }, text: itemText }); }) ); }
});
var TodoListItem = React.createClass({ displayName: "TodoListItem", render: function render() { return React.createElement( "li", null, this.props.text, " ", React.createElement( "button", { onClick: this.props.deleteClicked, className: "btn btn-warning" }, "X" ) ); }
});
var TodoForm = React.createClass({ displayName: "TodoForm", getInitialState: function getInitialState() { return { item: '' }; }, handleSubmit: function handleSubmit(e) { e.preventDefault(); this.props.onFormSubmit(this.state.item); this.setState({ item: '' }); React.findDOMNode(this.refs.item).focus(); }, onChange: function onChange(e) { this.setState({ item: e.target.value }); }, render: function render() { return React.createElement( "div", { className: "todo-form" }, React.createElement( "form", { onSubmit: this.handleSubmit }, React.createElement( "div", { className: "form-group" }, React.createElement( "label", null, "Add todo:" ), React.createElement("input", { type: "text", className: "form-control", ref: "item", onChange: this.onChange, value: this.state.item }), React.createElement("input", { type: "submit", className: "form-control btn btn-success", value: "Do" }) ) ) ); }
});
var Application = React.createClass({ displayName: "Application", getInitialState: function getInitialState() { return { count: 6 }; }, onCountChange: function onCountChange(e) { console.log(e); this.setState({ count: e.target.value }); }, render: function render() { return React.createElement( "div", { className: "application" }, React.createElement(TODO, null) ); }
});
/* * Render the above component into the div#app */
React.render(React.createElement(Application, null), document.getElementById('app'));
Developer | Victoria |
Username | Enieste |
Uploaded | December 02, 2022 |
Rating | 3 |
Size | 3,320 Kb |
Views | 10,120 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
FCC Tic Tac Toe | 5,602 Kb |
FCC Local Weather | 2,076 Kb |
FCC Twitchtv JSON API | 3,446 Kb |
A Pen by Victoria | 2,090 Kb |
Cube calc | 3,851 Kb |
React konva | 4,721 Kb |
FCC Recipe Box | 7,585 Kb |
D3 paths | 9,943 Kb |
FCC JS Calculator | 4,996 Kb |
FCC Random quote machine | 2,085 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Velocity.js custom stagger | Tommiehansen | 4,805 Kb |
Simple CSS loader. | Cabrera | 2,574 Kb |
Segments mouse following | Nosir | 2,909 Kb |
Mobile Sub Menu Concept | Berdejitendra | 2,790 Kb |
Falling Down the Rabbit Hole | Rachelnabors | 4,578 Kb |
Board Site | IndianaLuft | 10,542 Kb |
Default Input, Textareas, Submits, and Buttons in iOS | Demersdesigns | 2,334 Kb |
Transition | Shayhowe | 1,632 Kb |
Blackberry Mock | Zacharyolson | 1,865 Kb |
Css3 loader | Clknap | 2,391 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!