For this module and for this app we're building,
again you'll find a starting project attached to this lecture which you can use to get started with
this or you can create a new expo app on your own of course.
Now this is the app I attached, very basic app with I'm your app which we can barely see which doesn't matter
because we'll not keep this text through anyways
and we only got that one app.js file.
Now a lot of the things I do in this module will be things you saw in the previous modules because obviously
that's the core idea here.
We'll practice what we learned thus far and there will be some new things or some patterns which might
be interesting to you as well.
Now of course in this app which I sketched out in the last lecture, we'll have a couple of screens, so
therefore we'll definitely need navigation and hence I'll add a navigation folder so that I can store my
navigation configuration there and
that's of course just one possible setup,
as I mentioned before, you can work with any folder structure you want and that works for you. Besides
the navigation folder,
I also want to have a screens folder here, in that screens folder
I also want to store the screens we can navigate between and I'll add a components folder for all
my regular components, of course screens
also are React components but the normal components I mean here are the components we don't directly
load as screens but which we embed into screens instead or into other components, so that's what we'll
have here. I'll also add a constants folder because again, I'll work with my color constants here so
that I can use my preselected colors throughout the entire application.
Now there are a bunch of different ways of getting started, what I like to do first in my apps is that
I start with the screens,
even though if I don't add the content to all of them yet, I like adding this general structure so that
I can always see what I still need to work on, which features are still missing.
So therefore, I'll add the screens which I'll have in this app
and here I'll do something which I haven't done before and which is totally optional but I'll organize
my screens into separate subfolders.
I'll have one folder with my shop related screens
and of course since we'll build a shopping app, all screens are kind of shop related but here I want
to have the screens which directly help us with viewing our products, with adding them to the cart and
so on
and then I want to have a separate folder and that's my user folder you could say, there I want to
have the user related screens,
so that would be my user products and administrating products.
That's how I will divide this
but of course you can organize that however you want.
So in the shop folder here for example, I want to have my products overview screen and that will be the
screen we see when the app loads where we have all the products to work with and where we can then select
a product or directly add it to the cart. We'll therefore also need a product detail screen, that's
the screen we see when we select a product and we want to learn more about it, then we can click it
or tap it and are taken to that detail screen. We'll also need a cart screen, that's unsurprisingly the
screen we see when we add an item to the cart or not which we then see but which we can visit to view the
item there,
so that's something we can do there
and I'll also add an orders screen where we can view our orders.
Now you could by the way argue that the cart screen and the order screen kind of belong to the user
folder because they are kind of exclusive to the user,
every user has its own orders and its own cart and therefore you could go either way,
I believe they are a bit more on the shop product related side
but again, that is totally up to you. In the user folder,
I want to have my user products screen, so that will be the screen where I see a list of all the products
that belong to that user and the edit product screen which is the screen we'll use for adding new products
or for editing existing products,
we will be able to reuse that.
These are the screens we'll work in throughout
this module and we'll not populate them with life all immediately right now, we'll instead work on that
step-by-step
but it is what we'll need.
Now of course, there also is another folder we can add already and that's the store folder where we
will manage our Redux store and our Redux state therefore which is our state management system
I want to work with which we of course need because we got many screens that all have to work on kind
of the related data and hence we need to manage that data, our products and what's in the cart and so
on
on some global level and Redux is really great for that,
so we'll definitely need that. On the same note, we also need to install some packages,
so I will run npm install --save and install Redux and also React Redux. We'll also need React
-navigation because of course we'll add navigation again, so we can already throw that in there.
I will also already add React navigation-header buttons because I will add header buttons here and
I want to have these nicely styled and positioned buttons without having to do all that styling
positioning on my own and that should be it for now.
So I'll install all these packages already, we'll need them throughout this module and with these packages
installed and these basic files created, we have a solid base setup to get started with.
Now besides these packages, we also need to install two other packages with the help of the expo install
command and that's react-native-gesture-handler, so expo install React-native-gesture-handler
and also the react-native-reanimated package. Both packages also need to be installed
with the expo install command.
Now of course, it's all about populating that with life and there
I want to start with the first screen we'll actually see which is the products overview screen.