Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
'use strict';
var React = require('react-native');
var {
Bundler,
StyleSheet,
Text,
TouchableHighlight,
View,
ScrollView,
TextInput
} = React;
var ChecklistApp = React.createClass({
getInitialState () {
return {
items: [{body: 'sour cream'}]
};
},
renderItems () {
return this.state.items.map((item) => {
return <Text style={styles.item}>{item.body}</Text>;
});
},
handleSubmit (event) {
var item = { body: event.nativeEvent.text };
var items = this.state.items;
items.unshift(item);
this.setState({ items });
},
render() {
return (
<View style={{marginTop: 20}}>
<Text>Checklist</Text>
<TextInput
style={styles.input}
autoFocus={true}
onSubmitEditing={this.handleSubmit}
/>
<View style={styles.list}>
{this.renderItems()}
</View>
</View>
);
}
});
var styles = {
input: {
height: 26,
borderWidth: 0.5,
borderColor: '#0f0f0f',
padding: 4,
fontSize: 13,
},
list: {
top: 0,
bottom: 100,
backgroundColor: '#eeeeee',
},
item: {
padding: 10
}
};
Bundler.registerComponent('ChecklistApp', () => ChecklistApp);
module.exports = ChecklistApp;
@hemanth

This comment has been minimized.

Copy link

commented Jan 31, 2015

Wouldn't it be nice to have a syntax sugar like: getInitialState () => {items: [{body: 'sour cream'}]}

@vjeux

This comment has been minimized.

Copy link

commented Jan 31, 2015

@hemanth: you may be interested in https://github.com/reactjs/react-future where we brainstorm some similar apis

@hemanth

This comment has been minimized.

Copy link

commented Feb 1, 2015

👍

@mschipperheyn

This comment has been minimized.

Copy link

commented Feb 18, 2015

I'm unfamiliar with some of the syntax used. such as { } = React. and function definitions without "function". Is this official javascript syntax? If so, where can I read up on that?

@tsoukw

This comment has been minimized.

Copy link

commented Feb 20, 2015

combine program language and markup language, like javascript syntactic sugar

@Hyra

This comment has been minimized.

Copy link

commented Mar 4, 2015

@mschipperheyn It's ES6 (ECMA script 6) and it's awesome. Go check it out.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.