Installing required modules:
$ npm install express body-parser express-react-views node-jsx
ReactClass & domElement
var ReactClass = React.createClass({
render: function() {
return (
//<myHtmlElement></myHtmlElement>
//<MyReactComponent />
);
}
});
Passing properties from parents to children
<td style={{border: "1px solid black"}}{this.props.title}</td>
<td style={{border: "1px solid black"}}{this.props.children}</td>
Validate that components are passed with all needed properties by:
propTypes
and React.PropTypes
. Example:
React.createClass({
propTypes: {
name: React.PropTypes.string.isRequired,
id: React.PropTypes.number.isRequired,
alt: React.PropTypes.string
},
/* ... */
);
Define mutable values with this.state
, which is private to each component.
Change state by using this.setState
.
https://facebook.github.io/react/docs/component-api.html
https://facebook.github.io/react/docs/component-specs.html
Define style as variable:
var style = {
tableContent: {
border: "1px solid black"
}
};
<td style={style.tableContent}>
https://facebook.github.io/react/tips/inline-styles.html
React makes use of a key
attribute to keep track of each component in the VirtualDOM. This allows it to update the real DOM as sensibly and infrequently as possible.
<TodoList data = {this.props.data} />
var todo = this.props.data.map(function(obj) {
return <Todo title={obj.title} key={obj.title}>{obj.detail}</Todo>
});
$ npm install browserify reactify
https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html
https://facebook.github.io/react/docs/events.html
https://facebook.github.io/react/docs/forms.html
(same as above)