WEBVTT 00:00:00.000 --> 00:00:02.260 We're going to start taking our first step 00:00:02.280 --> 00:00:05.570 towards completing social media application. 00:00:05.600 --> 00:00:09.840 You see the design given here, and what we need to do to get started 00:00:09.870 --> 00:00:14.660 with any project, really, in React Native is download the initial template. 00:00:14.690 --> 00:00:17.420 To do that, we're going to have to open the terminal. 00:00:17.440 --> 00:00:19.100 I'm just going to navigate to desktop 00:00:19.130 --> 00:00:21.820 because that's where I like to place my files. 00:00:21.850 --> 00:00:23.355 I'm going to type 00:00:23.555 --> 00:00:25.436 npx react-native init 00:00:25.636 --> 00:00:29.020 and I'm going to call this social media. 00:00:29.050 --> 00:00:32.900 Let's press Enter, and the downloading process is going to start. 00:00:32.930 --> 00:00:37.080 The items that are being downloaded is going to look a little different 00:00:37.110 --> 00:00:40.840 on different operating systems such as Windows and macOS. 00:00:40.870 --> 00:00:42.180 This is totally fine. 00:00:42.210 --> 00:00:46.340 Just wait for this to complete and come back once that's ready. 00:00:46.360 --> 00:00:46.720 Great. 00:00:46.750 --> 00:00:51.320 The installation process is done and we have instructions on how to run 00:00:51.350 --> 00:00:56.500 the application on Android device and we have such instructions for iOS as well. 00:00:56.530 --> 00:01:00.980 The Windows users will not have these instructions, which is totally fine. 00:01:01.010 --> 00:01:05.740 You can just check the application on Android and follow along the course. 00:01:05.770 --> 00:01:08.000 Now here you're going to see that we are 00:01:08.030 --> 00:01:13.490 going to change our directory and go into the desktop and social media folder, 00:01:13.520 --> 00:01:17.260 and then we're going to start running the application on Android. 00:01:17.290 --> 00:01:18.631 Here we see 00:01:18.831 --> 00:01:22.290 npx react-native run-android 00:01:22.320 --> 00:01:24.400 The same is going on for iOS. 00:01:24.430 --> 00:01:26.280 I'm currently running on macOS, 00:01:26.310 --> 00:01:29.380 so I'm going to have to go with this instruction. 00:01:29.410 --> 00:01:30.840 I'm going to use this. 00:01:30.870 --> 00:01:33.680 Actually, I'm just going to quickly add one more thing. 00:01:33.710 --> 00:01:39.420 I want my simulator to be iPhone 14. 00:01:39.450 --> 00:01:44.540 Usually, what it does is it opens up iPhone 8 because that's the default set 00:01:44.570 --> 00:01:49.800 for my computer right now and I don't really want to see iPhone 8 pop-up here. 00:01:49.830 --> 00:01:54.080 So that's why I used the simulator addition here. 00:01:54.110 --> 00:01:57.420 You can also do so if you'd like and 00:01:57.450 --> 00:02:02.180 just choose any device that you want to run your application on. 00:02:02.200 --> 00:02:05.240 Great. So let me move this here. 00:02:05.270 --> 00:02:07.680 My simulator started up already. 00:02:07.710 --> 00:02:12.140 And what we're going to see here is that once the building process is 00:02:12.170 --> 00:02:17.500 completed, the social media application is going to open up here. 00:02:17.530 --> 00:02:19.540 Just wait for the installation to be 00:02:19.570 --> 00:02:23.580 completed and come back to the video once you're ready. 00:02:23.600 --> 00:02:26.000 Great. So installation process has been completed 00:02:26.030 --> 00:02:29.450 and we see our default React native template shown here. 00:02:29.480 --> 00:02:31.200 The Metro Bundler is running, which is great. 00:02:31.230 --> 00:02:35.640 Let's not close this because we're about to edit this project and get it ready 00:02:35.670 --> 00:02:39.600 for the next video where we're going to start setting up some of the items 00:02:39.630 --> 00:02:42.450 that we're going to be using for this application. 00:02:42.480 --> 00:02:48.360 For that, just open up your default IDE where you like to work on the project. 00:02:48.390 --> 00:02:55.100 I'm going to open desktop and then click on social media and click on Open. 00:02:55.130 --> 00:03:01.020 If you're running on Visual Studio Code, please don't forget to edit 00:03:01.050 --> 00:03:05.560 your ESLint file so that you add the prettier setup here. 00:03:05.590 --> 00:03:07.900 It will help you format your code. 00:03:07.930 --> 00:03:10.280 But if you're not using Visual Studio code 00:03:10.310 --> 00:03:14.700 and you have your formators already set up, then don't worry about this. 00:03:14.730 --> 00:03:21.180 I do like keeping my code neat, so that's why I always try to use the formators. 00:03:21.200 --> 00:03:21.580 Great. 00:03:21.610 --> 00:03:26.820 Now we're going to see the main file here, which is called app TypeScript file. 00:03:26.850 --> 00:03:30.280 As we know, React Native now supports TypeScript. 00:03:30.310 --> 00:03:31.820 We've seen this before, 00:03:31.850 --> 00:03:36.700 and the course is going to come up with a section later on TypeScript. 00:03:36.730 --> 00:03:39.580 However, we barely know how to write 00:03:39.610 --> 00:03:45.380 the JavaScript React Native code, so we're not going to be using TypeScript yet. 00:03:45.410 --> 00:03:51.580 Let's just edit this file, refactor it, and make it a JavaScript file instead. 00:03:51.610 --> 00:03:53.820 Then I'm going to get rid of some of this 00:03:53.850 --> 00:03:56.460 stuff that we're not going to be needing here. 00:03:56.490 --> 00:04:00.000 I'm going to get rid of everything here. 00:04:00.030 --> 00:04:02.040 Other than safe area view, 00:04:02.070 --> 00:04:06.460 we don't need this and we're definitely not going to need this. 00:04:06.490 --> 00:04:10.860 We don't need the section component, so let's just get rid of this. 00:04:10.890 --> 00:04:16.080 Here, I'm just going to write this function a little bit differently. 00:04:16.100 --> 00:04:18.860 We don't need these variables. 00:04:18.890 --> 00:04:24.320 We can have the return here, but I'm going to delete everything inside it. 00:04:24.760 --> 00:04:25.940 Great. 00:04:25.970 --> 00:04:28.960 We don't need this style either. 00:04:29.240 --> 00:04:34.400 Then I'm going to delete these styles as well. 00:04:35.800 --> 00:04:40.740 Now I'm going to get rid of these items as well. 00:04:40.770 --> 00:04:42.340 I'm going to click on Save. 00:04:42.360 --> 00:04:47.300 My code was automatically formatted and it looks great right now and we see the blank 00:04:47.330 --> 00:04:51.460 screen on the simulator, which is intentional. 00:04:51.480 --> 00:04:54.880 We're just going to continue on this in the next video. 00:04:54.910 --> 00:04:57.200 Stay tuned and come back to the next video 00:04:57.220 --> 00:05:01.540 where we're going to learn how to set up custom fonts. 00:05:01.570 --> 00:05:03.640 Thank you and see you in the next video.