WEBVTT 00:02.220 --> 00:09.280 OK, let's start creating our first tract native application, and I have to say the process of creating 00:09.300 --> 00:14.700 application can be a little bit overwhelming because you have multiple options to do so. 00:15.330 --> 00:22.740 So what I will do is I will show you the easiest way to do it, but also I will appoint you to the place 00:22.740 --> 00:29.250 where you can actually have more complicated set up, but it's more convenient for our developers to 00:29.250 --> 00:29.740 do so. 00:30.090 --> 00:33.780 So we will go through that in this tutorial. 00:33.900 --> 00:40.740 But we have started with a very simple application and actually react native gives us a solution that 00:40.740 --> 00:46.170 we don't need to do much to set it up and we can use it almost straight away. 00:46.830 --> 00:48.020 So what are the options? 00:48.050 --> 00:54.150 So we have the first option we will have is the snack so we can go to the snack. 00:54.530 --> 01:01.110 IDOT exploded AIO and this is actually the place where you can test your application, you can write 01:01.110 --> 01:04.480 your application directly in the browser and you can see it here. 01:04.680 --> 01:10.590 So for example, I have changed code into the editor to watch it change on the phone and I can see it 01:10.590 --> 01:11.310 is here. 01:11.460 --> 01:16.140 If I will change something, my text goes here. 01:18.880 --> 01:25.220 It was actually updated here at a moment, I have where, but I can also enable that in iOS and Android. 01:25.470 --> 01:28.860 So that's like our in browser way to test. 01:28.890 --> 01:36.510 There are RACT Native Application and then you can actually share it and export it and you can build 01:36.510 --> 01:39.300 your own almost ready application here. 01:39.480 --> 01:46.440 So that's the first way to get your hands on the code and just test it out if you are not really sure 01:46.440 --> 01:49.020 if you want to do it or you want to play with this. 01:49.200 --> 01:51.120 This will be the perfect place to do it. 01:51.300 --> 01:52.220 In this tutorial. 01:52.260 --> 01:54.030 We we're not going to use the snack for it. 01:54.300 --> 01:58.520 I just wanted to show you that one of the options we would have. 01:58.860 --> 02:00.600 So that's the Web browser. 02:00.600 --> 02:07.860 As you can see here, it's a snack that XPO what's the expo is actually Expo is an application and that's 02:07.860 --> 02:09.540 available on both markets. 02:09.540 --> 02:15.930 So you will have on Google Play Expo application and also you will have the same App Store. 02:16.230 --> 02:23.550 So if you have a mobile device either on Android or I guess you can download the client and that will 02:23.550 --> 02:26.670 help you develop the application for react native. 02:26.850 --> 02:28.850 So how can we actually do it? 02:28.860 --> 02:34.590 So if you go to the getting started here on Iraq and Native and actually you can access this from the 02:34.590 --> 02:39.520 main page, so you click get started here and you're on this page. 02:39.540 --> 02:43.260 So what we have here is we have two options. 02:43.530 --> 02:48.640 We will go either for export or we will go native here like QuickStart. 02:48.960 --> 02:55.290 So this way you will need to set up your environment in a certain way. 02:55.500 --> 02:59.860 And that's not very easy and straightforward things to do. 03:00.180 --> 03:06.010 So if you want to have something up and running very fast, export will be your choice. 03:06.360 --> 03:09.870 So why you might need to pick natives instead? 03:10.200 --> 03:18.000 Well, it's a very fast solution for starting a coding reactant native, but doesn't have that much 03:18.630 --> 03:21.720 power as the real solution from REAC native. 03:21.900 --> 03:27.580 If you want to access native elements on your device, then export. 03:27.600 --> 03:28.790 It's not your solution. 03:28.800 --> 03:33.510 It's more limited and it's more for easier application. 03:33.510 --> 03:41.940 I would say the good thing is you can start with the expo and then actually you can eject, expl from 03:41.940 --> 03:48.300 it and then you can move to full solution, which is a reactor native like like you have it here. 03:48.540 --> 03:54.330 So what we will do first will create an expo and I will show you how we can actually use the expo, 03:54.330 --> 03:56.820 how we can write a code and how we can use it. 03:57.120 --> 04:02.490 And then later on you will be able to create your own and you're meant to have it there. 04:02.640 --> 04:08.400 And it will come back to that in the next video because this process might be a little bit complicated. 04:08.640 --> 04:14.040 I won't be able to show you everything because I'm just on one machine and the process is different 04:14.040 --> 04:15.600 on every single machine. 04:15.870 --> 04:20.040 But I will punch you in the right direction if you want to go with the throat. 04:21.840 --> 04:29.220 So what we need to do first, we need to make sure we'll have Expo Zeolite installed. 04:29.610 --> 04:35.370 First thing, make sure you have notan installed so you can go to Noge as we already have done it in 04:35.370 --> 04:36.270 the previous sections. 04:36.540 --> 04:41.370 So if you have this at least 10 version installed on your machine, you are good to go. 04:41.640 --> 04:49.230 So what we need to do is I will copy that and in the terminal I will just install it. 04:50.870 --> 04:56.370 OK, this is now done and now we have an access to export commons that we can use. 04:56.730 --> 05:05.110 What I will do is I will do XPO and then in it in it here and that will create a new application. 05:05.130 --> 05:10.820 Actually I will go to first, I will go to the desktop and then I can initialize it. 05:10.830 --> 05:12.900 So export in it is my command. 05:13.140 --> 05:15.590 Actually I don't have to install exports. 05:15.600 --> 05:21.710 Seelie, what I could do is I could do similar things as I have done with react so I could use and pick 05:21.850 --> 05:23.760 and react. 05:25.350 --> 05:31.860 Native and then in it so that command will do exactly the same as we've done with the Expo, but with 05:31.860 --> 05:35.310 the expo, we can actually have it faster. 05:35.310 --> 05:37.850 And then we have others here like options there. 05:38.100 --> 05:43.540 So I will do Expo in it and then we need to name our application. 05:43.580 --> 05:47.670 So movie mobile, I will do it like this. 05:47.830 --> 05:52.280 So all together and I will do in it mobile, movie, mobile. 05:52.770 --> 06:00.120 So now we have an option to peak so we can pick any of these applications so we can have minimal we 06:00.120 --> 06:06.450 can have some samples like if your application will have a taps that will be already implemented in 06:06.450 --> 06:08.580 the application, I will go for a blank. 06:08.580 --> 06:12.590 This one Malapa that as clean as empty canvas. 06:12.930 --> 06:17.630 So there will be a little tags displayed on the screen, but not and apart from that. 06:17.940 --> 06:24.240 So I will pick this one and then we need to name the our application how it's going to be visible on 06:24.240 --> 06:25.020 the home screen. 06:25.020 --> 06:33.510 So I will do a movie mobile so my name will be moved over and the slack will be all together. 06:33.630 --> 06:34.740 So moving mobile. 06:38.370 --> 06:47.280 It's fine, and now this react native is asking me if I want to use yarn or and PM, it detects that 06:47.700 --> 06:49.950 I have a yarn installed on my machine. 06:50.160 --> 06:57.170 So it asks me if I want to install that with yarn or I want to install that with RPM. 06:57.330 --> 06:59.720 I can do either of these. 06:59.730 --> 07:07.110 I will use a yes here because I do have a yarn installed and it's not very complicated to do if you 07:07.110 --> 07:07.860 don't have a yarn. 07:09.760 --> 07:16.730 You go you go to a yarn packaged dotcom and then you can install one depending on your machine. 07:17.050 --> 07:18.550 This will be different. 07:18.580 --> 07:23.560 So it's very easy to do if you want to follow along and use a yarn, it's fine. 07:23.560 --> 07:27.570 If not, just click now here and everything will be exactly the same. 07:27.580 --> 07:29.350 So there is not much difference here. 07:29.560 --> 07:30.640 How do we have here? 07:49.180 --> 07:56.200 And again, see here we have our application and build, so what we need to do here is we can actually 07:56.230 --> 07:58.510 have we need to go to the folder. 07:58.720 --> 08:01.650 So I will go see this folder. 08:01.660 --> 08:04.950 That's a new folder that we have created for us. 08:05.200 --> 08:07.700 And now I'm inside that folder. 08:07.750 --> 08:14.650 So what I need to do, if I need to do Yarran start, if you picked not to use here in the previous 08:14.650 --> 08:17.740 section, then instead of Yarran you will have AMPM. 08:17.740 --> 08:18.750 So it doesn't really matter. 08:18.760 --> 08:21.900 You can do NPM start or you can do ya and start. 08:22.090 --> 08:22.550 I have. 08:22.850 --> 08:26.940 So I do you start like this. 08:31.200 --> 08:38.670 And you can see here this new application has been opened in the browser, so it's a localhost on board 08:38.940 --> 08:45.010 and 19 002 and my application is kind of running at this point. 08:45.270 --> 08:53.600 It's not yet display on any device, but the server is running at this point. 08:53.610 --> 09:00.330 So I have a few choices here and I will explain to you what we can actually do and how we are going 09:00.330 --> 09:01.120 to use it. 09:01.380 --> 09:07.680 So the best way for you to develop your application, if you don't want to go with a complicated way 09:07.680 --> 09:14.270 of setting up the emulators and simulator's on your machine, then will be using the QR code. 09:14.610 --> 09:23.760 So as I said before, if you have that application that can be on Android device or it can be on iPhone 09:23.760 --> 09:31.800 or iPad Iowas device, then what you need to do is you will have an option to scan that QR code. 09:31.800 --> 09:37.950 So what you can do is say inside that application you will have a product and then you can scan that 09:37.950 --> 09:40.830 QR code here and that QR code. 09:40.830 --> 09:48.330 Once this is scanned, it will actually open your application on your real device and you don't need 09:48.330 --> 09:52.060 to even connect that device with a USB. 09:52.230 --> 09:53.790 So it will be a wireless. 09:53.880 --> 09:58.620 You can have it next to your laptop and it will auto update it or whatever you will do. 09:58.620 --> 10:00.870 Any changes on your code. 10:01.020 --> 10:03.990 It will reflect and refresh your application inside. 10:04.260 --> 10:06.900 So you need to have an expert installed. 10:07.440 --> 10:13.200 And then once you have that installed, then you will be able to scan and run the application. 10:13.230 --> 10:16.500 So this is the simplest way to test it. 10:16.770 --> 10:18.270 But you have another option. 10:18.300 --> 10:22.800 So what we have here, we have run Android device simulator. 10:23.100 --> 10:29.040 You have also run on our simulator and then you can send the link to e-mail and so on. 10:29.700 --> 10:37.410 And so the options you have and I will explain to you how we can actually achieve those in the next 10:37.630 --> 10:42.380 video and then I can show you how it actually works at this point.