1 00:00:01,270 --> 00:00:06,100 In the last section we generated a new project I'm not going to change into that new folder that we 2 00:00:06,100 --> 00:00:11,140 had called pick's all started by Riak survey inside there and then I'm also going to open up my code 3 00:00:11,170 --> 00:00:13,710 editor inside that new pix directory. 4 00:00:14,050 --> 00:00:19,810 So I actually already went ahead and did that got my code editor right here inside the pix folder. 5 00:00:19,990 --> 00:00:23,920 Before you start writing any code inside of your I want to do a quick overview on how we're going to 6 00:00:23,920 --> 00:00:27,200 generally approach the design of our project. 7 00:00:27,370 --> 00:00:30,700 So I'm going to flip back over to our mockup over here. 8 00:00:30,700 --> 00:00:34,030 I want to talk about some of the different challenges that we're going to run into around this project 9 00:00:34,090 --> 00:00:38,410 and kind of the distinct phases that we're going to break this project into and we'll also talk about 10 00:00:38,410 --> 00:00:40,990 some of the different components that we're going to end up creating. 11 00:00:40,990 --> 00:00:43,370 So first off what are the big challenges here. 12 00:00:43,590 --> 00:00:47,560 Well I think you can kind of guess what some of the challenges are going to be based on the stuff that 13 00:00:47,560 --> 00:00:50,950 we want to figure out over here that had mentioned in the last video. 14 00:00:51,030 --> 00:00:57,160 So the big challenges are going to be somehow getting user feedback or receiving user interactions anytime 15 00:00:57,160 --> 00:01:01,770 the user types a new search term into that search bar at the top of our application. 16 00:01:01,840 --> 00:01:06,340 We need to somehow get that text and then do a search with that text. 17 00:01:06,340 --> 00:01:08,580 So that's basically what Number two is as well. 18 00:01:08,590 --> 00:01:14,620 Once we get that search term we need to somehow use that term to make requests to an outside API to 19 00:01:14,620 --> 00:01:18,550 get our list of images we are going to use a free public service. 20 00:01:18,550 --> 00:01:24,040 All we can do is throw it a search term and this outside free API is going to give us back a list of 21 00:01:24,040 --> 00:01:26,630 images that match that search term. 22 00:01:26,690 --> 00:01:31,520 And finally the last big challenge we're going to run into is taking that list of images and rendering 23 00:01:31,520 --> 00:01:33,210 them as a list on the screen. 24 00:01:33,380 --> 00:01:37,130 So essentially some things we just discussed over here. 25 00:01:37,130 --> 00:01:42,500 We're going to try to tackle each one of these challenges one at a time so that you get a really good 26 00:01:42,500 --> 00:01:48,350 idea of how we handle search terms or how we handle user input and then how we handle fetching data 27 00:01:48,380 --> 00:01:53,210 and then how we handle dealing with less and the next thing I want to do is take this mock up right 28 00:01:53,210 --> 00:01:57,460 here and figure out how we're going to break it up into a list of different components. 29 00:01:57,470 --> 00:02:03,650 Remember if we wanted to we could build this entire application with a single component just one component. 30 00:02:03,710 --> 00:02:06,980 Maybe we would call it the app component or something like that. 31 00:02:07,220 --> 00:02:13,340 But in general we'd like to break our applications into multiple separate components just to get a little 32 00:02:13,340 --> 00:02:18,890 bit more code reuse in the future if we decide to reuse some aspect of the application in some other 33 00:02:18,890 --> 00:02:19,640 location. 34 00:02:20,630 --> 00:02:24,350 All right so to break this thing up into separate components Here's what we're going to do. 35 00:02:24,690 --> 00:02:30,090 We're going to make a search bar component that is responsible for Chush showing a text input at the 36 00:02:30,090 --> 00:02:31,800 very top of the screen. 37 00:02:32,010 --> 00:02:37,180 And any time that a user type something in there the search bar is going to handle that typing event 38 00:02:38,250 --> 00:02:44,380 will also have a second component called the image list the image list will take a list of images and 39 00:02:44,380 --> 00:02:46,860 just render them out as a list on the screen. 40 00:02:46,870 --> 00:02:52,240 So pretty straightforward forward we're still going to have an app component as we have before in just 41 00:02:52,240 --> 00:02:55,180 about every re-act application you're ever going to build. 42 00:02:55,210 --> 00:03:00,040 You're always probably going to end up with an app component that is going to be at the very top or 43 00:03:00,040 --> 00:03:02,960 the most root component of your application. 44 00:03:02,980 --> 00:03:08,340 So our component hierarchy is going to look a little something like this at the top as our app. 45 00:03:08,410 --> 00:03:13,780 The app is going to show an instance of the search bar and an instance of the image list never going 46 00:03:13,780 --> 00:03:17,920 to end up with a couple other components inside the application over time. 47 00:03:18,100 --> 00:03:23,380 But I'm not showing them on this diagram just yet because I want you to kind of naturally see why we 48 00:03:23,380 --> 00:03:28,750 would decide to include or create additional components to the final application is not going to be 49 00:03:28,990 --> 00:03:29,810 just these three. 50 00:03:29,830 --> 00:03:32,230 We're going to have a couple other as well. 51 00:03:32,230 --> 00:03:32,480 All right. 52 00:03:32,500 --> 00:03:33,640 Let's take a quick pause right here. 53 00:03:33,670 --> 00:03:38,680 When we come back the next section we're going to start creating our app search bar and image list components.