ReactJS presentation

ReactJS
The future of web development
Thanh Tuong | ReactJS | 2016
1

2
https://github.com/facebook/react/wiki/Sites-Using-React

History
 In 2010, Facebook released an extension for PHP called XHP.
 XHP help to decrease XSS attack and make front-end much both readable
and understand.
<?php
if ($_POST['name']) {
echo <span>Hello,
{$_POST['name']}</span>;
} else {
echo
<form method="post">
What is your name?<br />
<input type="text" name="name" />
<input type="submit" />
</form>;
}
<?php
if ($_POST['name']) {
?>
<span>Hello, <?=$_POST['name']?>.</span>
<?php
} else {
?>
<form method="post">
What is your name?<br>
<input type="text" name="name">
<input type="submit">
</form>
<?php
}
PHP XHP
3

History (cont)
 But…
 There was a distinct problem with XHP: dynamic web applications require
many roundtrips to the server.
 XHP did not solve this problem.
 A Facebook engineer negotiated with his manager to take XHP into the
browser using JavaScript and was granted six months to try it.
 And…
4
React was
born

ReactJS {purpose}
 Creating user interface(V in MVC model).
 Building large applications with data that changes over time.
5
var React = React.createClass({
render: function() {
return (
<h1> Hello React </h1>
);
}
});
ReactDOM.render(<React />,document.getElementById('container'));
Syntax

ReactJS {contents}
 JSX
 Virtual-DOM
 Props
 PropTypes
 State
 Refs
 LifeCycle
 Flux Architech
 Thinking in React
 Routing
6

ReactJS {contents}
 JSX
 Virtual-DOM
 Props
 PropTypes
 State
 Refs
 LifeCycle
 Flux Architech
 Routing
7

ReactJS {JSX}
 JSX is a JavaScript syntax extension that looks similar to XML.
 Concise and familiar syntax for defining tree structures with attributes.
 Make large trees easier to read than function calls or object literals.
 Can be used in both HTML tags and Components.
8

ReactJS {JSX – examples}
 HTML tags
 var myDivElement = <div className="foo" > HTML tags </div>;
 ReactDOM.render(myDivElement, document.getElementById('example'));
 Component
 var MyComponent = React.createClass({/*...*/});
 var myElement = <MyComponent />;
 ReactDOM.render(myElement, document.getElementById('example'));
9

ReactJS {JSX – examples (cont)}
 HTML tags (without JSX)
 var myDivElement = React.createElement('div', {className: 'foo'}, 'HTML tags');
 ReactDOM.render(myDivElement, document.getElementById('example'));
 Component (without JSX)
var MyComponent = React.createClass({
return (
React.createElement('h1',{}, 'Component without JSX')
);
}
});
var myElement = <MyComponent />;
ReactDOM.render(myElement, document.getElementById('content'));
10

ReactJS {JSX – Transform}
 React JSX transforms from an XML-like syntax into native JavaScript.
 XML elements, attributes and children are transformed into arguments that
are passed to React.createElement.
11
Children

ReactJS {JSX –Namespaced}
 What if you are building a component with many children? For example
Form.
 Namespaced components help to make component simpler and easier.
 You just need to create your "sub-components" as attributes of the main
component.
12

ReactJS {JSX –Namespaced (cont)}
13

ReactJS {contents}
 JSX
 Virtual-DOM
 Props
 PropTypes
 State
 Refs
 LifeCycle
 Flux Architech
 Routing
14

ReactJS {Virtual-DOM}
 Problem:
 DOM manipulation is expensive.
 Re-render all parts of DOM make your app slowly.
 When the component’s state is changed, React will compare with DOM
element to make smallest change.
 Is made by React.createElement().
 https://www.youtube.com/watch?v=BYbgopx44vo
15

ReactJS {Virtual-DOM}
16
Only diff changes
from the two V-DOMs
are applied to real
DOM

ReactJS {Virtual-DOM (cont)}
 1. Backbone.js recontruct
DOM elements marked as
“change”.
 2. Backbone.js recontruct
All DOM elements.
 3. ReactJS recontruct DOM
elements base on calculate the
difference.
17

ReactJS {contents}
 JSX
 Virtual-DOM
 Props
 PropTypes
 State
 Refs
 LifeCycle
 Flux Architech
 Routing
18

ReactJS {props}
 Used to pass parameter from parent to children.
 var HelloReact = React.createClass({
return (
<h1> Hello, {this.props.name} </h1>
);
}
});
ReactDOM.render(<HelloReact name="ReactJS!!!" />, node);
19

ReactJS {contents}
 JSX
 Virtual-DOM
 Props
 PropTypes
 State
 Refs
 LifeCycle
 Flux Architech
 Routing
20

ReactJS {PropTypes}
 For validate the prop’s value input.
 var HelloReact = React.createClass({
propTypes: {
name: React.PropTypes.number
},
return (
<h1> Hello, {this.props.name} </h1>
);
}
});
ReactDOM.render(<HelloReact name="thanh" />, document.getElementById('content'));
21

ReactJS {contents}
 JSX
 Virtual-DOM
 Props
 PropTypes
 State
 Refs
 LifeCycle
 Flux Architech
 Routing
22

ReactJS {state}
 To manage state inside component.
 getInitialState() function: init value for variable.
 setState() function: update new value for variable.
23

ReactJS {state-(cont)}
 When you should use state?
 Respond to user input.
 Server request.
 or the passage of time.
24

ReactJS { props vs state }
Features props state
Can get initial value from
parent Component?
Yes Yes
Can be changed by
parent Component?
Yes No
Can set default values
inside Component?
Yes Yes
Can change inside
Component?
No Yes
Can set initial value for
child Components?
Yes Yes
Can change in child
Components?
Yes No
25

ReactJS {contents}
 JSX
 Virtual-DOM
 Props
 PropTypes
 State
 Refs
 LifeCycle
 Flux Architech
 Routing
26

ReactJS {refs}
 How we make focus to input element after clear data from input element?
 How we can make a search with many criteria ?
 …
27
Refs

ReactJS {refs-(cont)}
28
Type…
Click clear

ReactJS {contents}
 JSX
 Virtual-DOM
 Props
 PropTypes
 State
 Refs
 LifeCycle
 Flux Architech
 Routing
29

ReactJS {LifeCycle}
 Each component has its own lifecycle events.
 Ex:
 If we wanted to make an ajax request on the initial render and fetch some data,
where would we do that?
 If we wanted to run some logic whenever our props changed, how would we do
that?
 …
30
LifeCycle
events

ReactJS {LifeCycle (cont)}
 componentWillMount
 Invoked once (both on the client and server ) before the initial render.
 Good place to make connection to your db service (ex: firebase,...)
 Do not call set state method here.
31

 componentDidMount
 Invoked once, only on the client (not on the server).
 Immediately after the initial rendering occurs.
 It is good place for you to make AJAX request to fetch data for first used.
32

 componentWillReceiveProps
 Invoked when a component is receiving new props.
 This method is not called for the initial render.
 Use this method as a way to react to a prop change before render() is called by
updating the state with setState.
33

 componentWillUnmount
 Invoked immediately before a component is unmounted from the DOM.
 Perform any necessary cleanup in this method(Ex: invalidating timers, clear up
DOM elements were created at componentDidMount)
34
Nothing!!!
http://facebook.github.io/react/docs/component-
specs.html

ReactJS {contents}
 JSX
 Virtual-DOM
 Props
 PropTypes
 State
 Refs
 LifeCycle
 Flux Architech
 Routing
35

ReactJS {Flux}
 Flux is the application architecture.
 Making data changes easy.
 Remove the burden of having a component manage its own state.
 The data is moved to the central called Store.
 If your app doesn’t have and or care about dynamic data, Flux might not
be the best choice.
 Unidirectional data flow.
36

ReactJS {Flux - flow}
37

 Dispatcher
 Is the central hub that manages all data flow in a Flux application.
 Essentially a registry of callbacks into the stores.
38

Dispatcher
Store Store Store Store
39 When an action
creator provides
the dispatcher with
a new action, all
stores in the
application receive
the action via the
callbacks in the
registry.
Broadcast

 Stores
 Stores contain the application state and logic.
 Manage the state of many objects.
 Do not represent a single record of data like ORM models do.
 Store registers itself with the dispatcher and provides it with a callback.
40

 Views
 Typical React component.
 After is mounted, it goes and get its initial state from Store and setup listener.
 When it receives the event from the store, it first requests the new data it needs
via the stores' public getter methods.
 Then, it calls its own setState() method, causing its render() method and the
render() method of all its descendants to run.
41

42

ReactJS {Flux - Implement}
 Flux is just an architect. So, you can design new framework by yourself base
on this architect.
 Many JavaScript libraries help you implement flux like:
 Flux (by Facebook: https://github.com/facebook/flux)
 Reflux(by Mikael Brassman: https://github.com/reflux/refluxjs)
 Redux(by Dan Abramov: https://github.com/reactjs/redux)
 …
43

ReactJS {Flux – source code}
 https://github.com/tylermcginnis/Flux-Todolist
44

ReactJS {contents}
 JSX
 Virtual-DOM
 Props
 PropTypes
 State
 Refs
 LifeCycle
 Flux Architech
 Routing
45

ReactJS { thinking in… }
46
How many
components
should I have?
How can I
break it?

47
1
4
2
2
3
3
5
5 FilterableProductTable: contains the entirety of the example
5 1 4SearchBar: receives all user input
4 ProductTable: displays and filters the data collection based on user input
2 ProductCategoryRow: displays a heading for each category
3 ProductRow: displays a row for each product

48

ReactJS {Routing}
 Make UI consistent with URL.
 https://github.com/reactjs/react-router/blob/latest/docs.
49

ReactJS {references}
 http://tylermcginnis.com/reactjs-tutorial-a-comprehensive-guide-to-
building-apps-with-react/
 https://facebook.github.io/react/docs/getting-started.html
 https://github.com/reactjs/react-router/tree/latest/docs
 http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-
frameworks.html
 https://www.airpair.com/angularjs/posts/angular-vs-react-the-tie-breaker
50

@ThanhTuong
SE at KMS technology
51

ReactJS presentation

More Related Content

What's hot

Similar to ReactJS presentation

Recently uploaded

ReactJS presentation