1 00:00:02,230 --> 00:00:06,820 And for this, it makes sense to start here in the app.js file. 2 00:00:06,820 --> 00:00:10,370 Now leave that terminal open here and that process running of course, 3 00:00:10,390 --> 00:00:15,280 so that changes in your code are automatically reflected to the emulators 4 00:00:15,340 --> 00:00:18,420 and now let's see how we can get started with that. 5 00:00:18,460 --> 00:00:23,590 I already mentioned in the first course module that React Native is all about these built-in core components 6 00:00:23,590 --> 00:00:28,870 like text and view. A view would be your div from web development 7 00:00:28,870 --> 00:00:32,920 in case you're a web developer which you probably are if you know React. 8 00:00:32,920 --> 00:00:34,790 So it's a great container component, 9 00:00:34,810 --> 00:00:40,050 you can style it as you see it here and you can wrap other content with it. 10 00:00:40,240 --> 00:00:44,930 Now a text on the other hand is a core component for outputting text, 11 00:00:44,930 --> 00:00:49,870 that's its goal, not there to output an image but there to output text. 12 00:00:49,870 --> 00:00:55,540 Now what you can't do in React Native and that's the first important thing, you can't for example output 13 00:00:55,540 --> 00:00:57,810 text between a view like this. 14 00:00:57,910 --> 00:01:04,120 If we would try to save this without that text wrapper, you see we get an error. That's by the way a screen 15 00:01:04,120 --> 00:01:09,880 you will see from time to time when working with React Native, it gives you an error, it explains what 16 00:01:09,880 --> 00:01:15,910 went wrong. Here for example is a pretty clear error message telling us that text strings must be rendered 17 00:01:15,910 --> 00:01:17,800 within the text component 18 00:01:17,950 --> 00:01:19,330 and why is that so important? 19 00:01:19,330 --> 00:01:21,100 Why am I emphasizing this? 20 00:01:21,220 --> 00:01:24,590 Because that's an important difference to web development, there 21 00:01:24,610 --> 00:01:27,850 you can put text anywhere. In web development, 22 00:01:27,970 --> 00:01:35,800 you could have a div and between the div opening and closing tags, you could have any text and this will 23 00:01:35,800 --> 00:01:41,500 not work on React Native, not only because we're using a div that's not supported there but of course 24 00:01:41,650 --> 00:01:49,810 because on React Native, you really can only output text between text tags, so you need to use that text 25 00:01:49,810 --> 00:01:56,530 component provided by React Native to output text and that's a crucial difference to the web where you 26 00:01:56,530 --> 00:02:02,560 can throw your text anywhere and in React Native, it's way more important that you use the right built-in 27 00:02:02,560 --> 00:02:09,070 component for the job you want to get done and for styling, for setting up a container where you structure 28 00:02:09,070 --> 00:02:15,070 different content, that would be a view, for outputting text, that could be a text. For outputting an image 29 00:02:15,070 --> 00:02:20,460 for example, you will have an image component. So that's how React Native works 30 00:02:20,860 --> 00:02:28,180 and speaking of styling, of layouting, the view has this as a main job, it's mainly there to apply styles 31 00:02:28,450 --> 00:02:31,070 and to layout the content you have in there 32 00:02:31,180 --> 00:02:34,050 and speaking of that, let's get started with layout. 33 00:02:34,360 --> 00:02:39,580 Let's say in our app, we want to have two main areas here on that screen. At the top, 34 00:02:39,580 --> 00:02:45,850 I want to allow the user to enter some text and on the right of that, I want to have a button to confirm 35 00:02:45,850 --> 00:02:46,720 this choice 36 00:02:46,720 --> 00:02:47,640 and below that, 37 00:02:47,650 --> 00:02:53,110 so that's part one, the input area and below that, we have the second part and that's the list of goals 38 00:02:53,110 --> 00:02:54,530 the user entered. 39 00:02:54,550 --> 00:03:00,640 So therefore here in app.js, we can get started by having a wrapping view because just like in normal 40 00:03:00,640 --> 00:03:06,280 React, you need to have one parent component and that will typically be a view in React Native because 41 00:03:06,280 --> 00:03:10,590 that gives you most layouting and styling options and inside of that view, 42 00:03:10,780 --> 00:03:17,910 we could have another view for the input area where we then add our input and below that, yet another 43 00:03:17,970 --> 00:03:23,860 view to have our list of goals and I'll get rid of that text and it's pretty normal in React Native 44 00:03:23,860 --> 00:03:31,350 that you have quite a lot of views nested into each other, so that you can build any layout you want. 45 00:03:31,380 --> 00:03:38,150 Now let's get rid of this container down there by the way and also of this style assignment and let's 46 00:03:38,150 --> 00:03:40,230 start with all of that from scratch. 47 00:03:40,250 --> 00:03:46,100 Important takeaway right now is each component provided by React Native has its own job, 48 00:03:46,100 --> 00:03:51,560 there aren't that many components but the ones that are there have clearly defined roles and you do 49 00:03:51,560 --> 00:03:56,510 then build your UI by nesting these components into each other depending on what you want to achieve, 50 00:03:56,510 --> 00:04:01,550 for example if you want to build a layout, you start with nesting a couple of views and then once you're 51 00:04:01,910 --> 00:04:07,040 at the part where you want to output content, you'll start adding texts and so on and we'll do all of that 52 00:04:07,250 --> 00:04:14,960 over the next lectures. You can also always go to the official React Native docs and there if you click 53 00:04:14,960 --> 00:04:21,740 on Guides, Components and APIs, you'll get an overview over these core building blocks. You'll find 54 00:04:21,740 --> 00:04:27,320 the view here, the text, the image, the text input which I mentioned earlier already and a couple of other 55 00:04:27,350 --> 00:04:32,720 core components and you'll see pretty much all of those or most of those throughout this course and this is 56 00:04:32,720 --> 00:04:37,370 a great place to dive deeper and learn more about them and as you already can tell if you'll leave out 57 00:04:37,370 --> 00:04:44,360 the platform specific ones down there which are more niche focused, then there aren't that many core 58 00:04:44,390 --> 00:04:51,110 components, only about 10 core components and that's how React Native works. Nonetheless, you'll be able to 59 00:04:51,110 --> 00:04:53,690 build any app you want as you will see.