So let's begin our journey in our project folder.
Now, as suggested in the view
that we saw of our app, we'll begin our journey at App.js file.
Now even in a React application, you would obviously have the starting
point in App.js file, typically that's the convention that we use here.
Now notice that there is no indexing.html page in a React Native application,
because this is not a web application.
This is a React Native application which runs on a mobile device,
so when you open app.js, you immediately see familiar code here.
Since you have already done a course on React, or
at least you are familiar with React, this should look very, very familiar.
So we are importing React from react here, and
then we are importing these from react-native.
So the react-native library exports some of these,
and which we're going to be importing in this app to make use of.
Now, let's examine what is contained in here.
Now, this should also look very familiar to you.
What we are doing here is creating a React.Component called app and
then we are exporting that React.Component from here and
what will become the starting point for our application.
Now, inside here you see a render function here typical of a React.Component,
and inside the render function you'll see a return and inside the return you'll see
this code here which corresponds to what you saw on the screen.
Now, but you immediately notice that you are seeing new things here called View,
Text, and so on.
So based on your React knowledge,
this is something that you are not familiar with at all.
You have never seen a View or a Text in a React application.
Welcome to the react-native world.
These are react-native components that we are going to be making us of.
And these will be mapped into the corresponding native UI widgets
by react-native, ui widgets on Android and iOS by react-native on your behalf.
So here this view is a container for
a set of information here.
Now, the text is used to display a string of texts as you would expect.
So here you can see that we have three text elements here, three text
React Native components here which enclose the strings here, so
you see your first encounter with a React Native component.
So when you build up the views of your React Native components,
you will be making use of the built-in React Native components and
you will implement your own React Native components which are nothing but
react components, and then you will use them to build up your application.
Now, in addition, notice these here which says style={styles.container}.
And then if you go down here, that's a styles container.
Now React Native, they have decided to use inline JavaScript
based styles to be applied, unlike CSS that you are familiar with.
But this is inline JavaScript based styling that is used by React Native.
Now, he best way to learn how to use this is actually applying
them as we go along in the course, and then you will see
me modifying this and including them as we go long in the course.
Now what is interesting to note here, so this says is StyleSheet.
What is StyleSheet?
StyleSheet as you'll see is imported from react-native.
The StyleSheet allows you to to construct a stylesheet, so
this is like CSS stylesheet that we have seen but implemented in,
again, JavaScript, and then this creates a stylesheet
with one particular object here called container.
So the container style is what we have applied here, so this is how you
apply a style to any of the React Native components that we use there.
Now, they're are built in React Native components and
other React Native components.
The built-in components that we're going to examine all give you access
to this way of styling them.
So what does the style do here?
So this is container flex.
Now, React Native uses the flex box as a way of styling the contents in there.
Flex box, something that you must have encountered in the bootstrap course which
was the first one that we saw in this specialization.
Same flex box kind of support is available, or
synthesized in React Native here, so when this says flex one, so
is flex to occupy as much space as is permitted here.
And one here says one unit, that is the weight here.
So if you say flex 1 for one and then you have another container with flex 2,
then they will get one-third and two-thirds of the screen.
And then the second part is the backgroundColor here.
So this backgroundColor is applied to this view here which contains this text.
So here you see that the diagram color is #fff here.
