1 00:00:00,930 --> 00:00:04,290 All right my friends hopefully you had some success putting this exercise together. 2 00:00:04,290 --> 00:00:06,240 So let's do it together right now. 3 00:00:06,360 --> 00:00:09,760 Back inside my editor I'm going to find my Capone's screen component right here. 4 00:00:09,840 --> 00:00:14,340 I'm going to delete everything inside there just so I can start from scratch so you can see how I would 5 00:00:14,340 --> 00:00:16,800 approach this in a normal component. 6 00:00:16,950 --> 00:00:21,060 So inside of here I'm going to put in a return statement because I know I need to return some amount 7 00:00:21,060 --> 00:00:24,960 of J.S. X and I know that I need to return multiple different elements. 8 00:00:24,990 --> 00:00:29,880 So I got a place down a set of parentheses and put all my different elements inside of here. 9 00:00:29,890 --> 00:00:32,780 Next up I know I need to show two pieces of text. 10 00:00:32,780 --> 00:00:37,810 Anytime I need to return multiple different elements I'm always going to wrap them inside of one single 11 00:00:37,810 --> 00:00:38,410 component. 12 00:00:39,010 --> 00:00:45,110 So in this case I'll put down by view like so and then inside there a place to text. 13 00:00:45,150 --> 00:00:45,660 Elements 14 00:00:49,670 --> 00:00:54,480 now in the first one we had said that we wanted to have the text or is it getting started with React 15 00:00:54,480 --> 00:01:03,360 Native so I'll say Getting Started With React Native and then the second one we need to say my name 16 00:01:03,390 --> 00:01:05,250 is and then whatever our name is. 17 00:01:05,250 --> 00:01:09,320 But the special requirement here was to assign our name to a variable ahead of time. 18 00:01:09,450 --> 00:01:16,500 So at the top of the function I'll say const name is my name of Steven and I can print up that variable 19 00:01:16,680 --> 00:01:23,010 inside this text element by placing a set of curly braces and the name like so okay. 20 00:01:23,070 --> 00:01:24,920 So it looks pretty good on the content side. 21 00:01:24,950 --> 00:01:27,230 So I'm going to save this really quickly and test it out. 22 00:01:27,230 --> 00:01:28,410 Yep looks good. 23 00:01:28,420 --> 00:01:32,750 So now we just need to apply a little bit of styling so to do so I'm going to come down to my styles 24 00:01:32,750 --> 00:01:33,840 object. 25 00:01:34,100 --> 00:01:40,070 Right now we've got an existing textile with a font size of 30 for the first text element we had said 26 00:01:40,070 --> 00:01:42,500 that we wanted a font size of 45. 27 00:01:42,620 --> 00:01:47,710 So I'm going to reuse this existing one and just change the font size to 45 then after that. 28 00:01:47,740 --> 00:01:55,280 I'll create a second styling group called a second one like sub header style and I'll give it a font 29 00:01:55,280 --> 00:01:59,090 size of 20. 30 00:01:59,110 --> 00:02:04,210 Now I can apply both these different styles to the appropriate text elements on the first text element. 31 00:02:04,210 --> 00:02:12,660 I'll say style is styles not text style and then on the second one I'll do a style of styles dot sub 32 00:02:12,810 --> 00:02:19,230 header style because on that second text element I want to specifically have the font size of 20 okay. 33 00:02:19,290 --> 00:02:19,970 That's pretty much it. 34 00:02:19,970 --> 00:02:23,250 So I'll save this file and yep looks good. 35 00:02:23,360 --> 00:02:27,100 Now if you had any trouble with this first exercise do not sweat it. 36 00:02:27,140 --> 00:02:29,790 We've only been talking about react here for a couple of minutes. 37 00:02:29,840 --> 00:02:32,880 We're gonna have a lot of more exercises later on inside this course. 38 00:02:32,880 --> 00:02:36,520 So you'll have many different opportunities to polish up your skills. 39 00:02:36,520 --> 00:02:36,730 OK. 40 00:02:36,760 --> 00:02:39,500 So let's take a quick pause right here and continue in the next video.