WEBVTT 00:00:00.120 --> 00:00:02.440 This is going to be a quick video 00:00:02.506 --> 00:00:05.050 on how to create new React Native 00:00:05.120 --> 00:00:07.290 projects from scratch. 00:00:07.360 --> 00:00:08.960 These are the steps that you're going 00:00:09.026 --> 00:00:10.320 to have to go through every time 00:00:10.386 --> 00:00:12.930 you want to create a new application. 00:00:13.000 --> 00:00:15.930 Even though we have gone through the steps 00:00:16.000 --> 00:00:18.850 before in the environment setup videos, 00:00:18.920 --> 00:00:20.814 I wanted to go over this one more time 00:00:20.880 --> 00:00:22.360 because practice makes it perfect, 00:00:22.426 --> 00:00:25.480 and beginner developers have a hard time 00:00:25.546 --> 00:00:27.050 remembering how to set up 00:00:27.120 --> 00:00:28.890 new projects from scratch. 00:00:28.960 --> 00:00:30.040 Let's do this together 00:00:30.106 --> 00:00:31.760 and you can follow the steps anytime 00:00:31.826 --> 00:00:34.330 you want to create a new application. 00:00:34.400 --> 00:00:36.040 So first things first, we're going 00:00:36.106 --> 00:00:38.570 to need to open the Terminal window. 00:00:38.640 --> 00:00:40.694 And I always place my projects 00:00:40.760 --> 00:00:42.200 on the desktop, so I'm going to change 00:00:42.266 --> 00:00:44.690 the directory with cd command 00:00:44.760 --> 00:00:46.450 and go to desktop, 00:00:46.520 --> 00:00:49.120 and then we're going to use this brand new 00:00:49.186 --> 00:00:53.730 command that comes with React Native 0.76 00:00:53.800 --> 00:00:57.400 version, and it's called 00:00:57.480 --> 00:01:07.490 npx @react-native-community/cli init and the application name. 00:01:07.560 --> 00:01:08.960 I'm going to say it's 00:01:09.026 --> 00:01:11.280 Hello World app for now. 00:01:11.346 --> 00:01:12.810 Let's click on Enter. 00:01:12.880 --> 00:01:14.400 What you're going to see here 00:01:14.466 --> 00:01:16.880 is that React Native is 00:01:16.946 --> 00:01:19.410 downloading the template project. 00:01:19.480 --> 00:01:21.570 It's going to set up dependencies. 00:01:21.640 --> 00:01:23.080 It's also going to ask 00:01:23.146 --> 00:01:25.530 if we want to install the pods. 00:01:25.600 --> 00:01:27.320 If you're running on macOS, 00:01:27.386 --> 00:01:28.690 you want to say yes. 00:01:28.760 --> 00:01:30.414 If you're running on Windows, 00:01:30.480 --> 00:01:31.400 you want to say no. 00:01:31.466 --> 00:01:34.640 The way you do that is either you press Y 00:01:34.706 --> 00:01:37.810 on your keyboard for yes or N 00:01:37.880 --> 00:01:39.490 on your keyboard for saying no. 00:01:39.560 --> 00:01:41.690 I'm going to press Y because 00:01:41.760 --> 00:01:45.054 I'm running on macOS, and you're going 00:01:45.120 --> 00:01:46.160 to have to wait a couple of seconds 00:01:46.226 --> 00:01:47.440 for this to get done, so you can 00:01:47.506 --> 00:01:50.410 come back to the video once you're ready. 00:01:50.480 --> 00:01:51.654 Okay, great. 00:01:51.720 --> 00:01:53.600 Now this is done, and we have instructions 00:01:53.666 --> 00:01:54.760 on how to run this on Android 00:01:54.826 --> 00:01:56.810 and how to run this on iOS. 00:01:56.880 --> 00:01:57.970 We're going to do both. 00:01:58.040 --> 00:02:00.800 The reason is that you you want to know 00:02:00.866 --> 00:02:03.570 if anything went wrong with your setup 00:02:03.640 --> 00:02:05.560 right in the beginning so that 00:02:05.626 --> 00:02:07.410 you don't doubt yourself later on. 00:02:07.480 --> 00:02:09.494 You don't want to think that something 00:02:09.560 --> 00:02:10.920 that you wrote in your code during the 00:02:10.986 --> 00:02:14.240 development time caused those errors when 00:02:14.306 --> 00:02:16.930 it might actually have been the setup. 00:02:17.000 --> 00:02:20.120 I'm going to start with iOS first, 00:02:20.186 --> 00:02:22.090 and then I'm going to go to Android. 00:02:22.160 --> 00:02:23.600 The first instruction is to actually 00:02:23.666 --> 00:02:25.970 navigate to the project, so we can just 00:02:26.040 --> 00:02:28.050 copy this and paste it here. 00:02:28.120 --> 00:02:29.240 I'm getting this warning, 00:02:29.306 --> 00:02:30.450 but you can ignore it. 00:02:30.520 --> 00:02:32.090 If you're also having this, 00:02:32.160 --> 00:02:33.930 it doesn't really matter. 00:02:34.000 --> 00:02:36.240 Then to run the React Native 00:02:36.306 --> 00:02:38.570 application for iOS Simulator, 00:02:38.640 --> 00:02:40.770 you're going to use this comment. 00:02:40.840 --> 00:02:42.800 Now, if you're running it for Android, 00:02:42.866 --> 00:02:44.650 you can just do Android here, 00:02:44.720 --> 00:02:48.210 but let's run it for iOS first. 00:02:48.280 --> 00:02:50.560 Let's click on Enter, and we're going 00:02:50.626 --> 00:02:52.570 to see the Metro Bundler open up. 00:02:52.640 --> 00:02:55.533 This is what has to be running 00:02:55.600 --> 00:02:59.400 on the background anytime you want to be 00:02:59.466 --> 00:03:01.680 working on the and seeing the changes 00:03:01.746 --> 00:03:03.610 in the iOS simulator. 00:03:03.680 --> 00:03:05.600 We also see that iOS Simulator 00:03:05.666 --> 00:03:08.050 automatically opened up for me. 00:03:08.120 --> 00:03:09.400 That should probably 00:03:09.466 --> 00:03:11.130 happen for you as well if 00:03:11.200 --> 00:03:12.200 you're running this command, 00:03:12.266 --> 00:03:13.720 but if it doesn't, you can always 00:03:13.786 --> 00:03:14.075 run 00:03:14.275 --> 00:03:15.102 npm start 00:03:15.302 --> 00:03:16.480 in the terminal 00:03:16.546 --> 00:03:18.890 and it should open the Metro Bundler. 00:03:18.960 --> 00:03:20.490 Now, let's wait for this app 00:03:20.560 --> 00:03:22.640 to get built and you can come back 00:03:22.706 --> 00:03:24.967 to the video once that's done for you. 00:03:25.320 --> 00:03:25.840 Great. 00:03:25.906 --> 00:03:28.530 Now, the application has opened up and we 00:03:28.600 --> 00:03:32.170 see a little bit a log here that says 00:03:32.240 --> 00:03:33.880 Metro Bundler logs will be removed 00:03:33.946 --> 00:03:36.450 with 0.77. 00:03:36.520 --> 00:03:38.490 If by any chance you're running this 00:03:38.560 --> 00:03:41.450 on 0.77, 00:03:41.520 --> 00:03:43.720 the only way for you to see your console 00:03:43.786 --> 00:03:47.200 log is to press J, and it 00:03:47.266 --> 00:03:49.133 will open up your dev tools. 00:03:49.533 --> 00:03:51.850 If I just press this, we'll see that 00:03:51.920 --> 00:03:53.280 all of the logs would actually 00:03:53.346 --> 00:03:54.667 go into this console log. 00:03:54.733 --> 00:03:56.290 For now, what we want to do is 00:03:56.360 --> 00:03:57.600 to make sure that we see 00:03:57.666 --> 00:03:59.210 the same template for Android. 00:03:59.280 --> 00:04:01.480 If you're running Windows section 00:04:01.546 --> 00:04:04.412 of the video, then you can just do 00:04:04.612 --> 00:04:06.520 npx react-native run-android 00:04:06.586 --> 00:04:08.530 in your terminal, as we talked about. 00:04:08.600 --> 00:04:10.480 It would open up your Metro Bundler 00:04:10.546 --> 00:04:12.360 and launch your emulator 00:04:12.426 --> 00:04:15.090 if your setup was done correctly. 00:04:15.160 --> 00:04:17.250 If not, you can go back to the videos. 00:04:17.320 --> 00:04:19.680 Since I have the Metro Bundler already 00:04:19.746 --> 00:04:21.570 opened, I can just click on A 00:04:21.640 --> 00:04:23.650 on my keyboard and run this for Android. 00:04:23.720 --> 00:04:25.050 I'm going to do that. 00:04:25.120 --> 00:04:25.880 It's going to launch 00:04:25.946 --> 00:04:27.600 Emulator as we see here. 00:04:28.067 --> 00:04:30.370 Now, some things are getting installed 00:04:30.440 --> 00:04:33.530 and you can wait for this to be completed 00:04:33.600 --> 00:04:35.120 and you can come back to the video 00:04:35.186 --> 00:04:36.533 once that's done for you. 00:04:36.840 --> 00:04:38.120 Great, the application has been 00:04:38.186 --> 00:04:39.400 installed, build was successful, 00:04:39.466 --> 00:04:41.880 and now we're going to see the same 00:04:41.946 --> 00:04:43.690 React Native template right here. 00:04:43.760 --> 00:04:45.770 Now, to get started on your projects 00:04:45.840 --> 00:04:48.880 from scratch, what you usually want to do 00:04:48.946 --> 00:04:51.120 is go to your editor, make sure that 00:04:51.186 --> 00:04:53.040 you open up your Hello World application 00:04:53.106 --> 00:04:54.733 from wherever you placed it. 00:04:55.200 --> 00:04:56.560 And what we want to do is 00:04:56.626 --> 00:04:58.490 get rid of all of this setup. 00:04:58.560 --> 00:05:00.160 So first of all, actually, 00:05:00.226 --> 00:05:02.240 I'm going to get rid of TypeScript file 00:05:02.306 --> 00:05:04.730 here and convert it to JavaScript because 00:05:04.800 --> 00:05:06.480 chances are if you're watching this video, 00:05:06.546 --> 00:05:09.214 you're not very familiar with TypeScript, 00:05:09.280 --> 00:05:10.160 and I don't want to confuse 00:05:10.226 --> 00:05:12.610 you with TypeScript code. 00:05:12.680 --> 00:05:15.000 We can talk about that later. 00:05:15.066 --> 00:05:16.760 Let's just convert this 00:05:16.826 --> 00:05:19.170 to JavaScript for now. 00:05:19.240 --> 00:05:21.320 We can do the refactor, and 00:05:21.386 --> 00:05:23.440 we're going to go here and we're going 00:05:23.506 --> 00:05:29.610 to see the initial code for application.js file. 00:05:29.680 --> 00:05:32.640 This is what was rendering all of this 00:05:32.706 --> 00:05:34.610 content that we see in the simulator. 00:05:34.680 --> 00:05:35.280 Great. 00:05:35.346 --> 00:05:35.680 Now, let's get rid of 00:05:35.746 --> 00:05:38.530 the imports that we don't need. 00:05:38.600 --> 00:05:40.000 The only things that I'm going 00:05:40.066 --> 00:05:42.480 to leave in is the safe area view 00:05:42.546 --> 00:05:45.560 and the text component for us 00:05:45.626 --> 00:05:49.090 to test Hello World on our simulator. 00:05:49.160 --> 00:05:51.200 I'm also going to get rid of these imports 00:05:51.266 --> 00:05:52.610 because we don't need them. 00:05:52.680 --> 00:05:54.050 Neither do we need these 00:05:54.120 --> 00:05:55.560 or the section component. 00:05:55.626 --> 00:05:57.490 I'm going to get rid of this. 00:05:57.560 --> 00:05:58.560 Actually, I'm going to 00:05:58.626 --> 00:06:01.970 convert this to to ES6 syntax, 00:06:02.040 --> 00:06:03.690 and then we can get rid of this. 00:06:03.760 --> 00:06:04.730 We don't need it. 00:06:04.800 --> 00:06:07.130 We can get rid of the styles, 00:06:07.200 --> 00:06:09.200 and we can get rid of all of this code 00:06:09.266 --> 00:06:11.450 inside the safe area view, 00:06:11.520 --> 00:06:14.650 and we can get rid of this as well. 00:06:14.720 --> 00:06:16.850 Now, We can just type in text 00:06:16.920 --> 00:06:19.930 and Hello World right here. 00:06:20.000 --> 00:06:23.240 We can save it and unsave my editor 00:06:23.306 --> 00:06:25.210 automatically formats everything. 00:06:25.280 --> 00:06:28.160 We see Hello World displayed here. 00:06:28.226 --> 00:06:31.090 If I go to the Android emulator right 00:06:31.160 --> 00:06:33.930 here, we're going to see the same thing. 00:06:34.000 --> 00:06:36.530 Actually, if I get rid of safe area view 00:06:36.600 --> 00:06:39.240 here, just to show you, what's going 00:06:39.306 --> 00:06:40.760 to happen is that Hello World 00:06:40.826 --> 00:06:42.930 will be displayed correctly here, 00:06:43.000 --> 00:06:46.650 but for iOS, it's going to go right there 00:06:46.720 --> 00:06:48.570 at the beginning of the toolbar. 00:06:48.640 --> 00:06:50.600 That's what SafeAreaView does. 00:06:50.666 --> 00:06:53.330 We're going to get into that later. 00:06:53.400 --> 00:06:54.330 That's all. 00:06:54.400 --> 00:06:56.050 Thanks so much for watching, 00:06:56.120 --> 00:06:57.720 and I'll see you in the next video.