List React

Developer
Alexius M Wronka I I
Size
3,155 Kb
Views
26,312
  1. List React Previews
  2. List React HTML Codes
  3. List React CSS Codes
  4. List React JS Codes

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 Previews
IQ Test

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}>&times;</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'));
List React - Script Codes
List React - Script Codes
Home Page Home
Developer Alexius M Wronka I I
Username awronka
Uploaded September 19, 2022
Rating 3
Size 3,155 Kb
Views 26,312
Do you need developer help for List 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!

Alexius M Wronka I I (awronka) Script Codes
Name
Animated Drop Down
Guage
React Calc
Transition button
D3 Dot Graph
Angular Calc
React Test
A Pen by Alexius M Wronka I I
Angular 2 forms
Create amazing Facebook ads 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!