Todo App. A simple way to work with de dom.
We will create a simple form with one text field and a submit button, using the method React.createClass,
so let’s do it :
We have two classes, one for create every task and other for refresh every task on the browser.
We can show items using map function javascript, in this way we can use class A calling class B
Create TODO LIST with React JS
We just generate index.html like this :
|
1
2
3
4
5
6
7
8
9
10
11
|
<html>
<head>
<title>Lista de tareas con React</title>
<script src=“https://fb.me/react-0.13.3.js”></script>
<script src=“https://fb.me/JSXTransformer-0.13.3.js”></script>
</head>
<body>
<div id=“content”></div>
<script type=“text/jsx” src=“form.jsx”></script>
</body>
</html>
|
And after we generate other file called form.jsx.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
//class for create todo list
var TodoList = React.createClass({
render: function()
{
var createItem = function(itemText, index)
{
return <li key={index + itemText}>{itemText}</li>;
};
return <ul>{this.props.items.map(createItem)}</ul>;
}
});
//clase for create the form and items of todo list
var FormApp = React.createClass({
getInitialState: function()
{
return {
text: ”,
items: []
};
},
onChange: function(e)
{
this.setState({text: e.target.value});
},
handleSubmit: function(e)
{
e.preventDefault();
var nextItems = this.state.items.concat([this.state.text]);
var nextText = ”;
this.setState({items: nextItems, text: nextText});
},
render: function()
{
return (
<div>
<h3>React Todo List</h3>
<TodoList items={this.state.items} />
<form onSubmit={this.handleSubmit}>
<input type=“text” onChange={this.onChange} value={this.state.text} />
<button type=“submit”>Add</button>
</form>
</div>
);
}
});
React.render(<FormApp />, document.getElementById(“content”));
|