status-im/react-native
2
0
Fork 0
mirror of https://github.com/status-im/react-native.git synced 2025-02-05 06:04:15 +00:00
Code Issues Projects Releases Wiki Activity

ES6-ify Text Basics

Browse Source 
Summary: Closes https://github.com/facebook/react-native/pull/8363

Differential Revision: D3477431

Pulled By: caabernathy

fbshipit-source-id: 86ee5efb84e50609fbfae82102b1dc61fea69f05
This commit is contained in:
Joel Marcey 2016-06-23 12:30:36 -07:00 committed by Facebook Github Bot
parent 32ab5b6b41
commit be38b3b610
1 changed files with 18 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
docs/Basics-Component-Text.md
View File

@ -12,40 +12,42 @@ The most basic component in React Native is the [`Text`](/react-native/docs/text
This example displays the `string` `"Hello World!"` on the device.
```ReactNativeWebPlayer
import React from 'react';
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
const AwesomeProject = () => {
return (
<Text style={{marginTop: 22}}>Hello World!</Text>
);
class TextBasics extends Component {
render() {
return (
<Text style={{marginTop: 22}}>Hello World!</Text>
);
}
}
// App registration and rendering
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
AppRegistry.registerComponent('AwesomeProject', () => TextBasics);
```
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}`.
```ReactNativeWebPlayer
import React from 'react';
import React, {Component} from 'react';
import { AppRegistry, Text } from 'react-native';
var AwesomeProject = React.createClass({
getInitialState: function() {
return {text: "Hello World"};
},
render: function() {
class TextBasicsWithState extends Component {
constructor(props) {
super(props);
this.state = {text: "Hello World"};
}
render() {
var text = this.state.text;
return (
<Text style={{marginTop: 22}}>
{text}
</Text>
);
)
}
});
}
// App registration and rendering
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
AppRegistry.registerComponent('AwesomeProject', () => TextBasicsWithState);
```