var React = require('React');

var message = React.DOM.div({className: 'hello', onClick: someFunc}, [

React.DOM.span(null, ['Hello World'])
]});
React.renderComponent(message, document.body);
var ActionButton = React.createClass({
render: function(){
return (
<button class="ActionButton" onClick={this.props.onActio
n}>
<span> {this.props.text} </span>
</button>
);
}
});
var Counter = React.createClass({
getInitialState: function() {
return {count: this.props.initialCount};
},
addToCount: function(delta) {
this.setState({count: this.state.count + delta});
},
render: function() {
return (
<div>
<h3>Count: {this.state.count}</h3>
<ActionButton text="+1" onAction={this.addToCoun
t.bind(this, 1)} />
<ActionButton text="-1" onAction={this.addToCoun
t.bind(this, -1)} />
</div>
);
}
});
<Counter initialCount={4} />
React.createClass({
displayName: 'HelloMessage',
render() {
return <div>Hello {this.props.name}</div>;
}
})
http://stackoverflow.com/questions/13433385/rendering-backbone-view-using-docume
nt-fragment-breaks-event-handling
http://www.thomasboyt.com/2013/12/17/using-reactjs-as-a-backbone-view.html
https://github.com/tastejs/todomvc/tree/gh-pages/examples/react-backbone
https://egghead.io/lessons/javascript-intro-to-webpack
Errors:-

React.render is deprecated. Please use ReactDOM.render from require('react-dom')

instead.
Uncaught Error: Invariant Violation: The `style` prop expects a mapping from sty
le properties to values, not a string. For example, style={{marginRight: spacing
+ 'em'}} when using JSX. This DOM node was rendered by `WidgetTitleToolbarView`
.
Uncaught Error: Invariant Violation: ReactCompositeComponent.render(): A valid R
eactComponent must be returned. You may have returned undefined, an array or som
e other invalid object.
Uncaught Error: Invariant Violation: findComponentRoot(..., .1.$DetailedWidgetsV
iew.2.2.0): Unable to find element. This probably means the DOM was unexpectedly
mutated (e.g., by the browser), usually due to forgetting a <tbody> when using
tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <
svg> parent. Try inspecting the child nodes of the element with React ID ``.
Uncaught Error: Invariant Violation: ReactDOM.render(): Invalid component elemen
t. Instead of passing a component class, make sure to instantiate it by passing
it to React.createElement.
Uncaught Error: Invariant Violation: RtBaseWidgetView.render(): A valid ReactCom
ponent must be returned. You may have returned undefined, an array or some other
invalid object.
Uncaught Error: Invariant Violation: Objects are not valid as a React child (fou
nd: object with keys {}). If you meant to render a collection of children, use a
n array instead or wrap the object using createFragment(object) from the React a
dd-ons. Check the render method of `RtBaseWidgetView`.
Uncaught Error: Invariant Violation: setState(...): takes an object of state var
iables to update or a function which returns an object of state variables.
Warning: Unknown DOM property class. Did you mean className?
Warning: Each child in an array or iterator should have a unique "key" prop. Che
ck the render method of `Main`. See https://fb.me/react-warning-keys for more in
formation.
Warning: unmountComponentAtNode(): The node you're attempting to unmount was ren
dered by React and is not a top-level container. You may have accidentally passe
d in a React root node instead of its container.
Warning: WidgetTitleToolbarView.getDOMNode(...) is deprecated. Please use ReactD
OM.findDOMNode(instance) instead.
Warning: WidgetTitleToolbarView.shouldComponentUpdate(): Returned undefined inst
ead of a boolean value. Make sure to return true or false.
https://facebook.github.io/react/blog/2013/06/05/why-react.html
Reactive updates are dead simple.
In order to perform updates as efficiently as possible, we diff the return value
from the previous call to render with the new one,
and generate a minimal set of changes to be applied to the DOM.
The data returned from render is neither a string nor a DOM node -- it's a light
weight description of what the DOM should look like.
We call this process reconciliation. Check out this jsFiddle to see an example o
f reconciliation in action.
Because this re-render is so fast (around 1ms for TodoMVC), the developer doesn'
t need to explicitly specify data bindings. We've found this approach makes it e
asier to build apps.
React opens a world of new possibilities such as server-side rendering, real-tim
e updates, different rendering targets like SVG and canvas.
React Native makes is easy to use the same concepts and technologies to build na
tive mobile experiences on iOS and Android.

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.

Babel is a JavaScript compiler. http://babeljs.io/

http://facebook.github.io/react/blog/2015/12/18/react-components-elements-and-in
stances.html
For a React component, props are the input, and an element tree is the output.
Components Encapsulate Element Trees, Components Can Be Classes or Functions
Only components declared as classes have instances, and you never create them di
rectly: React does that for you.
An element is a plain object describing what you want to appear on the screen in
terms of the DOM nodes or other components.
An instance is what you refer to as this in the component class you write. It is
useful for storing local state and reacting to the lifecycle events.
Functional components don t have instances at all. Class components have instances,
but you never need to create a component instance directly React takes care of this.
We let React create, update, and destroy instances. We describe them with elemen
ts we return from the components, and React takes care of managing the instances
.
React components are the main building blocks when you are structuring a React a
pplication.
React components are created when you extend from the base React.Component
class using ES6. Or, more traditionally, you can use the React.createCla
ss method.
React has the concept of state which is the data your component uses to render i
tself. When state changes, React
rebuilds the UI without you having to do anything. So all you care about after i
nitially
building the UI is updating the data and not worry about UI changes at all. Afte
r all,
your render() method has already provided the blueprint of what the component sh
ould look like.

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

true if the component that you a

alias to React.findDOMNode

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

It will enforce that the prop is

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

This are the view ids :

Summary 1,
ByCalPeriod 2,
ByFiscalPeriod 3,
ByIndustry 4,
Distribution 5,
Role 6,
Hierarchy 7
{
"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":
}
}
},
"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
}
}
}
}
}