‫Now before we really start building the project
‫let's first learn about the way in which
‫we are going to style the application,
‫which is by using a library called Styled Components.
‫So Styled Components essentially allow us to write CSS
‫right inside our JavaScript component files.
‫And the way it works is that we take a regular HTML element
‫and then using the styled function
‫we create a brand new React component
‫with some CSS styles applied to it.
‫And we can then use and reuse that new component
‫instead of using the regular HTML element.
‫But let's actually do it in practice, of course.
‫And so for that, we need to install
‫the styled components library.
‫So NPM install styled components,
‫then let's wait for it.
‫And so now let's start using that styled function
‫that I just mentioned earlier.
‫So let's just write "Styled".
‫And so then we need to, as always, import that function.
‫And then here, let's say that
‫we want to style an H1 element.
‫And so we just write "styled.h1".
‫And then here we write a template literal
‫which is basically the string
‫in which we are going to write our styles.
‫And this is just a nice trick that leverages
‫the ES6 feature called Tagged Template Literals.
‫All right.
‫And so here, as I was saying, let's now write some CSS.
‫So let's say that we want this H1
‫to have a font size of 30 pixels,
‫and then a font weight of 600, let's say.
‫And so this will now actually return a new component.
‫And so let's save that inside a variable called H1.
‫And since this is indeed a React component
‫it needs to start with an upper case.
‫So just like that.
‫And so now inside our app here, we can use that.
‫So H1, and then let's say "the wild oasis."
‫And if we save this now, then indeed
‫now we got this H1 with our styles applied.
‫So let's actually inspect this here.
‫And so, indeed, here we have the H1
‫and here we have the styles applied to it.
‫And so behind the scenes what the styled components library
‫did was to create this randomly named class
‫and then assigned it to our H1
‫which is where then our styles appear.
‫So basically they created this class
‫where then our styles appear.
‫So this right here is exactly what we wrote here.
‫And so what's great about this is that
‫that this CSS that we just wrote is of course only scoped
‫to this exact component, which eliminates all the problems
‫of global CSS that we talked about earlier
‫such as name collisions between class names, or for example
‫another developer changing the class
‫without some other developer knowing about that
‫which would create all sorts of problems.
‫And so this fixes that because again, this style right here.
‫So this CSS will only be available for this exact component
‫which we can then use all over the place in our application.
‫Now, in order for this CSS here
‫to actually have this styling,
‫so where it looks like actual CSS,
‫we need a special VS code extension.
‫So let's install that.
‫So styled components, it should be called.
‫So yeah, I think it is exactly this one.
‫And so let's make sure to install it here.
‫And so then from there on your CSS will look just like this.
‫And we then also get this auto completion
‫as if we were writing CSS in a normal CSS file.
‫All right, and of course, now we have some more styles here.
‫And so this is how styled components essentially work.
‫And so let's keep going.
‫Let's write ourselves some other reusable components.
‫So let's say we want a button now.
‫And so we do "styled.button".
‫And so again, it is button here
‫because that's the name of the HTML element.
‫So let's say we want a font size of 1.4 rem,
‫a padding of 1.2 rem, top and bottom
‫and 1.6 on the sides.
‫A font weight, let's say of 500.
‫Let's also remove the border and give it some border radius.
‫Let's say seven pixels, and also a background color.
‫And let's use purple here.
‫And then let's change the color itself back to white.
‫All right, let's give ourselves a bit more space here.
‫And so just like before, we can now start using this here.
‫So let's say "check in"
‫and beautiful, there we have a nice button.
‫Now what's really cool and really helpful about this is
‫that these styled components actually are able
‫to receive all the same props that the regular HTML
‫or JSX elements can receive.
‫So for example, we can just as always use the onClick prop
‫in order to attach some event handler here.
‫So let's say we wanted to alert.
‫And so if we click here now, then indeed we get that alert.
‫So without us having to do any additional work,
‫where before if we were to create our own button component
‫then we would have to manually accept
‫the onClick prop in there
‫and then pass it to the regular HTML element.
‫So we did that many times before,
‫but here, again, we don't need to do that.
‫And of course, we can also reuse this
‫as many times as we want.
‫So let's say we have one for checking out.
‫And so there it is.
‫Let's add a bit of padding or actually of margin there.
‫Let's say 20 pixels.
‫And let's also give it a cursor of pointer.
‫So check in and another one check out.
‫Great, and let's keep going.
‫So let's do just one more
‫which is going to be an input element.
‫And of course we can call them anything that we'd like
‫but usually what we do is to just give them the same name
‫as the HTML element here.
‫But of course with the uppercase.
‫So let's give them a border
‫of one pixel solid and let's say "#DDD".
‫A border radius of five pixels and some padding.
‫So, 0.8 rem and 1.2 rem on the sides.
‫All right.
‫And then again this input element can now accept
‫all the same props as the normal JSX element.
‫So we can say, for example, the type should be "number"
‫and let's add some placeholder "number of guests."
‫And so there it is.
‫And so this is the most basic and most fundamental way
‫in which we can use styled components
‫in order to basically build these small reusable components
‫like these ones.
‫But now the question that you might have is,
‫how do we actually style this app component itself?
‫Because app itself is of course already a component.
‫And so if the styled function here also returns a component
‫then how can we do this?
‫So basically what we want to style is this div right here.
‫Right? And so what we can do is to create
‫yet another styled component only to
‫basically replace this div right here.
‫So let's do that "Styled.div."
‫And then here a convention is to call this new component
‫"StyledApp."
‫Alright?
‫So let's write our styles here.
‫Let's say we wanted a background color "orangered"
‫to make this design even more ugly
‫and then a padding of 20 pixels.
‫And so as I was just saying
‫we can then replace this entire div element right here.
‫So we already have that div here
‫and so now we have a styled div.
‫And so let's use that here.
‫Of course, closing it down here and nice.
‫So let's again distinguish between
‫the two different things that we did here.
‫So first we created some simple reusable components
‫which we can then think of primitives of our user interface.
‫So for example, if we want a reusable input element
‫we just call that input here and then use that
‫all over the place so we can, of course again
‫reuse this as many times as we want.
‫And then if we want to basically style the component itself,
‫so a component that is already pre-built,
‫then we have to do it in a slightly different way.
‫So if the component is called App,
‫then the convention is to create a styled component,
‫which is called StyledApp
‫and then we apply all the styles to that
‫and use it instead of the regular HTML element
‫that we had here before.
‫So we had this div and then we replaced that here.
‫And so then of course, this is exactly what we have here.
‫So that's the div with that background color.
‫And if we wanted a main,
‫then all we have to do is change that here.
‫And then in our HTML we get a main instead of a div.
‫All right, and so this is basically
‫a very basic crash course into styled components.
‫But next up let's build on this foundation
‫and learn how we can include some global styles
‫using styled components.
‫For example, for things like CSS resets
‫that need to apply to the entire page.