ReactJs presentation

var foo = ['London', 'Bangalore']

var foo = {
city: "Bangalore",
state: "Karnataka",
country: "India"
}

var foo = <div>Hello World!</div>;

Part 1: Key Points
In ReactJS you can use XML elements like any other objects.

class Dog {
bark() {
console.log('fufh fufh');
}
}
var fluffy = new Dog();
fluffy.bark(); // fufh fufh

var Dog = function() {
this.bark = function() {
console.log('fufh fufh');
}
}
var fluffy = new Dog();
fluffy.bark(); // fufh fufh

var sayHello = function(name){
console.log('Hello ' + name);
}
sayHello('MediaIQ');

var sayHello = (name) => {
}
sayHello('MediaIQ');

Part 2: Key Points
You can write classes in JS (as in Java)
As with JSX it is just a syntactic sugar
At compile time Babel translates it to plain old JS
Arrow functions is a shorthand for writing functions.

ReactDOM.render(<h1>Hello, World!</h1>, document.getElementById('mount'));

var Hello = function() {
return <div>Hello World!</div>;
}
ReactDOM.render(<Hello />, document.getElementById('mount'));

var Hello = () => <div>Hello World!</div>;

Part 3: Key Points
Writing a ReactJS component is as simple as writing a function.
Compare this with AngularJS directive.
In reality ReactJS components are functions.

// Props
var Hello = function(name) {
}
Hello('World!');

// State
var Hello = function(name) {
var greeting = "Hello ";
console.log(greeting + name);
}
Hello('World!');

var Hello = React.createClass({
render: function() {
return <div>Hello World!</div>;
}
});

// Creation ES6 Way
class Hello extends React.Component {
render() {
return <div>Hello
World!</div>;
}
}

There are simply multiple ways to create a
<Component />

class Hello extends React.Component {
render() {
return <div>Hello
{this.props.name}</div>;
}
}
ReactDOM.render(<Hello name="World!" />, document.getElementById('mount'));

class Counter extends React.Component {
state = {
count: 0
}
increment() {
this.setState({
count: this.state.count+1
});
}
render() {
return (
<div>
<button onClick={this.increment.bind(this)}>Click</button> <br /><br />
<div>Count {this.state.count}</div>
</div>
);
}
}
ReactDOM.render(<Counter />, document.getElementById('mount'));

Part 4: Key Points
React Components are just functions.
Props are external to the function.
State is internal to the function.
Calling setState({...}) re-renders the component.
The return type of the function is
JSX

class Count extends React.Component {
render() {
return (
<span>Count {this.props.value}</span>
);
}
}

var Count = (props) => <span>Count {props.value}</span>;

class Counter extends React.Component {
state = {
count: 0
}
increment() {
this.setState({
count: this.state.count+1
});
}
render() {
return (
<div>
<button onClick={this.increment.bind(this)}>Click</button> <br /><br />
<Count value={this.state.count} />
</div>
);
}
}

Part 5: Key Points
React is made up on Components.
Components can be nested.
The component hierarchy is a tree.
Unlike Angular you can create small components.
Try to make your component stateless for more control.

Login form using 3 different technologies

<div>
<label>Username:</label>
<input type="text" id="username" />
<label>Password:</label>
<input type="text" id="password" />
<button id="submit">Login</button>
</div>

<div ng-controller='loginController'>
<input type="text" ng-model="username" />
<input type="text" ng-model="password" />
<button ng-
click="onSubmit()">Login</button>
</div>

app.controller("loginController", function($scope) {
$scope.username = '';
$scope.password = '';
$scope.onSubmit = function() {
$.ajax({
method: 'POST',
body: {
username: $scope.username,
password: $scope.password
}
}).then(successHandler, failureHandler);
}
})

class LoginForm extends React.Component {
usernameChangeHandler(event) { ... }
passwordChangeHandler(event) { ... }
onSubmit() { ... }
render() {
return (
<div>
<input type="text"
onChange={usernameChangeHandler} />
<input type="text"
onChange={passwordChangeHandler} />
<button onClick={onSubmit}>Login</button>
</div>
);
}
}

Key Difference:
No separate template layer.

Part 6: Key Points
React doesn’t have a separate template layer.
Doesn’t follow MVC paradigm.
The strength comes from JS itself.
That’s why react is just ‘V’ in MVC.
Except for View JS can do everything.

Part 7:
Comparison with AngularJS

class AngularDemo extends React.Component {
render() {
var colors = ['red', 'blue', 'green'];
var list = colors.map((color)=><li>{color}</li>);
// even this is not react
return (
<ul>
{list}
</ul>
);
}
}

render() {
const {firstname} = this.props;
var fullname = 'Unknown';
if(firstname === 'sachin')
fullname = 'Sachin Tendulkar';
if (firstname === 'rahul')
fullname = 'Rahul Dravid';
return (
<div>
{fullname}
</div>
);
}
}
ReactDOM.render(<AngularDemo firstname={'rahul'} />, document.getElementById('mount'));

state = {
name: ''
}
render() {
var onChange = (e)=>this.setState({name: e.target.value });
return (
<div>
<input type='text' onChange={onChange} />
<div>{this.state.name}</div>
</div>
);
}
}
ReactDOM.render(<AngularDemo />, document.getElementById('mount'));

Architecture:
A: MVC
R: Non-MVC
Skills:
A: Java Devs
R: Js Developers

Rate your presenter
Will you recommend this presentation?
Write your review here.

ReactJs presentation

Recommended

More Related Content

What's hot (20)

Viewers also liked (8)

Similar to ReactJs presentation (20)

Recently uploaded (20)

ReactJs presentation