building user interface with react
TRANSCRIPT
Building User Interface with
React
Design Pattern
Agenda
★ What?
★ Why?
★ First Impressions
★ Fundamentals
★ To Do App.
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
This session is targeted at professional developers
wishing to know/learn React and how to write
components in React?
Target Audience
What?
React is a JavaScript library for building user
interfaces by Facebook and Instagram.
React to solve one problem: building large
applications with data that changes over time
Why?
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>
);
}
});
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>
);
}
});
First Impressions
<div>
<img src={imageSrc} onClick={this.handelClick} />
</div>
You can checkout Demo form:
https://github.com/AmitThakkar/ReactJS-To-Do-App
First Impressions
Fundamentals
1. No Global Listeners.
Fundamentals
1. No Global Listeners.
2. No Controllers.
Fundamentals
1. No Global Listeners.
2. No Controllers.
3. No Directives.
Fundamentals
1. No Global Listeners.
2. No Controllers.
3. No Directives.
4. No Models.
Fundamentals
1. No Global Listeners.
2. No Controllers.
3. No Directives.
4. No Models.
5. No View-Model.
Fundamentals
1. No Global Listeners.
2. No Controllers.
3. No Directives.
4. No Models.
5. No View-Model.
To Do App
You can checkout Demo form:
https://github.com/AmitThakkar/ReactJS-To-Do-App
To Do App
Add To Do Box
Component
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>
);
}
});
To Do App
Add To Do Box
Component
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>
);
}
});
To Do App
Add To Do Box
Component
To Do List
Component
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>
);
}
});
To Do App
Add To Do Box
Component
To Do List
Component
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>
);
}
});
To Do App
Add To Do Box
Component
To Do List
Component
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} />
);
}
});
Question Answer??
