In the last section we got our first component to show up on the screen of our device.
So I'm using iOS on Mac right here some using the iPhone simulator.
If you're on Windows I'm developing for Android you'll see this in the Android simulator and as you
can see you know you could kind of see that we got some text right there.
But is does it look pretty ugly.
At least though we got some content to show up on the screen of our device and we've got a better idea
of what the import tags are what a component is and how we actually render to screen of our device.
So we will fix this up in just a second.
But before we do let's talk a little bit about the first application that we're going to be building.
And then we can come back and start to improve how this thing looks right here.
So let's open up a mockup of this first application that will be making this mock up of our app the
app's purpose is going to be to display the user with a number of different music records that they
can purchase like you know I say records I mean like actual CDs at the very top of the app will be a
header that simply says albums which is the name of our application.
Then below the header will be our list of albums right here.
I'm only showing a single one but we should have support for showing many albums that the user can scroll
through.
Each album will be represented by this kind of a big rectangle right here which we refer to as a card
on the header of the card should be a icon of the artist.
So like the singer or whoever created the record it should display the album's name the artist name
all inside the header.
Then in the body of the card which is this big X right here this represents the album image.
So like the actual album artwork it should be a nice very large image right in the center of the card.
Finally at the very bottom of the card should be a button that says by now and whenever a user clicks
this we should direct the user over to a page where they can purchase the album.
So we're not going to be building that actual purchase page we're just going to kick the user over to
an Amazon.com page inside their browser on the device where they can buy that album if they want to.
So again we're going to have many different cards like you know on the card as this whole old unit right
here is trying to say.
And we'll have one unit or one card for each album that we've retrieved or fetched.
OK.
So this is basically the application of rebuilding is our first one and we're going to focus a lot on
just the basics of react and how we use reac native to build an application like this at the start of
each app that we build.
We're also going to spend some amount of time to plan out exactly how we're going to tackle that project
in particular.
We're going to decide what different types of components we want to make.
As a reminder a component is a function that returns some amount of GSX and GSX is what tells reac native
What content we want to show on the screen whenever we build a re-act application.
We attempt to make components that are generally as reusable as possible so we can write one component
and then use it in several different locations throughout our app.
It's all about reuse of code for this application.
We're going to make several different components to build this application.
Here's kind of a diagram of all the different components and what they might be called.
We might make one component called Hetter component that will just sit at the very top of our application
then represent a single album.
We might make a car component so a car component has many card sections inside of it and each card section
will have some amount of content.
So the one at the very top will be you know the actual album or seeing the artist image with the name
of the artist and the album name.
And then another card section that shows the image and then another card section that shows the buy
now button.
In addition we might even make another component just to represent the buy now button.
We'll talk more about all the different considerations of when we want to make a reusable component
versus we want to make like a very kind of one off or custom component as we work throughout this application.
So planning out our Capones ahead of time like this just makes it easier later on to have a very solid
idea of the different parts of the application that we need to focus on when we're building it gives
like it just makes it easier to build the application when we know we want to make ahead of time.
Okay.
So honestly this is a pretty ambitious out to scrotes to start off with but I'm confident that we're
going to work through it and learn just a ton about re-act native along the way.
So let's get started with it in the next section