building user interface with react

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??