Skip to content

Commit be38b3b

Browse files
JoelMarceyFacebook Github Bot
authored andcommitted
ES6-ify Text Basics
Summary: Closes #8363 Differential Revision: D3477431 Pulled By: caabernathy fbshipit-source-id: 86ee5efb84e50609fbfae82102b1dc61fea69f05
1 parent 32ab5b6 commit be38b3b

File tree

1 file changed

+18
-16
lines changed

1 file changed

+18
-16
lines changed

docs/Basics-Component-Text.md

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -12,40 +12,42 @@ The most basic component in React Native is the [`Text`](/react-native/docs/text
1212
This example displays the `string` `"Hello World!"` on the device.
1313

1414
```ReactNativeWebPlayer
15-
import React from 'react';
15+
import React, { Component } from 'react';
1616
import { AppRegistry, Text } from 'react-native';
1717
18-
const AwesomeProject = () => {
19-
return (
20-
<Text style={{marginTop: 22}}>Hello World!</Text>
21-
);
18+
class TextBasics extends Component {
19+
render() {
20+
return (
21+
<Text style={{marginTop: 22}}>Hello World!</Text>
22+
);
23+
}
2224
}
2325
2426
// App registration and rendering
25-
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
27+
AppRegistry.registerComponent('AwesomeProject', () => TextBasics);
2628
```
2729

2830
In this slightly more advanced example we will display the `string` `"Hello World"` retrieved from this.state on the device and stored in the `text` variable. The value of the `text` variable is rendered by using `{text}`.
2931

3032
```ReactNativeWebPlayer
31-
import React from 'react';
33+
import React, {Component} from 'react';
3234
import { AppRegistry, Text } from 'react-native';
3335
34-
var AwesomeProject = React.createClass({
35-
getInitialState: function() {
36-
return {text: "Hello World"};
37-
},
38-
render: function() {
36+
class TextBasicsWithState extends Component {
37+
constructor(props) {
38+
super(props);
39+
this.state = {text: "Hello World"};
40+
}
41+
render() {
3942
var text = this.state.text;
4043
return (
4144
<Text style={{marginTop: 22}}>
4245
{text}
4346
</Text>
44-
);
47+
)
4548
}
46-
});
49+
}
4750
4851
// App registration and rendering
49-
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
50-
52+
AppRegistry.registerComponent('AwesomeProject', () => TextBasicsWithState);
5153
```

0 commit comments

Comments
 (0)