Todo App using React.js

Developer
Pankaj Parashar
Size
2,487 Kb
Views
28,336
  1. Todo App using React.js Previews
  2. Todo App using React.js HTML Codes
  3. Todo App using React.js CSS Codes

How do I make an todo app using react.js?

What is a todo app using react.js? How do you make a todo app using react.js? This script and codes were developed by Pankaj Parashar on 12 August 2022, Friday.

Todo App using React.js Previews
IQ Test

Todo App using React.js - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Todo App using React.js</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<script src="//fb.me/react-0.12.2.min.js"></script>
<script src="//fb.me/JSXTransformer-0.12.2.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="todo"> <!-- This is where React will work its magic -->
</div>
<script type="text/jsx"> /** @jsx React.DOM */ var TodoBanner = React.createClass({ render: function(){ return ( <h3>TODO ...react.js</h3> ); } }); var TodoList = React.createClass({ render: function() { var createItem = function(itemText) { return ( <TodoListItem>{itemText}</TodoListItem> ); }; return <ul>{this.props.items.map(createItem)}</ul>; } }); var TodoListItem = React.createClass({ render: function(){ return ( <li>{this.props.children}</li> ); } }); var TodoForm = React.createClass({ getInitialState: function() { return {item: ''}; }, handleSubmit: function(e){ e.preventDefault(); this.props.onFormSubmit(this.state.item); this.setState({item: ''}); React.findDOMNode(this.refs.item).focus(); return; }, onChange: function(e){ this.setState({ item: e.target.value }); }, render: function(){ return ( <form onSubmit={this.handleSubmit}> <input type='text' ref='item' onChange={this.onChange} value={this.state.item}/> <input type='submit' value='Add'/> </form> ); } }); var TodoApp = React.createClass({ getInitialState: function() { return {items: ['Todo item #1', 'Todo item #2']}; }, updateItems: function(newItem) { var allItems = this.state.items.concat([newItem]); this.setState({ items: allItems }); }, render: function() { return ( <div> <TodoBanner/> <TodoList items={this.state.items}/> <TodoForm onFormSubmit={this.updateItems}/> </div> ); } }); React.renderComponent(<TodoApp/>, document.getElementById('todo'));
</script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Todo App using React.js - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Cantarell);
body { font-family: 'Cantarell', Lucida Grande, sans-serif; font-size: 100%; line-height: 1.5;
}
h3 { background: #346; text-align: center; color: #fff; padding: 5px 0; border-radius: 0 0 2px 2px;
}
ul { list-style-type: square; margin: 0 0 20px 0; line-height: 1.5;
}
input[type=text] { border: 1px solid #ccc; padding: 7px 5px; width: 150px; font-size: 14px;
}
input[type=submit] { border: 1px solid #ccc; margin-left: 15px; padding: 5px 15px; font-size: 1em;
}
#todo { background-color: whitesmoke; border-radius: 3px; padding: 0 15px 15px; width: 250px; margin: 5em auto; border: 1px solid #ddd;
}
Todo App using React.js - Script Codes
Todo App using React.js - Script Codes
Home Page Home
Developer Pankaj Parashar
Username pankajparashar
Uploaded August 12, 2022
Rating 3
Size 2,487 Kb
Views 28,336
Do you need developer help for Todo App using React.js?

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!

Pankaj Parashar (pankajparashar) Script Codes
Name
Deconstruction of Twitter Logo
Skillset using HTML5 progress bars with CSS3 animations
Webkit Scrollbars
Minimal business card
Selection Co-ordinates
Fantasy Form
Pure CSS Calendar Icon
The Chili Recipe
3D Pie Chart using amCharts.js
Canvas Polar Clock
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!