Todo List with react

Developer
Mohammed Fawzy
Size
3,687 Kb
Views
10,120
  1. Todo List with react Previews
  2. Todo List with react HTML Codes
  3. Todo List with react CSS Codes
  4. Todo List with react JS Codes

How do I make an todo list with react?

What is a todo list with react? How do you make a todo list with react? This script and codes were developed by Mohammed Fawzy on 26 January 2023, Thursday.

Todo List with react Previews
IQ Test

Todo List with react - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Todo List with react</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="app" class="app"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Todo List with react - Script Codes CSS Codes

body{ background-color: #66CCFF; font-family: sans-serif;
}
.app { text-align:center; margin-top:40px
}
.input-style{ width:40%; margin:auto; display:inline-block; margin-right:10px
}
.todoListMain .theList { list-style: none; padding-left: 0; width: 255px; margin: 30px auto;
}
.todoListMain .theList li { color: #333; background-color: rgba(255,255,255,.5); padding: 15px; margin-bottom: 15px; border-radius: 5px;
}

Todo List with react - Script Codes JS Codes

"use strict";
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var TodoItems = React.createClass({ displayName: "TodoItems", render: function render() { var todoEntries = this.props.entries; function createTasks(item) { return React.createElement( "li", { key: item.key }, item.text ); } var listItems = todoEntries.map(createTasks); return React.createElement( "ul", { className: "theList" }, listItems ); }
});
var TodoList = function (_React$Component) { _inherits(TodoList, _React$Component); function TodoList(props) { _classCallCheck(this, TodoList); var _this = _possibleConstructorReturn(this, _React$Component.call(this, props)); _this.state = { items: [] }; return _this; } TodoList.prototype.addItem = function addItem(e) { //reference to our state object's items var itemArray = this.state.items; itemArray.push({ text: this._inputElement.value, key: Date.now() }); this.setState({ items: itemArray }); this._inputElement.value = ""; e.preventDefault(); }; TodoList.prototype.render = function render() { var _this2 = this; return React.createElement( "div", { className: "todoListMain" }, React.createElement( "h1", null, " Todo List " ), React.createElement( "div", { className: "header" }, React.createElement( "form", { onSubmit: this.addItem.bind(this) }, React.createElement("input", { ref: function ref(a) { return _this2._inputElement = a; }, className: "input-style form-control", placeholder: "Enter task" }), React.createElement( "button", { className: "btn btn-lg btn-success mybutton", type: "submit" }, "add" ) ) ), React.createElement(TodoItems, { entries: this.state.items }) ); }; return TodoList;
}(React.Component);
var app = document.getElementById('app');
ReactDOM.render(React.createElement(TodoList, null), app);
Todo List with react - Script Codes
Todo List with react - Script Codes
Home Page Home
Developer Mohammed Fawzy
Username mohammed-fawzy
Uploaded January 26, 2023
Rating 3
Size 3,687 Kb
Views 10,120
Do you need developer help for Todo List with react?

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!

Mohammed Fawzy (mohammed-fawzy) Script Codes
Name
Full width to the odds div
Scroll to Top
Tool Box
A Pen by mohammed fawzy
Update text with react
Like button with react
Like button jQuery
JQuery Collapse
React component
Before page loading
Create amazing marketing copy 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!