Documente Academic
Documente Profesional
Documente Cultură
React doesn't use templates. Traditionally, web application UIs are built using
templates or HTML directives.
Shared mutable state is the root of all evil.
Alternate is to observe data model
React Canvas adds the ability for React components to render to <canvas> rather
than DOM.
To use React for drawing 2D using WebGL, try react-pixi.
React ART is a JavaScript library for drawing vector graphics using React.
What makes React so powerful?
Virtual DOM
Server rendering
Descriptive warnings
Custom events system
React wraps an imperative API with a declarative one.
ReactNative
Native environment is more powerful.
Native environment is more hostile.
Just like with this.props, consider the this.state object read-only, not
only because it s semantically a bad idea, but because it can act in ways you don
ct.
Properties are a mechanism for the outside world (users of the component) to con
figure
your component. State is your internal data maintenance. So this.props is like p
ublic
properties in object-oriented parlance and this.state is a bag of your private p
roperties.
In React, data flows from owner to owned component through props as discussed ab
ove. This is effectively one-way data binding:
owners bind their owned component's props to some value the owner has computed b
ased on its props or state.
Since this process happens recursively, data changes are automatically reflected
everywhere they are used.
React will optimize DOM mutation for you by using batching and change detection.
Sometimes you really want to have fine-grained control over your performance.
In that case, simply override shouldComponentUpdate() to return false when you w
ant React to skip processing of a subtree.
State
=> |-----------|
| Component | => HTML
State ca
n be changed, properties are all fixed, Component can change their state.
Properties => |-----------|
React.DOM.div
span
h1
h2
table
canvas
text
React.Children
React.Component
statics
states
props
refs
mixins
propTypes
context
contextTypes
childContextTypes
updateComponent
setProps
setState
(ES6)
forceUpdate
(ES6)
replaceState
isReactComponent
isMounted
re referencing has been rendered to the DOM
getDOMNode
t expe
setProps
allows you pass the next set of
props to the component that s in the form of an object.
replaceProps
replaceState
render
every React component must have
a render function
getInitialState
getDefaultProps
mixins
A mixin in the component specifi
cation is an array. A mixin can share the lifecycle events of your component and
you can be assured that the functionality will execute during the proper time d
uring the component s lifecycle.
propTypes
propTypes is an object that you
can add checks for types for each of the props passed to your component. propTyp
es are set based on a React object called React.PropTypes
statics
you can set an object of static
functions within the statics property. Your static functions live in the compone
nt and can be invoked without creating instances of the function.
displayName
displayName is a property that i
s used when you see debugging messages from your React app.
componentWillMount
is a lifecycle event tha
t React uses during the process of taking your component class and rendering it
to your DOM.
componentDidMount
componentWillReceiveProps
This function is invoked every t
ime that there is a prop change, but never on the first render.
shouldComponentUpdate
This function is invoked before
a component renders and each time a change in prop or state is received.
componentWillUpdate
componentDidUpdate
componentWillUnmount
componentWillReceiveProps
JSX is compiled
through the JSX compiler, either at build time or during development in the brow
ser, and
it converts everything to maintainable React JavaScript. What JSX brings is a le
ss verbose
way of doing the same JavaScript that you would be writing anyway.
JSX is designed as an ECMAScript feature and the similarity to XML is only for f
amiliarity.
Babel
Babel is a module that will convert anything you have written using ES6 and make
it compatible
with ECMAScript version 5 (ES5) syntax. Babel will also convert JSX to the appro
priate JavaScript.
React.DOM.
div
React.DOM.* methods are actually
just convenience wrappers around React.createElement().
span
React.PropTypes.array
bool
number
object
string
func
any
array
element
a React element
shape
node
which represents anything that R
eact can render, such as numbers, strings, elements, or an array of those types.
arrayOf
Enforce that the prop is an arra
y of a given type
React.PropTypes.arrayOf( React.P
ropTypes.string )
objectOf
Enforce the prop is an object wi
th values of a certain type
React.PropTypes.objectOf( React.PropType
s.string )
React.addons.Perf
CSSTransitionGroup
TestUtils
LinkedStateMixin
PureRenderMixin
TransitionGroup
React.createClass
React.createElement
React.cloneElement
React.createMixin
React.createFactory
Elements factories
The main use case for fa
ctories is when you decide not to write your application using JSX
React.renderComponent
React.findDOMNode
return the DOM element of the supplied R
eact component or element
React.unmountComponentNode
React.isValidElement
React.render
React.renderToString
server-side rendered version of your React appli
cation
React.renderToStaticMarkup
"measureInfo": {
"1": {
"measureId": 1
}
}
},
"21": {
"widgetId": 21,
"measureInfo": {
"1": {
"measureId":
}
}
},
"22": {
"widgetId": 22,
"measureInfo": {
"1": {
"measureId":
}
}
},
"23": {
"widgetId": 23,
"measureInfo": {
"1": {
"measureId":
}
}
},
"25": {
"widgetId": 25,
"measureInfo": {
"1": {
"measureId":
}
}
}
}
}
{"timestamp":1446540008904,"status":400,"error":"Bad Request","exception":"org.s
pringframework.http.converter.HttpMessageNotReadableException","message":"Could
not read document: Can not deserialize instance of com.fasterxml.jackson.module.
scala.deser.MapBuilderWrapper out of START_ARRAY token\n at [Source: java.io.Pus
hbackInputStream@756225ed; line: 1, column: 62] (through reference chain: com.xa
ctly.insights.scala.beans.DataRequest[\"widgetInfo\"]); nested exception is com.
fasterxml.jackson.databind.JsonMappingException: Can not deserialize instance of
com.fasterxml.jackson.module.scala.deser.MapBuilderWrapper out of START_ARRAY t
oken\n at [Source: java.io.PushbackInputStream@756225ed; line: 1, column: 62] (t
hrough reference chain: com.xactly.insights.scala.beans.DataRequest[\"widgetInfo
\"])","path":"/xinsightsrest/v2/api/data/scorecard"}
{"ticketId":"xinsights","scoreCardId":5,"businessId":1021,"widgetInfo":{"13":{"w
idgetId":13,"measureInfo":{"1":{"measureId":1}}},"14":{"widgetId":14,"measureInf
o":{"1":{"measureId":1}}},"15":{"widgetId":15,"measureInfo":{"1":{"measureId":1}
}},"16":{"widgetId":16,"measureInfo":{"1":{"measureId":1}}},"19":{"widgetId":19,
"measureInfo":{"1":{"measureId":1}}},"21":{"widgetId":21,"measureInfo":{"1":{"me
asureId":1}}},"22":{"widgetId":22,"measureInfo":{"1":{"measureId":1}}},"23":{"wi
dgetId":23,"measureInfo":{"1":{"measureId":1}}},"25":{"widgetId":25,"measureInfo
":{"1":{"measureId":1}}}}}
{
"calStartTime":1420070400000,
"calEndTime":1427760000000,
"ticketId": "abcdef",
"scoreCardId":"5",
"businessId": 1021,
"widgetInfo": {
"13": {
"widgetId": 13,
"measureInfo": {
"1": {
"measureId": 1
}
}
},
"14": {
"widgetId": 14,
"measureInfo": {
"1": {
"measureId": 1
}
}
},
"15": {
"widgetId": 15,
"measureInfo": {
"1": {
"measureId": 1
}
}
},
"16": {
"widgetId": 16,
"measureInfo": {
"1": {
"measureId": 1
}
}
},
"19": {
"widgetId": 19,
"measureInfo": {
"1": {
"measureId": 1
}
}
},
"21": {
"widgetId": 21,
"measureInfo": {
"1": {
"measureId": 1
}
}
},
"22": {
"widgetId": 22,
"measureInfo": {
"1": {
"measureId": 1
}
}
},
"23": {
"widgetId": 23,
"measureInfo": {
"1": {
"measureId": 1
}
}
},
"25": {
"widgetId": 25,
"measureInfo": {
"1": {
"measureId": 1
}
}
}
}
}