React Vanilla
<style>*{ font-family: sans-serif; margin-bottoM: .5em;}</style>
<h3>TODO</h3>
<ul id=todos></ul>
<label>What needs to be done?<br>
<input id=todo onchange="newTodo()"/><br>
</label>
<button id=add onclick="newTodo()">Add #1</button>
<script>
let count = 1
function newTodo() {
if (todo.value.length > 0) {
todos.innerHTML += `<li>${todo.value}</li>`
todo.value = ''
add.innerText = `Add #${++count}`
}}</script>
I don’t really like React… Don’t get me wrong, I don’t mind it and I even kind of like using it – there’s something fun about it… But it’s surprising to me that UI work is still so bulky… I think React and most other UI libraries are overly complex… Every now and then I do evil style vanilla js versions of the React homepage examples as a sort of rebellion 😀 This is the React version of the above snippet:
class TodoApp extends React.Component {
constructor(props) {
super(props);
this.state = { items: [], text: '' };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}render() {
return (
<div>
<h3>TODO</h3>
<TodoList items={this.state.items} />
<form onSubmit={this.handleSubmit}>
<label htmlFor="new-todo">
What needs to be done?</label>
<inputid="new-todo"
onChange={this.handleChange}
value={this.state.text}
/><button>
Add #{this.state.items.length + 1}
</button>
</form>
</div>
);
}handleChange(e) {
this.setState({ text: e.target.value });
}handleSubmit(e) {
e.preventDefault();
if (this.state.text.length === 0) {
return;
}const newItem = {
text: this.state.text,
id: Date.now()
};
this.setState(state => ({
items: state.items.concat(newItem),
text: ''
}));
}}class TodoList extends React.Component {
render() {
return (
<ul>
{this.props.items.map(item => (
<li key={item.id}>{item.text}</li>
))}
</ul>
);
}}root.render(<TodoApp />);
