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â t expe 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 true if the component that you a
re referencing has been rendered to the DOM
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
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
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": 1 } } }, "22": { "widgetId": 22, "measureInfo": { "1": { "measureId": 1 } } }, "23": { "widgetId": 23, "measureInfo": { "1": { "measureId": 1 } } }, "25": { "widgetId": 25, "measureInfo": { "1": { "measureId": 1 } } } } } {"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 } } } } }
