List React
How do I make an list react?
What is a list react? How do you make a list react? This script and codes were developed by Alexius M Wronka I I on 19 September 2022, Monday.
List React - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>List React</title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700'>
<link rel='stylesheet prefetch' href='https://boomtownroi.github.io/boomstrap/css/boomstrap.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="main">
</div> <script src='https://mfunkie.github.io/ReactCodePen/react-codepen.js'></script>
<script src='https://fb.me/react-0.11.1.js'></script>
<script src='https://fb.me/JSXTransformer-0.10.0.js'></script> <script src="js/index.js"></script>
</body>
</html>
List React - Script Codes CSS Codes
body { padding-top: 15px; background-color: #fcfcfc;
}
.callout { margin: 0;
}
.close,
.mark-done { transition: opacity 0.3s linear, color 0.3s linear;
}
.close:hover { color: #DD0000;
}
.mark-done { opacity: 0.2; margin-right: 30px; cursor: pointer;
}
.mark-done:hover { opacity: 0.5; color: #00DD00;
}
.callout-success { text-decoration: line-through;
}
.todo-form { padding-top: 15px; padding-bottom: 30px;
}
i { font-style: normal !important;
}
List React - Script Codes JS Codes
/**@jsx React.DOM*/
var ToDo = React.createClass({ render: function() { var defaultClass = 'callout'; defaultClass += this.props.done ? ' callout-success' : ' callout-info'; return ( <div className={defaultClass}> <i className='ficon ficon-checkmark mark-done' onClick={this.props.onClickDone}></i> <span>{this.props.value}</span> <i className='close' onClick={this.props.onClickClose}>×</i> </div> ) }
});
var ToDoList = React.createClass({ getInitialState: function() { return { todos: [, { value:'Use ES6', done: false }, { value:'Learn React', done: true }, { value:'Learn JSX', done: true } ] } }, addTodo: function() { var todos = this.state.todos; todos.push({ value: this.state.inputValue, done: false }); this.setState({ todos: todos, inputValue: '' }); // Return false for form return false; }, handleChange: function(e) { this.setState({ inputValue: e.target.value }); }, removeTodo: function(index) { this.state.todos.splice(index, 1); this.setState({ todos: this.state.todos }); }, markTodoDone: function(index) { var todos = this.state.todos; var todo = this.state.todos[index]; todos.splice(index, 1); todo.done = !todo.done; todo.done ? todos.push(todo) : todos.unshift(todo); this.setState({ todos: todos }); }, render: function() { var todos = this.state.todos.map(function(todo, index) { return ( <ToDo key={index} value={todo.value} done={todo.done} onClickClose={this.removeTodo.bind(this, index)} onClickDone={this.markTodoDone.bind(this, index)} /> ); }.bind(this)); return ( <div className='container'> <div className='col-xs-6 col-xs-offset-3'> <h1>My Todo List</h1> {todos} <form className='form-inline todo-form col-xs-8 col-xs-offset-2' role='form' onSubmit={this.addTodo}> <div className='input-group'> <label className='sr-only' htmlFor='todoInput'></label> <input type='text' value={this.state.inputValue} onChange={this.handleChange} className='form-control' placeholder='What do you need to do?' /> <span className='input-group-btn'> <button className='btn btn-default'>Add Todo</button> </span> </div> </form> </div> </div> ); }
});
React.renderComponent(ToDoList(), document.getElementById('main'));
Developer | Alexius M Wronka I I |
Username | awronka |
Uploaded | September 19, 2022 |
Rating | 3 |
Size | 3,155 Kb |
Views | 26,312 |
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 |
A Pen by Alexius M Wronka I I | 2,375 Kb |
React Calc | 6,046 Kb |
Transition button | 4,112 Kb |
D3 Dot Graph | 4,139 Kb |
List React | 3,155 Kb |
React Test | 1,232 Kb |
Animated Drop Down | 3,066 Kb |
Angular 2 forms | 1,244 Kb |
Guage | 3,480 Kb |
Angular Calc | 3,707 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 |
MAD9013 - Float Images with Content | Mad-d | 2,220 Kb |
Animated Slide Hamburger Mobile Menu | BJack | 2,247 Kb |
CSS Donut Charts | Seanstopnik | 2,908 Kb |
Pictos font library from CodePen | Jstam | 3,790 Kb |
Heartbeat | Apetrov | 2,079 Kb |
Glitchy Text Effect | Kescoe | 2,208 Kb |
A Pen by Mike Otis | Mikeotis | 3,185 Kb |
A Pen by Eka Risyana | Risyana | 3,705 Kb |
My Interests | Anshusaxenaarora | 2,015 Kb |
Disable JavaScript execution from console | Ludviglindblom | 2,534 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!