1 00:00:01,710 --> 00:00:07,050 Unless section we started working on our first re-act component remember a component is something that 2 00:00:07,050 --> 00:00:13,050 produces some amount of text or content that we can render on the screen of our mobile device. 3 00:00:13,050 --> 00:00:16,160 We're going to continue working on this component in this section as well. 4 00:00:16,590 --> 00:00:21,540 As I said previously I'm a big fan of understanding every single line of code that we put into our code 5 00:00:21,570 --> 00:00:22,350 editor. 6 00:00:22,350 --> 00:00:26,670 So as we continue through the course we're going to have a lot of long discussions about every piece 7 00:00:26,670 --> 00:00:31,950 of code just like we didn't last section but as we cover each topic will significantly speed up the 8 00:00:31,950 --> 00:00:33,250 pace. 9 00:00:33,270 --> 00:00:38,400 One of my favorite aspects of react is that the library is just has a tiny API. 10 00:00:38,430 --> 00:00:40,550 There's not a lot of ways to work with it. 11 00:00:40,560 --> 00:00:44,520 So once you learn those ways you can make some pretty awesome apps without worrying about a whole bunch 12 00:00:44,520 --> 00:00:45,610 of complexity. 13 00:00:45,670 --> 00:00:47,860 Anyways just real quick aside. 14 00:00:48,540 --> 00:00:53,670 So Step two on our three part journey of making our first component is to actually create the components 15 00:00:53,670 --> 00:00:58,780 self we've already imported some amount of code to help create it and now we need to actually make the 16 00:00:58,790 --> 00:01:04,560 component remember that component is an object that produces something that can be placed on the screen 17 00:01:04,560 --> 00:01:06,530 of our mobile device. 18 00:01:06,600 --> 00:01:12,030 So to define a component we write out a javascript function. 19 00:01:12,090 --> 00:01:18,090 This function must return some object that describes what it should look like on our device. 20 00:01:18,150 --> 00:01:22,770 So we're going to write out our first component and it's going to be a function we're going to call 21 00:01:22,770 --> 00:01:27,230 this function app because we called it app right here. 22 00:01:27,240 --> 00:01:31,940 We will refer to it as the app component for our device. 23 00:01:31,950 --> 00:01:36,740 Next we're going to add a little bit of code in here that is going to look a little strange but we'll 24 00:01:36,750 --> 00:01:38,420 discuss its purpose immediately. 25 00:01:38,520 --> 00:01:39,220 OK. 26 00:01:39,570 --> 00:01:46,800 So right out return I'm going to place some parentheses and then in-between those two parentheses right 27 00:01:46,800 --> 00:01:47,570 here. 28 00:01:47,610 --> 00:01:48,190 All right. 29 00:01:48,240 --> 00:01:50,420 What looks like HVM out. 30 00:01:50,670 --> 00:01:54,300 We use what we refer to as the text tag. 31 00:01:55,200 --> 00:02:01,480 And then inside of that text tag placed the just the content some text right here. 32 00:02:01,500 --> 00:02:03,650 So let's now stop again. 33 00:02:03,660 --> 00:02:07,070 You know when you're writing a lot of single lines of code and and talk you know what they do. 34 00:02:07,260 --> 00:02:09,520 Let's talk about what is happening right here. 35 00:02:09,930 --> 00:02:15,890 So this bit of code tells re-act native that we want to render some text to the screen of our device. 36 00:02:15,900 --> 00:02:18,000 But you know that's not the weird part here. 37 00:02:18,000 --> 00:02:23,430 The weird part is that this certainly looks like H.T. mail that is being written inside of our javascript. 38 00:02:23,430 --> 00:02:26,320 Right we've got AIDS team looking TOG's right here. 39 00:02:26,430 --> 00:02:32,080 So you might be thinking Steven you know why are we writing CML in our javascript are mobile devices 40 00:02:32,090 --> 00:02:33,770 and even rendering HD you know. 41 00:02:34,010 --> 00:02:34,950 And that's totally correct. 42 00:02:34,950 --> 00:02:37,320 We are not writing a e-mail here. 43 00:02:37,380 --> 00:02:45,570 We are instead writing a dialect of javascript called GSX GSX is an extension to the javascript language 44 00:02:45,600 --> 00:02:48,220 that is used to write re-act components. 45 00:02:48,480 --> 00:02:52,620 In practice GSX follows the same semantics of HCM out. 46 00:02:52,740 --> 00:03:01,440 We have opening and closing tags so we have opening closing and the name of the text is used within 47 00:03:01,500 --> 00:03:04,040 a set of brackets. 48 00:03:04,050 --> 00:03:08,710 Finally some content is placed between the opening and closing tag. 49 00:03:09,030 --> 00:03:14,900 When we place one tag inside of another we refer to that as nesting or if we place some text within 50 00:03:14,900 --> 00:03:15,570 a tag. 51 00:03:15,750 --> 00:03:23,940 We also refer to this as nesting some content in here will be using GSX throughout this course as it 52 00:03:23,940 --> 00:03:30,120 is our one and only way to communicate with re-act native to of about what we want our app to look like 53 00:03:30,180 --> 00:03:32,350 on the screen of the mobile device. 54 00:03:32,700 --> 00:03:37,380 So the last thing I want to mention here about GSX is that even though it looks like each team it is 55 00:03:37,380 --> 00:03:43,140 still javascript that we're writing GSX exists only to make our lives easier. 56 00:03:43,230 --> 00:03:48,630 As a developer it's really just syntactic sugar to make our code a little bit more legible. 57 00:03:48,630 --> 00:03:54,620 To prove this to you I'm going to open up my browser and I'm going to navigate to Babel. 58 00:03:54,690 --> 00:04:02,200 J.S. IO battle is a tool that takes GSX and turns it into normal Javascript. 59 00:04:02,430 --> 00:04:08,980 So up at the top center here and click on try it out and this will take us to the battle of Ruppel. 60 00:04:09,090 --> 00:04:15,410 So if we place some amount of GSX on the left hand side it will turn it into raw javascript on the right 61 00:04:15,410 --> 00:04:16,190 hand side. 62 00:04:16,380 --> 00:04:21,630 So on the left hand side is the JSF So we might write inside of a component and on the right hand side 63 00:04:21,720 --> 00:04:28,020 is the compile javascript that is actually what is being executed on our mobile device. 64 00:04:28,020 --> 00:04:32,250 Notice how in this case I've already got some amount of GSX on the screen. 65 00:04:32,250 --> 00:04:38,250 I have a single text tag and within that I've got several other text tags and when this all gets converted 66 00:04:38,250 --> 00:04:45,180 into X it turns in a series into a series of calls to react Daut create element. 67 00:04:45,300 --> 00:04:47,690 So this is like the big surprise here. 68 00:04:47,800 --> 00:04:51,810 Jase X is really just a mask over normal function calls. 69 00:04:52,080 --> 00:04:56,560 As I said earlier we use GSX just to make our lives easier. 70 00:04:56,640 --> 00:05:01,850 So even though you know you might think to yourself well why don't we just write a series of re-act 71 00:05:01,850 --> 00:05:07,250 create element calls and the answer to that is as we start to get more tags on the screen you know as 72 00:05:07,250 --> 00:05:12,910 we add more tags to our component it starts to turn into a big mess to function calls. 73 00:05:13,190 --> 00:05:19,280 So the authors of the re-act library realized well nobody really wants to write a whole bunch of calls 74 00:05:19,310 --> 00:05:21,490 a function calls to react create element. 75 00:05:21,650 --> 00:05:26,900 It's a lot easier to read a whole bunch of nested H.T. now or you know what looks like is over here 76 00:05:26,900 --> 00:05:28,010 on the left hand side. 77 00:05:28,220 --> 00:05:33,590 So that is the sole purpose of GSX is just to make the code that we're working with appear a little 78 00:05:33,590 --> 00:05:35,770 bit more legible on the screen. 79 00:05:36,550 --> 00:05:43,490 OK so let's do a wrap up here and this in this section we wrote our first component a component is a 80 00:05:43,490 --> 00:05:47,940 javascript function that returns some amount of GSX in turn. 81 00:05:47,950 --> 00:05:54,150 GSX is a dialect of javascript that tells re-acclimate of what content we want to show on the screen. 82 00:05:54,200 --> 00:06:02,750 In this case we created a text tag and inside that text tag we placed just the string some text which 83 00:06:02,750 --> 00:06:07,610 presumably is going to tell Riak native to render like you just this text on the screen. 84 00:06:07,610 --> 00:06:12,680 So let's continue the next section and figure out how to render this component on our device or how 85 00:06:12,680 --> 00:06:15,330 to make it appear on the screen of our device.