[MUSIC] If you're like me, a curious George, you wouldn't be happy just accepting what has been scaffolded out. You want to poke your nose into the project folder and then figure out what is in that project folder. And at least try to understand some basics of how this React Native application that we have scaffoled out ctually works. So let's go ahead and do that in this lecture. So what did we actually see on the screen for our React Native app? So when you open the app, you saw that it just prints out this sentence here saying open up app or js to start working on your app. Changes you make will automatically reload. Shake your phone to open the developer menu. That is a clue of where to begin. So I have opened my project folder in Visual Studio Code. You can use your favorite editor to open the project folder so that you get a chance to go in and examine the code that has been scaffolded out. 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. And also the aligned items is centered here. So that's why your items are aligned center in the screen, and also says justify content center. So horizontally and vertically, the content inside this view is aligned to the center of the screen there. Now we can change this to other values. So you can see that the aligned items allows me to specify radius options. Either you can say flex-start which will align it to the the starting flex-end, align to the right end. Center stretch, meaning it will stretch to occupy the entire space that is available and baseline, here. And justifyContent takes on choices, flex-start, flex-end, center, space-between, space-around, and so on. Now, as we go through this course, I will be implementing some of these styles, and then as I implement them, I will show you why I am specifying those styles, as shown there. Now, to help you to understand that we can make changes, I'm just going to delete some of these and then change the background color to, Let's see, 0ff, and then save the changes. And then you will immediately see that your application will be reloaded. If your application doesn't reload automatically, then you can just pull down, sometimes I have found that the application doesn't automatically refresh itself. Just pull down the notification tab and click on the refresh button there and that will refresh your application, and there you go. You see the modified application there. Most often the application will automatically reload, so that is hard reloading available for you, but sometimes it acts in strange manners. In that case, just pull down and refresh the application like that. Sometimes you may even need to shut down your yarn server and then restart it. Now I have seen that kind of problem also occasionally happen, so if you encounter any of these things and your app is not refreshing, first step is to refresh by manually refreshing it by using the notification and click on the refresh button there. The other alternative is to restart your yarn start and then that will also help to refresh. But there you go. You'll see how you're React Native application can be updated. So that is our journey into App.js. Now in addition to these, there are some other files here, which I am not going to touch at this moment. You are just going to leave them as such and when required, we are going to examine some of these things. Now package.json something that you're familiar with. You can go into package.json and the explore to see what is inside where. And in package.json, you will see this devDependency called react-native-scripts installed there. And the react-native-scripts is the one that contains the scripts that allow you to work with your React Native application. So when you typed yarn start or npm start, what you are essentially doing is you are executing this command here called react-native-scripts start, and that is what starts serving up your React Native application to be viewed in your Expo app in your device there. Now, you'll see some additional scripts installed there. We're going to be looking at them a little bit later. Now, going into the dependencies you'll see that there is an expo that is installed there. We'll examine expo in more detail later on. You'll see that React is already installed there because this is a React Native application which is dependent on React, so that's why we install react and react native is also installed there. So those are the versions of react and react-native that I am using in this course. So that's a quick tour of the package.json file. And some of the other ones we will be leaving them as such, we don't need to look at them at the moment. We'll come back to look at some of the other files when required. With this I hope you are enjoying a quick tool of your React Native project folder and seen how your React Native application is actually created and scuffled it out by the create React Native app. And how your React Native app is being served up into your mobile device. [MUSIC]
