The document discusses building user interfaces with React, a JavaScript library for building user interfaces created by Facebook. It provides an overview of React fundamentals and walks through building a to-do app as an example, demonstrating components like AddToDoBox, ToDoList, and ToDo to display and manage to-do items. The to-do app allows users to add, remove, and view to-do tasks using React components and managing local component state.

1. Building User Interface with
React
Design Pattern

2. Agenda
★ What?
★ Why?
★ First Impressions
★ Fundamentals
★ To Do App.

3. About Me
Amit Thakkar
Tech Blogger @ CodeChutney.in
JavaScript Lover
Working on MEAN Stack
Twitter: @amit_thakkar01
LinkedIn: linkedin.com/in/amitthakkar01
Facebook: facebook.com/amit.thakkar01

4. This session is targeted at professional developers
wishing to know/learn React and how to write
components in React?
Target Audience

5. What?
React is a JavaScript library for building user
interfaces by Facebook and Instagram.

6. React to solve one problem: building large
applications with data that changes over time
Why?

7. First Impressions
var HappySadIcon = React.createClass({
getInitialState: function () {
return {isSad: true};
},
handelClick: function () {
this.setState({isSad: !this.state.isSad});
},
render: function () {
var imageSrc = this.state.isSad ? './images/sad.png' : './images/happy.png';
return (
<div>
<img src={imageSrc} onClick={this.handelClick} />
</div>
);
}
});

8. First Impressions
var HappySadIcon = React.createClass({
getInitialState: function () {
return {isSad: true};
},
handelClick: function () {
this.setState({isSad: !this.state.isSad});
},
render: function () {
var imageSrc = this.state.isSad ? './images/sad.png' : './images/happy.png';
return (
<div>
<img src={imageSrc} onClick={this.handelClick} />
</div>
);
}
});

9. First Impressions
<div>
<img src={imageSrc} onClick={this.handelClick} />
</div>

10. You can checkout Demo form:
https://github.com/AmitThakkar/ReactJS-To-Do-App

11. First Impressions

12. Fundamentals
1. No Global Listeners.

13. Fundamentals
1. No Global Listeners.
2. No Controllers.

14. Fundamentals
1. No Global Listeners.
2. No Controllers.
3. No Directives.

15. Fundamentals
1. No Global Listeners.
2. No Controllers.
3. No Directives.
4. No Models.

16. Fundamentals
1. No Global Listeners.
2. No Controllers.
3. No Directives.
4. No Models.
5. No View-Model.

17. Fundamentals
1. No Global Listeners.
2. No Controllers.
3. No Directives.
4. No Models.
5. No View-Model.

18. To Do App

19. You can checkout Demo form:
https://github.com/AmitThakkar/ReactJS-To-Do-App

20. To Do App
Add To Do Box
Component

21. To Do App
Add To Do Box
Component
var AddToDoBox = React.createClass({
getInitialState: function () {
return {todos: []};
},
addTask: function (task) {
var todos = this.state.todos;
var newToDos = todos.concat([task]);
this.setState({todos: newToDos});
},
removeTask: function (index) {
var todos = this.state.todos;
todos.splice(index, 1);
this.setState({todos: todos});
},
render: function () {
return (
<div>
<NewToDoBox addTask={this.addTask} />
<ToDoList todos={this.state.todos} removeTask={this.removeTask} />
</div>
);
}
});

22. To Do App
Add To Do Box
Component

23. To Do App
Add To Do Box
Component
var NewToDoBox = React.createClass({
addTask: function (e) {
e.preventDefault();
var todo = this.refs.todo.getDOMNode().value.trim();
if (!todo) {
return;
}
this.props.addTask(todo);
this.refs.todo.getDOMNode().value = '';
},
render: function () {
return (
<div className='newToDoBox'>
<span>Add New Task: </span>
<input className='todoInputBox' type="text" ref="todo" />
<input type="button" value="Add" onClick={this.addTask}
/>
</div>
);
}
});

24. To Do App
Add To Do Box
Component
To Do List
Component

25. To Do App
Add To Do Box
Component
To Do List
Component
var ToDoList = React.createClass({
removeTask: function (index) {
this.props.removeTask(index);
},
render: function () {
var that = this;
var todoNodes = this.props.todos.map(function (todo, index)
{
return (
<ToDo index={index} task={todo}
removeTask={that.removeTask} />
);
});
return (
<div>
<h4>To Do List: </h4>
{todoNodes}
</div>
);
}
});

26. To Do App
Add To Do Box
Component
To Do List
Component

27. To Do App
Add To Do Box
Component
To Do List
Component
var ToDo = React.createClass({
removeTask: function () {
this.props.removeTask(this.props.index);
},
render: function () {
return (
<div>
<div className='todoTask'>
<span
className='todoIndex'>{this.props.index +
1}.</span>
<span
className='todoText'>{this.props.task}</span
>
<RightClickIcon
removeTask={this.removeTask} />
</div>
<div className="clear"></div>
</div>
);
}
});

28. To Do App
Add To Do Box
Component
To Do List
Component

29. To Do App
Add To Do Box
Component
To Do List
Component
var RightClickIcon = React.createClass({
render: function () {
return (
<img className='rightClick'
src="./images/greenCheck.png"
onClick={this.props.removeTask} />
);
}
});

30. Question Answer??