React.js
for mobile developers?
We built React to solve one problem:
building large applications with data that changes over time.
React - A JavaScript library for building user interfaces
Example
var AdminPanel = React.createClass({
render: function() {
return (
<div />
)
}
});
ReactDOM.render(
<AdminPanel />,
document.getElementById('to-replace')
);Example
var AdminPanel = React.createClass({
render: function() {
return (
<div />
)
}
});
"use strict";
var AdminPanel = React.createClass({
displayName: "AdminPanel",
render: function render() {
return React.createElement("div", null);
}
});ReactDOM.render(
<AdminPanel />,
document.getElementById('to-replace')
);ReactDOM.render(
React.createElement(AdminPanel, null),
document.getElementById('to-replace')
);React(state) = html
Stateful component
var Timer = React.createClass({
getInitialState: function() {
return {secondsElapsed: 0};
},
tick: function() {
this.setState({secondsElapsed: this.state.secondsElapsed + 1});
},
componentDidMount: function() {
this.interval = setInterval(this.tick, 1000);
},
componentWillUnmount: function() {
clearInterval(this.interval);
},
render: function() {
return (
<div>Seconds Elapsed: {this.state.secondsElapsed}</div>
);
}
});
ReactDOM.render(<Timer />, mountNode);Very stateful component
var App = React.createClass({
getInitialState: function() {
return {
user: Parse.User.current(),
alert: null
};
},
updateUser: function() {
this.setState({user: Parse.User.current()});
},
onUserNotLogged: function(alert) {
this.setState({alert: alert});
},
onLogout: function() {
Parse.User.logOut();
this.updateUser();
},
getUsername: function() {
if (this.state.user === null) {
return "";
}
else {
return this.state.user.attributes.username;
}
},
render: function() {
var whenLogged = <AdminPanel onLogout={this.onLogout} user={this.state.user} />;
var whenNotLogged = <LoginForm onSuccess={this.updateUser} onFailure={this.onUserNotLogged} alert={this.state.alert} />;
var app = (this.state.user) ? whenLogged : whenNotLogged;
return (
<div>
<NavBar username={this.getUsername()} onLogout={this.onLogout} />
{app}
</div>
);
}
});
Mobile?
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
} = React;
var Pizza = require('./Pizza');
var CuttingInstruction = require('./CuttingInstruction');
var PeopleCountPicker = require('./PeopleCountPicker');
class FairPizza extends React.Component {
constructor(props) {
super(props);
this.state = { peopleCount: 4 };
this.setPeopleCount = this.setPeopleCount.bind(this);
this.cuttingEdges = this.cuttingEdges.bind(this);
}
setPeopleCount(peopleCount) {
this.setState({ peopleCount: peopleCount });
}
cuttingEdges() {
return this.state.peopleCount * 2;
}
render() {
return (
<View style={styles.app}>
{this.pizza()}
{this.cuttingInstruction()}
{this.peoplePicker()}
</View>
);
}
pizza() {
return (
<View style={styles.pizza}>
<Pizza cuttingEdges={this.cuttingEdges()} />
</View>
);
}
cuttingInstruction() {
return (
<View style={styles.cuttingInstruction}>
<CuttingInstruction
cuttingEdges={this.cuttingEdges()}
peopleCount={this.state.peopleCount}
/>
</View>
);
}
peoplePicker() {
return (
<View style={styles.peoplePickerWrapper}>
<View style={styles.peoplePicker}>
<PeopleCountPicker
peopleCount={this.state.peopleCount}
setPeopleCount={this.setPeopleCount}
/>
</View>
</View>
);
}
}
var styles = StyleSheet.create({
app: {
flex: 1,
backgroundColor: '#C41D47',
},
pizza: {
alignSelf: 'center',
marginTop: 40
},
cuttingInstruction: {
alignSelf: 'center',
padding: 20,
paddingTop: 0
},
peoplePickerWrapper: {
flex: 1,
justifyContent: 'flex-end',
},
peoplePicker: {
height: 95,
overflow: 'hidden',
justifyContent: 'flex-end',
}
});
AppRegistry.registerComponent('FairPizza', () => FairPizza);React.jsfor mobile developers?
By fernandokokocha
