In the last section we generated a new project I'm not going to change into that new folder that we
had called pick's all started by Riak survey inside there and then I'm also going to open up my code
editor inside that new pix directory.
So I actually already went ahead and did that got my code editor right here inside the pix folder.
Before you start writing any code inside of your I want to do a quick overview on how we're going to
generally approach the design of our project.
So I'm going to flip back over to our mockup over here.
I want to talk about some of the different challenges that we're going to run into around this project
and kind of the distinct phases that we're going to break this project into and we'll also talk about
some of the different components that we're going to end up creating.
So first off what are the big challenges here.
Well I think you can kind of guess what some of the challenges are going to be based on the stuff that
we want to figure out over here that had mentioned in the last video.
So the big challenges are going to be somehow getting user feedback or receiving user interactions anytime
the user types a new search term into that search bar at the top of our application.
We need to somehow get that text and then do a search with that text.
So that's basically what Number two is as well.
Once we get that search term we need to somehow use that term to make requests to an outside API to
get our list of images we are going to use a free public service.
All we can do is throw it a search term and this outside free API is going to give us back a list of
images that match that search term.
And finally the last big challenge we're going to run into is taking that list of images and rendering
them as a list on the screen.
So essentially some things we just discussed over here.
We're going to try to tackle each one of these challenges one at a time so that you get a really good
idea of how we handle search terms or how we handle user input and then how we handle fetching data
and then how we handle dealing with less and the next thing I want to do is take this mock up right
here and figure out how we're going to break it up into a list of different components.
Remember if we wanted to we could build this entire application with a single component just one component.
Maybe we would call it the app component or something like that.
But in general we'd like to break our applications into multiple separate components just to get a little
bit more code reuse in the future if we decide to reuse some aspect of the application in some other
location.
All right so to break this thing up into separate components Here's what we're going to do.
We're going to make a search bar component that is responsible for Chush showing a text input at the
very top of the screen.
And any time that a user type something in there the search bar is going to handle that typing event
will also have a second component called the image list the image list will take a list of images and
just render them out as a list on the screen.
So pretty straightforward forward we're still going to have an app component as we have before in just
about every re-act application you're ever going to build.
You're always probably going to end up with an app component that is going to be at the very top or
the most root component of your application.
So our component hierarchy is going to look a little something like this at the top as our app.
The app is going to show an instance of the search bar and an instance of the image list never going
to end up with a couple other components inside the application over time.
But I'm not showing them on this diagram just yet because I want you to kind of naturally see why we
would decide to include or create additional components to the final application is not going to be
just these three.
We're going to have a couple other as well.
All right.
Let's take a quick pause right here.
When we come back the next section we're going to start creating our app search bar and image list components.