14. Separation of Concens Components
Components are the building blocks of React Applications
Components are composable
Components are map to equivalent DOM nodes
createClass defines a component
render() renders a component definition into the DOM
Props provide the immutable data for a component
State provides the mutable data for a component
Mixins allow reuse between components
Component
16. What is JSX?
JSX is the default syntax and pre-processor for React.
JSX is optional.
Elements are translated to javascript function calls
Attributes
- Cannot be Javascript Reserved words
- The values can be strings or Javascript expressions
Transformation can be
- Just-in-time (developments)
- Precompiled by react-tools (production)
Child expressions allow dynamic component nesting
<div>
<span className=“hello”>hello {this.props.name}</span>
</div>
25. The History of React
Avoid cross-site scripting attacks(XSS)
Inspired by E4X - openoffice.org에서 사용됨
26. The History of React
https://github.com/facebook/xhp-lib
https://www.facebook.com/notes/facebook-engineering/xhp-a-new-way-to-write-php/294003943919
dynamic web applications require many roundtrips to the server,
and XHP did not solve this problem
Inspired by XHP, E4X
Requirement : client side, XSS, E4X, Speed
http://thenewstack.io/javascripts-history-and-how-it-led-to-reactjs/
33. Virtual DOM
DOM을 조작하는 것은 엄청난 비용이 든다.
Javascript에 DOM과 유사한 작은 object를 만들고 조작하는 건 엄청 빠르다.
DOM 조작을 최소화 할 수 있도록
Virtual DOM을 만들고 꼭 변화 해야 하는 부분만 바꾸는 방식
http://stackoverflow.com/questions/2690352/which-is-better-string-html-generation-or-jquery-dom-element-creation
36. Virtual DOM
1. Data가 변경된다.
2. Virtual DOM을 바꾼다.
3. Virtual DOM에 기존 값과 같다면 Real DOM에 업데이트 하지 않는다.
4. Virtual DOM에 기존 값과 다르다면,
shouldComponentUpdate 를 호출 한 후 true값이 나온다면 update를 시행한다.
React’s diff algorithm : http://calendar.perfplanet.com/2013/diff/
38. Data flow
No framework(pure javascript) :
Any component can communicate with any other component
Backbone.js, Ember.js : Pub-sub (Key-Value Observing)
item.on('change:name', function() { ...
Angular.js : 2-way data binding and $digest loop (Dirty checking)
$scope.name = ...
React : 1-way data flow
43. State
var App = React.createClass({
getInitialState:function(){
return {
txt: 'the state txt',
id: 0
}
},
update: function(e){
this.setState({txt: e.target.value});
},
render:function(){
return (
<div>
<input type="text" onChange={this.update} />
<h1>{this.state.txt}</h1>
</div>
);
}
});
React.render(<App txt="this is the txt prop" />, document.body);
44. State
var App = React.createClass({
getInitialState:function(){
return {
txt: 'the state txt',
id: 0
}
},
update: function(e){
this.setState({txt: e.target.value});
},
render:function(){
return (
<div>
<input type="text" onChange={this.update} />
<h1>{this.state.txt}</h1>
</div>
);
}
});
React.render(<App txt="this is the txt prop" />, document.body);
Read
Update
Create
Event
45. Data flow
Props State
Passed in from Parent
<MyComp foo=“bar” />
this.props read-only
can be defaulted & validated
getDefaultProps
propTypes
Created within component
getInitialState
this.state to read
this.setState() to update
state should be considered private
58. Flux
More of a pattern then a framework
Unidirectional Data Flow - flux pattern
59. Flux
Dispatcher : Callback registry, Store registry, Dependency Manager
Store : Application Store and logic, Domain Driven
Views (Controller Views) - Controller Views listens for events that are broadcast
by the stores and pass the data to the descendants
Actions : Dispatcher method payload data contains an action
Action consists of the actual data and its type
Actions may come also from the server.
63. Relay & GraphQL
but no yet released
https://facebook.github.io/react/blog/2015/03/19/building-the-facebook-news-feed-with-relay.html
http://facebook.github.io/react/blog/2015/02/20/introducing-relay-and-graphql.html
