40 lines
1.1 KiB
Markdown
40 lines
1.1 KiB
Markdown
---
|
||
title: Hello World
|
||
---
|
||
## Hello World
|
||
|
||
In a traditional webpage, you could easily render `Hello World!` to the screen by writing some HTML like this:
|
||
|
||
```html
|
||
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>Test Page</title>
|
||
</head>
|
||
<body>
|
||
<p>Hello World!</p>
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
In React Native, there is no DOM or browser, so you have to render things to the screen from a mobile API that React Native provides. For example, instead of using a `<p>` tag as a wrapper for text like you would on the web, you would use `<Text>`; instead of `<div>` container tags, you would use `<View>`.
|
||
|
||
```js
|
||
import React, { Component } from ‘react’;
|
||
import { AppRegistry, View, Text } from ‘react-native’;
|
||
|
||
class App extends Component {
|
||
render () {
|
||
return (
|
||
<View>
|
||
<Text> Hello World! </Text>
|
||
</View>
|
||
);
|
||
}
|
||
}
|
||
|
||
AppRegistry.registerComponent(‘AwesomeProject’, () => App);
|
||
```
|
||
|
||
To render the code to the screen, instead of opening the page in a browser, you use a special `AppRegistry.registerComponent()` method provided by React Native to render the app to a mobile device.
|