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

More Related Content

ReactJs presentation