<div id="greeting-container" className="container">
<Greeting name="World"/>
</div>
Becomes:
React.createElement("div",
{
id: "greeting-container",
className: "container"
},
React.createElement(Greeting, {name: "World"})
)<body>
<div id="content"></div>
<script type="text/jsx">
var CounterBox = React.createClass({
render: function () {
return (
<h1>Hello World</h1>
)
}
});
React.render(
<CounterBox />,
document.getElementById('content')
);
</script>
</body>-Local example-
All React elements are in-memory virtual representations of DOM elements. React uses this.state to register changes on certain elements. It then runs a diff between Virtual DOM elements, then pushes the changes to the DOM.
var TimerExample = React.createClass({
// Custom functions as well as basic components here
})Used to create a custom component (similar to an Angular directive) that is used to render elements, as well as contain logic, to the page.
var TimerExample = React.createClass({
getInitialState: function(){
return { elapsed: 0 };
}
})Called before the render function. The object that is returned is assigned to this.state.
var TimerExample = React.createClass({
// Previous functions
componentDidMount: function(){
this.timer = setInterval(this.tick, 50);
}
})Called after the component has been rendered to the page.
var TimerExample = React.createClass({
componentWillUnmount: function(){
clearInterval(this.timer);
}
})
Called before the destroy functions get run on the component.
this.setState({elapsed: new Date() - this.props.start});Used to keep track of variables/objects that are closely coupled with React display elements. Each call forces a component refresh.
var TimerExample = React.createClass({
// Previous functions
render: function() {
// Although we return an entire <p> element, react will smartly update
// only the changed parts, which contain the seconds variable.
return <p>This example was started <b>{seconds} seconds</b> ago.</p>;
}
})Called to render the component to the page.
React.renderComponent(
<TimerExample start={Date.now()} />,
document.body
);Used to initiate the rendering sequence for an element, as well as specifying where the element is getting injected.
<TimerExample start={Date.now()} count='1000'/>Variables passed to the React component are set on the props object that each React component has.
var styles = StyleSheet.create({
container: {
width: 38,
height: 38,
},
title: {
borderWidth: 2,
borderColor: '#00ff00',
},
description: {
fontSize: 18,
margin: 5,
color: '#656565'
}
});<View style={styles.background} />
<View style={[styles.base, styles.background]} />
<View style={[styles.base, this.state.active && styles.active]} />var List = React.createClass({
propTypes: {
style: View.propTypes.style,
elementStyle: View.propTypes.style,
},
render: function() {
return (
<View style={this.props.style}>
{elements.map((element) =>
<View style={[styles.element, this.props.elementStyle]} />
)}
</View>
);
}
});
// ... Render ...
<List style={styles.list} elementStyle={styles.listElement} />var WithLink = React.createClass({
mixins: [React.addons.LinkedStateMixin],
getInitialState: function() {
return {message: 'Hello!'};
},
render: function() {
return <input type="text" valueLink={this.linkState('message')} />;
}
});LinkedStateMixin adds a method to your React component called linkState(), that in turn returns a ReactLink object which contains the current value of the React state and a callback to change it.
var NoLink = React.createClass({
getInitialState: function() {
return {message: 'Hello!'};
},
handleChange: function(event) {
this.setState({message: event.target.value});
},
render: function() {
var message = this.state.message;
return <input type="text" value={message} onChange={this.handleChange} />;
}
});