All right my friends in this video we're going to start talking about the next couple of topics that
we're going to cover in react and the application we're going to build to better understand those topics.
So let's get to it.
First want to begin by telling you about a couple things we still need to figure out around the world
of react.
First off we still don't have a lot of experience handling user events like a user clicking on something
or typing on something or dragging something around on the screen.
So one of the big focuses that we're going to have on the application that we're going to build is how
to react or deal with user events.
Next up drew out all the applications we've put together so far we've been making use of either static
data or randomly generated data but in a real re-act application we very very frequently need to attempt
to fetch some data from some outside API or from some server and pull data out of some database.
So we're going to have a big focus on learning how we can correctly fetch data inside the reactor application.
And then finally this is kind of a very basic thing to understand as well.
How are we going to show a list of records.
So far we haven't really been building any lists of data.
We've been just showing kind of individual elements one at a time but we haven't been rendering a list
at its absolute core just about every web application that you're ever going to work on at some point
in time is going to need to show a list of data.
And I would be kind of hard pressed to think of just about any web app any very popular web app that
doesn't show a list of records.
So we're going to get a really good idea of how to show a list of records.
All right.
So with these kind of goals are these topics in mind user events fetching data and showing lists.
Well let's take a quick peek at a mockup of the application.
We're going to build.
All right.
So we're going to split the implementation of the project we're going to work on into two separate kind
of implementations I guess we're going to build it up to one certain point and then we're going to kind
of take a break right there and then go for a second and jump into it and develop it a little bit further.
So for the initial implementation of the app that we're going to work on it's going to be a pretty simple
and straightforward app but it will be pretty fun and interesting.
Trust me.
So you can't really tell what's going on from just the mockup here.
Essentially what we want to do is show a text input at the very top center of the screen.
A user should then be able to type in some text here.
So like they go to type in cars or plants flowers or buildings any term you could possibly imagine after
they type in that term and then press enter.
We're going to do a search or a request to an outside API that is going to find images or basically
just simple pictures that match whatever term that user just entered.
So if a user enters and cars and then presses enter I would want to somehow get a list of images of
cars and show them on the screen to the user.
So that's pretty much it for the V-1 implementation.
We're going to get all these different images that we're going to find and then just show them one at
a time going down the screen.
Not a lot of styling just kind of want to get stuff up there and focus on handling user typing something
in handling showing a list of data and handling somehow searching for images.
I guess that's the one what's out talk about V-2.
So like I said the V-2 version of this app is going to be you know a little bit more complicated.
And that's what we're going to break it into like two separate distinct phases.
So in the V-2 implementation we're going to do all the same stuff we're going to build off the same
project and we're still going to be having user type in a search term fetching a list of images and
then showing them on the screen.
But the difference is going to be how we show these images to the user in V-1.
We were just listing them straight down and chips.
The user would have to continue scrolling to see all the images we fetch in the V-2 implementation.
I want to kind of tile the images across the screen.
Remember that in general images tend to not be identical sizes.
They very frequently tend to be very different in sizes different heights different widths.
So I want to figure out some really clever way in which we can make sure that we have these different
sized images inside of here and still kind of tile them to all line up very nicely.
So that's going to be the V-2 portion this V-2 portion is going to be a little bit more on these VSS
and styling side.
But don't worry it's still going to have a lot of Riak specific topics and you're going to get a better
idea of how to integrate react with nonreactive code essentially.
All right so that's the idea.
Now let's before we take a pause let's generate a new application to house our code for this project.
So I stopped my season's project by adding control C or then go up one directory to my workspace folder
and back over here.
I'm going to use create re-act app to generate my new project and I'm going to call this thing simply
pick's like so.
OK.
So it's going to install stuff.
So let's take a quick pause right here we'll come back the next section and start working on this project.