Skip to content
This repository has been archived by the owner on Feb 18, 2019. It is now read-only.

Commit

Permalink
Update index.js using ES6
Browse files Browse the repository at this point in the history 
Summary:To unify and advocate ES6
Closes facebook#6319

Differential Revision: D3048141

Pulled By: vjeux

fb-gh-sync-id: 114c782480f08125cd90ba4aaaaab01d2b574929
shipit-source-id: 114c782480f08125cd90ba4aaaaab01d2b574929
  • Loading branch information
@sunnylqm
sunnylqm authored and Facebook Github Bot 7 committed Mar 14, 2016
1 parent 872b697 commit e6343a8
Showing 1 changed file with 100 additions and 70 deletions.
170 changes: 100 additions & 70 deletions website/src/react-native/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,38 +48,45 @@ var index = React.createClass({
<Prism>
{`// iOS
var React = require('react-native');
var { TabBarIOS, NavigatorIOS } = React;
import React, {
Component,
TabBarIOS,
NavigatorIOS
} from 'react-native';
var App = React.createClass({
render: function() {
class App extends Component {
render() {
return (
<TabBarIOS>
<TabBarIOS.Item title="React Native" selected={true}>
<NavigatorIOS initialRoute={{ title: 'React Native' }} />
</TabBarIOS.Item>
</TabBarIOS>
);
},
});`}
}
}`}
</Prism>

<Prism>
{`// Android
var React = require('react-native');
var { DrawerLayoutAndroid, ProgressBarAndroid, Text } = React;
import React, {
Component,
DrawerLayoutAndroid,
ProgressBarAndroid,
Text
} from 'react-native';
var App = React.createClass({
render: function() {
class App extends Component {
render() {
return (
<DrawerLayoutAndroid
renderNavigationView={() => <Text>React Native</Text>}>
<ProgressBarAndroid />
</DrawerLayoutAndroid>
);
},
});`}
}
}`}
</Prism>

<h2>Asynchronous Execution</h2>
Expand All @@ -98,20 +105,24 @@ var App = React.createClass({
<Prism>
{`// iOS & Android
var React = require('react-native');
var { ScrollView, TouchableHighlight, Text } = React;
import React, {
Component,
ScrollView,
TouchableHighlight,
Text
} from 'react-native';
var TouchDemo = React.createClass({
render: function() {
class TouchDemo extends Component {
render() {
return (
<ScrollView>
<TouchableHighlight onPress={() => console.log('pressed')}>
<Text>Proper Touch Handling</Text>
</TouchableHighlight>
</ScrollView>
);
},
});`}
}
}`}
</Prism>

<h2>Flexbox and Styling</h2>
Expand All @@ -121,11 +132,16 @@ var TouchDemo = React.createClass({
<Prism>
{`// iOS & Android
var React = require('react-native');
var { Image, StyleSheet, Text, View } = React;
var React, {
Component,
Image,
StyleSheet,
Text,
View
} from 'react-native';
var ReactNative = React.createClass({
render: function() {
class ReactNative extends Component {
render() {
return (
<View style={styles.row}>
<Image
Expand All @@ -142,8 +158,8 @@ var ReactNative = React.createClass({
</View>
</View>
);
},
});
}
}
var styles = StyleSheet.create({
row: { flexDirection: 'row', margin: 40 },
image: { width: 40, height: 40, marginRight: 10 },
Expand All @@ -158,29 +174,32 @@ var styles = StyleSheet.create({
React Native is focused on changing the way view code is written. For the rest, we look to the web for universal standards and polyfill those APIs where appropriate. You can use npm to install JavaScript libraries that work on top of the functionality baked into React Native, such as XMLHttpRequest, window.requestAnimationFrame, and navigator.geolocation. We are working on expanding the available APIs, and are excited for the Open Source community to contribute as well.
</p>
<Prism>
{`// iOS (Android support for geolocation coming)
{`// iOS & Android
var React = require('react-native');
var { Text } = React;
import React, {
Component,
Text
} from 'react-native';
var GeoInfo = React.createClass({
getInitialState: function() {
return { position: 'unknown' };
class GeoInfo extends Component {
constructor(props) {
super(props);
this.state = { position: 'unknown' };
},
componentDidMount: function() {
componentDidMount() {
navigator.geolocation.getCurrentPosition(
(position) => this.setState({position}),
(error) => console.error(error)
);
},
render: function() {
}
render() {
return (
<Text>
Position: {JSON.stringify(this.state.position)}
</Text>
);
},
});`}
}
}`}
</Prism>

<h2>Extensibility</h2>
Expand Down Expand Up @@ -213,24 +232,28 @@ RCT_EXPORT_METHOD(processString:(NSString *)input callback:(RCTResponseSenderBlo
<Prism>
{`// JavaScript
var React = require('react-native');
var { NativeModules, Text } = React;
import React, {
Component,
NativeModules,
Text
} from 'react-native';
var Message = React.createClass({
getInitialState() {
return { text: 'Goodbye World.' };
},
class Message extends Component {
constructor(props) {
super(props);
this.state = { text: 'Goodbye World.' };
}
componentDidMount() {
NativeModules.MyCustomModule.processString(this.state.text, (text) => {
this.setState({text});
});
},
render: function() {
}
render() {
return (
<Text>{this.state.text}</Text>
);
}
});`}
}`}
</Prism>

<h3>Creating iOS views</h3>
Expand Down Expand Up @@ -260,20 +283,22 @@ RCT_EXPORT_VIEW_PROPERTY(myCustomProperty, NSString);
<Prism>
{`// JavaScript
var React = require('react-native');
var { requireNativeComponent } = React;
import React, {
Component,
requireNativeComponent
} from 'react-native';
var NativeMyCustomView = requireNativeComponent('MyCustomView', MyCustomView);
class MyCustomView extends React.Component {
export default class MyCustomView extends Component {
static propTypes = {
myCustomProperty: React.PropTypes.oneOf(['a', 'b']),
};
render() {
return <NativeMyCustomView {...this.props} />;
}
}
MyCustomView.propTypes = {
myCustomProperty: React.PropTypes.oneOf(['a', 'b']),
};
var NativeMyCustomView = requireNativeComponent('MyCustomView', MyCustomView);
module.exports = MyCustomView;`}
`}
</Prism>

<h3>Creating Android modules</h3>
Expand All @@ -300,23 +325,27 @@ public class MyCustomModule extends ReactContextBaseJavaModule {
<Prism>
{`// JavaScript
var React = require('react-native');
var { NativeModules, Text } = React;
var Message = React.createClass({
getInitialState() {
return { text: 'Goodbye World.' };
import React, {
Component,
NativeModules,
Text
} from 'react-native';
class Message extends Component {
constructor(props) {
super(props);
this.state = { text: 'Goodbye World.' };
},
componentDidMount() {
NativeModules.MyCustomModule.processString(this.state.text, (text) => {
this.setState({text});
});
},
render: function() {
}
render() {
return (
<Text>{this.state.text}</Text>
);
}
});
}
`}
</Prism>

Expand Down Expand Up @@ -348,20 +377,21 @@ public class MyCustomViewManager extends SimpleViewManager<MyCustomView> {
<Prism>
{`// JavaScript
var React = require('react-native');
var { requireNativeComponent } = React;
import React, {
Component,
requireNativeComponent
} from 'react-native';
var NativeMyCustomView = requireNativeComponent('MyCustomView', MyCustomView);
class MyCustomView extends React.Component {
export default class MyCustomView extends Component {
static propTypes = {
myCustomProperty: React.PropTypes.oneOf(['a', 'b']),
};
render() {
return <NativeMyCustomView {...this.props} />;
}
}
MyCustomView.propTypes = {
myCustomProperty: React.PropTypes.oneOf(['a', 'b']),
};
var NativeMyCustomView = requireNativeComponent('MyCustomView', MyCustomView);
module.exports = MyCustomView;
`}
</Prism>
</div>
Expand Down

0 comments on commit e6343a8

Please sign in to comment.