1 00:00:00,990 --> 00:00:02,840 I know this that took quite a while to build. 2 00:00:02,850 --> 00:00:07,920 But like I mentioned several times re-act native introduces many new topics. 3 00:00:07,950 --> 00:00:12,320 So for the first time through we took everything slow and from here we'll pick up the pace. 4 00:00:12,360 --> 00:00:18,600 Except of course when we cover any topic before we finish this out I want to discuss of the major things 5 00:00:18,600 --> 00:00:20,550 we learned as we worked our way through it. 6 00:00:20,760 --> 00:00:24,390 First we generate a project using the re-act me of CLID. 7 00:00:24,510 --> 00:00:31,320 This produced a new reac made of project capable of running in either the Android or iOS simulators. 8 00:00:31,380 --> 00:00:38,430 Next after we generate the project we started up the simulator using either re-act native run Iowa us 9 00:00:38,490 --> 00:00:41,010 or re-act native run Android at the command line. 10 00:00:41,030 --> 00:00:43,850 Remember that's how you start your application up in the simulator. 11 00:00:45,620 --> 00:00:51,110 Next once we had our app running we created quite a few different components. 12 00:00:51,200 --> 00:00:55,090 We found out that there were two different types of components inside of Riak native. 13 00:00:55,190 --> 00:01:00,770 We've got our class based components which are components that have access to component level state 14 00:01:01,100 --> 00:01:02,790 and life cycle methods. 15 00:01:03,080 --> 00:01:08,660 And then we also have access to functional components which are largely presentational components that 16 00:01:08,660 --> 00:01:13,170 just produce some amount of GSX and show some data back to the user. 17 00:01:13,980 --> 00:01:22,410 Speaking of state we use state inside of the album was a component state is a feature of re-act available 18 00:01:22,440 --> 00:01:28,290 only to class based components state is used to record and react to user interaction. 19 00:01:28,290 --> 00:01:35,730 So in our case we fetch a list of albums and then we assigned or updated our state using the set state 20 00:01:35,760 --> 00:01:41,640 call and or that we only ever update our state object with this data set state. 21 00:01:41,640 --> 00:01:49,860 We never do something like this dot state equals one because we call set state our component instantly 22 00:01:49,860 --> 00:01:56,700 rendered and show the list of albums that it had retrieved after we made our age TTP request. 23 00:01:56,700 --> 00:02:02,890 Next we created an album detail component by mapping over our list of items. 24 00:02:02,910 --> 00:02:03,790 Here it is. 25 00:02:04,080 --> 00:02:10,860 So we do have our list of items and for each album we had retrieved we produced one album detail a component 26 00:02:12,720 --> 00:02:15,090 passing this data or CD. 27 00:02:15,090 --> 00:02:23,160 We passed the album to the album D-Del. component by specifying by specifying a prop so prop is any 28 00:02:23,160 --> 00:02:26,330 type of data that we pass from a parent to a child component. 29 00:02:26,370 --> 00:02:28,890 That is the proper system. 30 00:02:28,890 --> 00:02:34,400 Finally we made extensive use of it of reusable components and science application. 31 00:02:34,410 --> 00:02:36,270 So we've got our button typed here. 32 00:02:36,330 --> 00:02:37,790 We've got our card. 33 00:02:37,980 --> 00:02:39,320 We've got our card section. 34 00:02:39,330 --> 00:02:45,330 And finally our head are all for these completely reusable components and they're serious in fact that 35 00:02:45,330 --> 00:02:48,180 we are going to make use of them on our next project. 36 00:02:48,180 --> 00:02:52,970 So we are going to copy and paste these directly over to our next project so please don't mess around 37 00:02:52,980 --> 00:02:55,450 them too much. 38 00:02:55,500 --> 00:02:58,380 So this is definitely a nice looking to start off with. 39 00:02:58,380 --> 00:03:03,070 We learned a lot but there's still a tremendous amount to learn about re-act native. 40 00:03:03,180 --> 00:03:06,650 So let's continue in the next section and start up our next.