Skip to content

Commit 7131b6a

Browse files
committed
Merge pull request #8 from ericraio/master
Updating README to ES6
2 parents 0c3f2e2 + 453fbd4 commit 7131b6a

File tree

1 file changed

+19
-14
lines changed

1 file changed

+19
-14
lines changed

README.md

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -17,17 +17,19 @@ Usage
1717
-----
1818

1919
```javascript
20-
var Router = require('react-native-simple-router');
20+
import Router, { Component } from 'react-native-simple-router';
2121
```
2222

2323
The basics:
2424
```javascript
2525
// The initial page
26-
var HelloPage = React.createClass({
27-
render: function() {
26+
class HelloPage extends Component {
27+
28+
render() {
2829
return <Text>Hello world!</Text>;
2930
}
30-
});
31+
32+
};
3133

3234
// Your route object should contain at least:
3335
// - The name of the route (which will become the navigation bar title)
@@ -38,13 +40,15 @@ var firstRoute = {
3840
};
3941

4042
// The Router wrapper
41-
var MyApp = React.createClass({
43+
class MyApp extends Component {
44+
4245
render() {
4346
return (
4447
<Router firstRoute={firstRoute} />
45-
)
48+
);
4649
}
47-
});
50+
51+
};
4852

4953
AppRegistry.registerComponent('routerTest', () => MyApp);
5054
```
@@ -54,16 +58,16 @@ Boom. That's it.
5458
From the "Hello world!"-page you can then navigate further to a new component by calling ```this.props.toRoute()```. Let's build upon the HelloPage component in our first example:
5559

5660
```javascript
57-
var HelloPage = React.createClass({
61+
class HelloPage extends Component {
5862

59-
nextPage: function() {
63+
nextPage() {
6064
this.props.toRoute({
6165
name: "A new screen",
6266
component: HelloPage
6367
});
64-
},
68+
}
6569

66-
render: function() {
70+
render() {
6771
return (
6872
<View>
6973
<TouchableHighlight onPress={this.nextPage} underlayColor="transparent">
@@ -72,6 +76,7 @@ var HelloPage = React.createClass({
7276
</View>
7377
);
7478
}
79+
7580
});
7681
```
7782

@@ -132,8 +137,8 @@ Events emitted by the router:
132137

133138
```javascript
134139
this.props.routeEmitter.addListener('didFocus', (name) => {
135-
//Check if name is the current component, and if it is, act on this focus event.
136-
});
140+
//Check if name is the current component, and if it is, act on this focus event.
141+
});
137142
```
138143

139144

@@ -146,7 +151,7 @@ To see more of the router in action, you can check out the Twitter example app t
146151
After that, don't forget to rebuild the app in XCode before you launch the simulator. Then test the app by requiring the TwitterApp component:
147152

148153
```javascript
149-
var TwitterApp = require('./node_modules/react-native-simple-router/twitter-example');
154+
import TwitterApp from './node_modules/react-native-simple-router/twitter-example';
150155

151156
var {
152157
AppRegistry

0 commit comments

Comments
 (0)