WEBVTT 00:00.980 --> 00:01.510 Okay. 00:01.520 --> 00:07.400 In this video, I will show you what actually in the project we have created because we didn't have 00:07.400 --> 00:09.520 a chance yet to look at the files. 00:09.530 --> 00:15.470 So what I did is I removed my simulator, iOS one, and I also disconnect it from my phone. 00:15.470 --> 00:21.890 So at the moment, the only build that I have active is the Android SDK build and you can actually switch 00:21.920 --> 00:28.220 in between them and see what's happening there on this tab here so you can select which one you would 00:28.220 --> 00:29.150 like to use. 00:30.080 --> 00:34.910 So once we have that selected, you will be able to see some logs here. 00:34.910 --> 00:38.750 If you need to see them, they will be available there also. 00:38.750 --> 00:41.720 They will be available in the terminal here. 00:41.720 --> 00:46.040 So you can see here you have whatever you've you've done here. 00:46.040 --> 00:48.110 You also have it there. 00:48.110 --> 00:51.770 So we we can have the terminal up and running here. 00:51.770 --> 00:54.750 But I will prefer to have it everything in one place. 00:54.770 --> 01:01.290 What I will do is I will do Ctrl C, so I'm stopping packager now so you can see here, this is actually 01:01.290 --> 01:01.770 a stopped. 01:01.800 --> 01:09.630 What I need to do is I can do expo start there, but I have my project open here in Visual Studio code. 01:09.630 --> 01:19.830 So what I can do is I can open the terminal directly here and I can do Expo Start or I can do yarn start. 01:23.970 --> 01:26.160 So this is enable again. 01:26.160 --> 01:31.830 So every everything is ready and we can actually run it on Android device here. 01:36.110 --> 01:39.080 So in the meantime, what I can do is I can show you the code. 01:39.080 --> 01:42.080 And so I will have this application here. 01:42.080 --> 01:47.570 So whatever I will develop here, it will be on the emulator on the right hand side, and then we can 01:47.570 --> 01:49.880 talk about what we have in the project. 01:49.880 --> 01:58.310 So I can close the terminal here and then we have the list of the folders and the files on here. 01:58.310 --> 02:02.780 And it's very similar of what we had in the our react. 02:02.780 --> 02:07.520 In fact, if you will take a look at that, it's not straightforward. 02:07.520 --> 02:10.130 That's this is react native. 02:10.160 --> 02:13.940 It looks very close to what we had in react. 02:13.940 --> 02:16.100 So it's almost the same. 02:16.100 --> 02:21.650 So what we have is we have the package.json that's the same package.json as we had in React. 02:21.650 --> 02:27.620 Basically that's a list of dependencies, the different packages that we will need to have in order 02:27.620 --> 02:28.910 to run our application. 02:28.910 --> 02:36.090 You can see here we are having the expo react and then we have React Native and so on. 02:36.690 --> 02:38.520 Uh, like uh, like here. 02:38.520 --> 02:43.380 So basically the package.json is pretty much the same as it was in the react. 02:43.410 --> 02:47.580 We have yarn log because I used a yarn for having that. 02:47.580 --> 02:54.180 We have the bubble and then we have uh, these two files that we'll come back to that later on. 02:54.180 --> 02:57.810 And then we have a few, a few files here, like a git ignore. 02:57.840 --> 02:59.790 That's, uh, for git tracking. 03:00.000 --> 03:02.790 So this folder, we know this folder already. 03:02.790 --> 03:03.840 That's a node module. 03:03.840 --> 03:08.970 So whatever we install dependencies, it will be here in the node modules. 03:08.970 --> 03:16.860 This folder can be easily removed and recreated with yarn install or npm install and it will install 03:16.860 --> 03:21.330 all the dependencies using the package.json in the node modules. 03:21.330 --> 03:26.040 Then you have a asset and then in assets you can actually put your own asset. 03:26.040 --> 03:31.920 If you have any images or something like a logo you would like to display here, that will be the place 03:31.920 --> 03:32.400 to do. 03:32.400 --> 03:34.530 And then we have two folder expo. 03:34.740 --> 03:36.480 We have Expo Shared and Expo. 03:36.510 --> 03:41.130 We don't need to touch any of this because that's related to Expo. 03:41.160 --> 03:44.880 If you don't use the expo, you won't have that folders here. 03:44.880 --> 03:47.070 So what's our application? 03:47.070 --> 03:49.920 Actually, our application is that App.js. 03:49.920 --> 03:56.490 I have it already open here, so I will make a little bit more space here to take a look what's happening. 03:56.490 --> 04:02.370 So in our application, what we have is we need to import a react from React. 04:02.370 --> 04:05.430 That's exactly the same what we had in React. 04:05.430 --> 04:08.760 So basically this is the way we've done it. 04:08.760 --> 04:11.820 And then we do also have a function here. 04:11.820 --> 04:15.480 So this is our component that we have here. 04:15.480 --> 04:16.650 That's the main component. 04:16.650 --> 04:20.280 It's called an app, and then it will be displayed here. 04:20.280 --> 04:25.110 So you can see here a text that's moving up and it is displayed there. 04:25.110 --> 04:32.910 So what we also have here and that's created for us automatically is the stylesheet text and Vue from 04:32.910 --> 04:33.900 React Native. 04:33.900 --> 04:39.450 And you can see here, attacking is a little bit different because this is not a web version anymore. 04:39.450 --> 04:42.090 This is version for mobile. 04:42.090 --> 04:46.200 So we can't really use the same kind of HTML tags here. 04:46.200 --> 04:50.220 But React Native comes with its own tags. 04:50.220 --> 04:55.110 So for example, if we would like to display a text, then we wrap it around text. 04:55.140 --> 05:03.510 Normally in the HTML you will use h tag like for a heading from 1 to 6 and our paragraph tag. 05:03.510 --> 05:09.090 So in a react native you import that text and then you display it. 05:09.090 --> 05:11.100 Then we also have a view. 05:11.100 --> 05:16.230 So view is kind of like a container here and then we have a stylesheet. 05:16.620 --> 05:18.120 So what is that? 05:18.120 --> 05:26.100 Basically, that's our CSS and the way we write styles in the React Native is like this and I will come 05:26.100 --> 05:33.480 back to this later on because I don't want to go too deep at this point, but basically that's an option 05:33.480 --> 05:36.240 for having something like a style component in React. 05:36.240 --> 05:42.870 So basically you have your styles, you apply it to the component like here and then it is available. 05:42.870 --> 05:49.650 So if you will take a look at that file, this is pretty much the same thing as we've done. 05:49.650 --> 05:53.880 We use the JSX here, we use the components. 05:54.000 --> 05:57.330 We will use similar styles as we have it here. 05:57.330 --> 06:00.810 We use similar react import. 06:00.810 --> 06:03.570 So there is nothing really scary here. 06:03.570 --> 06:10.320 The only new things that you will need to learn how to do is a little bit of different layout because 06:10.320 --> 06:13.920 you can't really use the HTML tags you will use. 06:13.920 --> 06:16.800 You will need to use the React native tags. 06:16.800 --> 06:23.220 But this is not a big thing because once you will master few of them, you will be able to, uh, do 06:23.250 --> 06:24.630 whatever you need to do. 06:24.630 --> 06:30.150 And actually everything, whatever is available on the web, it is also available here. 06:30.150 --> 06:34.740 And you have some improvements like our ready components that are available. 06:34.760 --> 06:38.870 For Mobile and we'll be talking about them in the future videos.