The next lines are known as destructuring assignment.

We pack all those elements

into the variable React so we don t have to type React.whatever inside our code. We
pack some view elements and some general needed elements inside here, you will
see them later inside our app again.
Destructuring assignment for our appJavaScript
1
2
3
4
5
6
7
8
9
var {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight,
Component,
AlertIOS // Thanks Kent!
} = React;
STYLING
The next feature of React Native is how you can style a view. We use the StyleSh
eet to define a CSS like styling for our view components. There are not all CSS
attributes available by now, but in general you have already a lot to create a s
olid view. Anyway, this is a very early stage of development of React Native, so
be patient if there is not everything you would expect. Now append our styling
after the destructuring assignment:
Styling for our AppJavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFFFFF'
 },
buttonText: {
fontSize: 18,
color: 'white',
alignSelf: 'center'
},
button: {
height: 44,
flexDirection: 'row',
backgroundColor: '#48BBEC',
alignSelf: 'stretch',
justifyContent: 'center'
}
});
You might know the most of those attributes already, however a special is the fl
ex attribute. The Flexbox is an addition to the classic CSS layout, and acts a l
ot like some fluent design. Elements are aligned one after one, and you can spec
ify the direction of the flow and how much of the space in a row those elements
can use. For more on the JavaScript layout, check out the Facebook Repo of the C
SS Layout.
COMPONENT
Our component will be a class using the new JavaScript syntax. This just looks b
etter and will be the future, so try to stick to this syntax already. The most i
mportant function here is the render() which will always be called when somethin
g in the view changes. If you think that will be a performance problem..no, not
at all!
Your React Native App is always in some state, and if there are changes, your co
mplete view is built as it s a function. This is a functional approach and reduces t
he error potential, as you can always be certain at which state your app is. Whe
n the render function is called again, it will basically make an internal diff w
ith the current state and just update the parts which have changed.
So we learned that render() returns a function with our view. Our view now consi
sts of a view element which takes the .container styling and acts as our outer v
iew. Inside this view we have a simple text label and a TouchableHighlight, whic
h is the React way of creating a button. They both have a styling, and the butto
n also has an onPress event which will call showAlert().
Add these lines below your already existing code: