React TODO

Developer
Size
3,320 Kb
Views
10,120

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 Previews

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'));
React TODO - Script Codes
React TODO - Script Codes
Home Page Home
Developer Victoria
Username Enieste
Uploaded December 02, 2022
Rating 3
Size 3,320 Kb
Views 10,120
Do you need developer help for React TODO?

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!

Victoria (Enieste) Script Codes
Create amazing SEO content with AI!

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!