React Styled Components Tutorial and Project Course | John Smilga | Skillshare

React Styled Components Tutorial and Project Course

John Smilga

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
54 Lessons (6h 46m)
    • 1. 0 styled course intro

      3:23
    • 2. 1 course structure

      2:09
    • 3. 2 styled components intro

      1:47
    • 4. 3 course requirements

      0:56
    • 5. 4 install application

      2:43
    • 6. 5 spring cleaning

      1:53
    • 7. 6 inline css

      2:39
    • 8. 7 global css

      1:17
    • 9. 8 css variables

      4:23
    • 10. 9 file css

      4:30
    • 11. 10 global name collisions

      1:06
    • 12. 11 install styled components

      2:04
    • 13. 12 basic syntax

      8:51
    • 14. 13 seperate file

      4:28
    • 15. 14 VS CODE EXTENSION

      2:06
    • 16. 15 variables

      3:21
    • 17. 16 variables advanced

      5:40
    • 18. 17 nesting selecting styled component

      5:55
    • 19. 18 props basics

      7:00
    • 20. 19 ternary operator

      1:44
    • 21. 20 global styles

      4:26
    • 22. 21 extended styled components

      5:04
    • 23. 22 extending continued

      5:39
    • 24. 23 styling react component

      6:14
    • 25. 24 hero component

      11:57
    • 26. 25 banner compnent

      9:44
    • 27. 26 attrs method

      9:42
    • 28. 27 css helper function

      7:44
    • 29. 28 animations

      8:38
    • 30. 29 theming

      33:06
    • 31. 30 media queries

      7:25
    • 32. 31 media with object

      6:31
    • 33. about project

      0:55
    • 34. 2 project intro

      3:05
    • 35. 3 setup files

      2:20
    • 36. 4 styled hotel install application

      3:17
    • 37. 5 styled hotel folder structure

      13:05
    • 38. 6 styled hotel global styles

      14:06
    • 39. 7 styled hotel helper functions

      10:12
    • 40. 8 styled hotel polished js

      2:08
    • 41. 9 styled hotel hero component

      11:25
    • 42. 10 styled hotel setFlex setBackground

      16:55
    • 43. 11 styled hotel banner component basics

      11:10
    • 44. 12 styled hotel banner component basic css

      7:44
    • 45. 13 styled banner component helper functions

      12:10
    • 46. 14 banner animation

      8:31
    • 47. 15 primary button

      16:56
    • 48. 16 as prop

      2:45
    • 49. 17 Section and Title Components

      11:05
    • 50. 18 about section

      14:34
    • 51. 19 rooms component setup

      9:14
    • 52. 20 rooms component

      16:08
    • 53. 21 single room component

      25:52
    • 54. 22 css grid shortcut

      8:46

About This Class

As styled-components co-creator Max Stoiber says:

“The basic idea of styled-components is to enforce best practices by removing the mapping between styles and components.”

Styled-Components are part of CSS-in-JS movement where we can create components that possess their own encapsulated styles.No longer we need to create component decide on a selector and then rush to app.css or any other stylesheet to write separate styles for that particular component. What makes Styled-Components so cool is their awesome tagged template syntax that allows to create normal react components by only defining styles.With zero configuration styled-components support css modularity, variables in css, nesting in css, extending components styles and many more. Styled Components also allows us to  write plain CSS in your components without worrying about class name collisions

Transcripts

1. 0 styled course intro: Hey, guys, welcome to Styled Components tutorial on projects course where we will get to know what our style components, why we would want to use child components, how to add styled components to our application. And at the end of the course, we will build interesting project using styled components what in the world we will build in Styled Components Beach Walk, Resort Project. And I guess before we take a look at actual project, let me tell you my reasoning Behind the project two main goals of the project was to show you how we can use styled components to make our CSS reusable beat in a different section on page or project altogether. And second, how we can leverage the fact that we can use JavaScript installed components and by doing so, improve our workflow tremendously. That should cover why. So let's take a look at a actual project. We're going to start off with a header section on within the header section. There's gonna be three components that we will be able to reuse all throughout their projects, sections or pages. So the first thing we're gonna be this massive hero component which we're going to serve as our background than the middle one, which will be banner. And then there's also gonna be the button. We also gonna take a look at how we can implement animation without our banner using these style components. Next one up will be about section on first and foremost. We're gonna take a look at how we can create a section component meaning for each and every section. We're gonna be adding the component that will gonna have some default values more precisely patting as well as we're gonna be able to change the color. So the only difference if we would want to get a colorable just gonna have to pass a prop in the style components and we're gonna get a different color 40 section. We also, we're gonna take a look at title. Now we can make this reusable on. As you can see, this is where we're using the button. As far as the helper functions. By this time, we already have created many of them. By the time we're gonna be done with this section, however, the most noticeable on probably would be border. So as you can see, we're gonna have a border and we're gonna create a helper function that allows us to create borders very, very fast on. Then we're gonna have our room section when there is going to be quite a few more CSS properties, Of course, because as you can see, as I'm hovering, there's gonna be some, however, effects the prices showing. Then we're also gonna have a shadow as I'm hovering. Noticed the box shut. I was increasing on also were using the button here. Now, this is the same button that we created before. But since we use style components, we can extend our component on just change whatever we would like to change to make it more specific. So in this case, we just made a batting smaller. So that way we don't need to rewrite our CSS. We already have original CSS, and we just extended the button on made its more. I also want to let you know that we will going to use media queries so the key friends will be used from styled components. As you can see, the project will be responsive, So depending on screen size, there's gonna be either two column layouts or three column lands and so on and so forth. Hopefully, you guys enjoy the project and let's start building it 2. 1 course structure: Hey, guys, it's good to see you on. Welcome to the course to start off. Why don't we talk about the course Structure course will consist off to parts tutorial part on the project, part in tutorial part. We'll get to know style, components what they are. Why would want to use them in the first place, as well as understand the basic syntax off styled components during the project part, we'll put our knowledge to a good use by implementing style components in our application. Straight off the bat, I want to let you know that during the course, we will use, react and more specifically created react up to bootstrap our applications. So even though I will cover it in more detail in the course requirements video, a basic understanding of react is required to succeed in this course. I also elect let you know that during tutorial part, we will mainly work with simple examples like buttons or boxes, because I don't see the point off over. Complicating are examples, since our main goal in tutorial part is to simply understand these Intacs off styled components. Once we get to the project, that's where we'll be off to the races to use style components in real world situations. In the resource files off every video where we actually write code, you will find a source code for that particular video. Just please remember to run NPM install first to install all the dependencies. The last thing that I would like to emphasize is a simple fact that many times when you will use style components, there will be multiple solutions available to you off how to tackle the same problem. And you will have to determine which solution makes the most sense in your particular case . During tutorial, I will try to show you as many options as possible, but during the project, I will make some choices based on my preferences. That doesn't mean that they are absolute truth or that you need to follow them to the letter ive you like. One of the other options better feel free to use it 3. 2 styled components intro: all right, let's start our journey by figuring out what are styled components. The main thing we need to understand about style components is the simple fact that styled components allow us to create components that possess their own encapsulated styles, meaning no longer you'll go through these following steps. First, create a component, then decide on the unique selector name for that particular component is and rush over to abscesses or any other style street, for that matter and write your style separately instead, as it was said by one of the creators of cell components. The basic idea. All the style components eased to enforce the best practices by actually removing the mapping between styles on the components. Styled components are part off CSS in Js movement, which is getting more and more common in the modern front and development, especially in react community. The reason why style components stand out from the list is because it's tagged template. Literal syntax allows to create normal react components by only defining the styles right out of the box. Styled components supports such things as CSS modularity, where we don't have to worry about the style collisions use off CSS variables nesting in our seizes on extending components. That's and that is just scratching the surface off all the things styled components canoe with zero configuration as a side note. Style components dot com is where we confined documentation and examples for style components and during the course will use docks as our reference. 4. 3 course requirements: As far as course requirements go, there's really only one, and that is to have a basic knowledge of react because we will use reacting, are examples and more specifically create react up to bootstrap our react applications. Since this is not a react course, I will not go into great detail anything specifically related to react or how to bootstrap react application using create reactor. The very basic requirement would be that you already have the create react app installed on your computer or understand the following two commands one for creating react application on the other 14 starring the deaths ever. I also would like to mention that during the course, we will use quite a bit of CSS and even though I will try to explain as much CSS as possible at the end of the day, our main focus of the course will be styled components 5. 4 install application: In order to start working with style components, we will create a new react application. In general, we have two options. If we have installed, create react app globally, we can just run, create react up on the name of the project. Or alternatively, we can run and PX create react up on the name of the project. Since I have create react app installed globally already, I think I will go with option number one. No person foremost Let me close the suggestions. Let's open. I'm determine all. I will zoom in first and foremost just so you can see more clearly off. What am I tapping? And then I will navigate to a to stop. So let's say CD desktop. Once I'm in the desktop, I would like to create a new react application. So let's write a command off, create react app on, then whatever name for your particular application. So in my case, I will go with tutorial. But it was always you can call this. However you'd like the moment I run the command react, we'll start installing all the dependencies. But since it's takes a while, I will stop the video and resume once my application has bean scaffolding. Once my application is ago, let's open up our text error, which in my case, is visual studio code on Let's in fact get our application into our text. Better now, in my case, I will use a symbol dragon drop on. Sure enough, right now, my application, he is sitting within my text. Better now there's two more things that I would like to dio. First of all, I would like to set up my browsers because there will be two browser windows. One smaller browser window will showcase everything that we're doing in the real time. So let's said this side by side with my texted her like, so side by side. Then let's navigate back to a dead stop, and I will close the terminal right away because I will around the integrated terminal from the visual studio code now, nor to access it. You press control until that. So this way we can access the integrated terminal, and as you can see, it shows that we are already sitting within my project. And then let's run the deaf server so and PM start that will start off the deaf server and Like I said, I will have to browser Windows open one smaller one, which will showcase everything that we're doing in real time as well as I will open the 2nd 1 on the bigger browser window, just in case I would want to show you some things how they look, in fact, on the bigger browser window. 6. 5 spring cleaning: since created React Up comes with some boilerplate. Let's do some spring cleaning first, meaning Let's delete some files and JSX as well. A set up some folder structure person for almost. Let's navigate back to our project. Then within the project, let's head over to objects and then within the AB. Jess, let's get rid of this import for the logo as well. Is like I said, slim down our JSX where currently we have everything here. As you can see the Dave we the class have happened all that and you know it. By the way, I can also close the integrated terminal. I don't think we'll need it. I will going to select this whole Div like So I will delete everything. And then within the return, why don't we go first, all with some simple death and then within the deaf? What Start with having one? Ah, no styled components styled components like So let's say that on once we have set up everything here within the heading one. I also would like to in fact the lead the logos region once delete this guy. Yes, we would want to do that and then within the abscesses. Why don't we select everything that we have within the abscesses? Delete it and then let's just add a little bit of marching all around just so we can see a little bit clearer off what we'll be doing here on the right hand side. So let's select the whole body and let's say Margin, why don't we go with you, Ari? EMS. That will be my margin all around. And lastly, I would like to create a new folder within the Source folder by the name of components. So let's say new folder on I will zoom in just so you can see clear. What am I typing on? Let's call this components like so I'm sure enough we have our folder. Once we have our general set up, we are ready to move on to our next subject. 7. 6 inline css: before we deep dive in the wonderful world off style components. Why don't we take a quick look at general ways of how weaken style our react applications? Granted, we don't have time to cover options like bootstrap or cess, but I think it would be very useful if we would quickly cover following options. And those would be in line. See assists, Absi assists or styling coming from the abscesses or index uses, as well as use off CSS variables and finally, styling from the single file. Now our most basic option would be in line CSS. So how it would work? Well, let's say we will have some heading to on. I'm gonna give it a heading to tags. And then, of course, I'm gonna right in line in line styles, something like that. Let's say that, and if I would like to style this particular element, I would just need to add a style attribute on. Then the only gorgeous would be the fact that since it is job script that were in fact writing, we would need to remember that the value should be in the quotation marks as well as whenever we were sitting on the properties. They should be capitalized now How it will work. Well, let's say color on, like I said, for the values they need to be in the quotation marks. So if I would want to go with color red, then I just need to place it within the quotation marks. And if I would like to have a property that requires a hyphen, let's say text transform that Instead of using the hyphen, we will use a capital casing where, as you see, we're not typing text hyphen transform. In fact, we're typing text than the upper case. 40 on. We have the property name, then for the value. Let's go without an opera case again, let's remember that we need to place it within the quotation marks. Then, once we save it, of course, we have applied other styles, and last thing within the object the justice in tax would be that we have to add the comma in between the items on. Sure enough, we have are successful in line styles, and technically we could style all our application this way. Now, of course, that would require a lot of manual labor, because for each and every case, we would have some kind of I don't know element or even component. We would need to do that manually, jump from one another and then keep on adding the styles. So there, of course, has to be a better option on that. Better option, at least for the time being, would be adding everything within the Abscesses War Index CSS file. 8. 7 global css: if we do decide to go the global ceases route meaning at all our styles from one file in our case, that would be app or in excess. Is the set up would be following? So let's say we will create another heading now, In this case again, we'll go with airing to on this will be global CSS that will be detects. How are we would want to come up with some kind off selector, meaning some kind of identify where so later on, we can use it as a selector within RC ASUs. So let's say I'm gonna go with a class on that particular class name will be I don't know, global. Let's go with global. And once we have our class, we can head over to AP CSS and then within the abscesses weaken Just target our class. So in our case, the name is global on. I could just apply whatever CSS I would like. So in my case, I will go with color green as well as same old text transform on. Why don't we go with capitalize? The moment will save it. Our styles will be applied and again it is the same scenario where we could technically style or our application using the Abscesses War Index thesis or just one CSS file in general. 9. 8 css variables: within the CSS files. We can also create something called CSS Variables or the fancy way of saying that or the proper way of saying that would be see, assess custom properties that allow us the store, our style, values and, by doing so, eliminate some painful labor. So what's take a look at the example? Let's imagine scenario where within the objects, I will create two more headings. Now let's say heading to will have a text off. First on, I will copy and paste that and let's say 42nd heading the next will be second very, very original. Now, for the first heading, I will also add a class with a value off first and then for the second heading, I'll do exactly the same. How old? A class name, of course, will be second once I have this particular set up, let's also imagine that within the abscesses, I would like to target both of these classes. So let's say I would want to target the first class on for the first class. Why don't we had some letter spacing on that would be at home five pixels. Something like that. Our color for both of these classes, I would want to have exactly the same. And for this particular color, I'm gonna go with a orange one So hashtag f 15025 and once we apply our color on save it, let's see what we have. One right inside. And yes, my styles are being applied correctly. Now we can also, of course, camp infested. And let's say that we will target the glass off second. So let's delete That's right, class of second. And you know, instead of letter spacing, why don't we look for a text transform so text transform on will use upper case value for that? Now let's say it on. Everything works really, really well. Let's imagine this wild scenario where I will add some other CSS on. I will do that using the comments So some other CSS and let's imagine this wild scenario where down the line I don't like this particular orange color, so I would want to change it in all the instances where I have this particular Olin's car. Now you could say, Well, it's not a big deal, you know. You could select both of them using command d war. We could even use the global search for duck and all that is doable. Yes, and that is correct. But don't you think it would be a little bit useful if we would use something called CSS Variable where we could store this particular value and then we only would want to change it in one place. So let's go over how it will work, person foremost This syntax is following where we would want to target in fact, the route. So in this case, I'm saying a colon and I'm writing route on What, in fact I'm selecting is the html element. And then the syntax is following where we have two hyphens than the name off the variable, which in my case, will be primary color. And again, in this case, I would want to set up, of course, some kind of value. So I'm gonna go with a orange one and then in order to use this particular value instead of writing this the old way the hard coating way we can do something like this. We're all right. Var and then the name of my variable, which in my case, will be primary color. So the same thing I would like to do for the class of second. So again, let's get her of this heart coated value on Let's go with our variable Where again? I'm gonna go with same variable name because I would want to use the same car. You know what? Let me also closed the global search on If I would want to change my mind later on. And let's say if I would want to go with color of blow, I would just want to change it in one place and both of them will be applied right away. You know the reason why I'm showing you the seasons Variables? Because once we start covering the style components, we can also use CSS variables within these style components. So this wasn't just run the video you'll see later on how useful it is. The fact that we can use, in fact, our seasons variables within the styled components 10. 9 file css: while riding all your CSS in one file is a decent option. One problem you will encounter is the size of the CSS file. Because let's think about it. The bigger your AB gets, the more style rules you'll have on. As a result, it will be harder to navigate around your CSS file. So one solution to that would be creating a separate CSS file for each of the components that you have within your application. So why don't we tested out within the components? That, of course, is our folder way we would like to store our components on. I will do men on. Let's say we would like to create a new file now that particular file name will be title Js and then also right away. Let's create a CSS file. So let's right. Okay, there is new file and then this pile name will be titled. How are the extension? Will be CSS. Once I have both of these smiles, I will zoom out and then, since the title Js is in fact component, I would want to create as a react component. Now there's multiple ways how we could do that. But since I do have my extension for my snippets. And by the way again, the extension name was this ES seven react Redox graft. You'll react native snippets in order to create a functional component. I just need to type a snippet. Now we have an option off creating a arrow function snippet. So this way we would want to have our A FC that will create a functional component as an r a function or weaken go with RFC that we're going to create a simple, functional component. Now, by the way, we can also go with class component and it will be RCC. So I will go with Farrell function. So that's the reason why I'm gonna type R A f c. And then once we create a component, let's just have you know, a heading one here on then right away for this particular heading one. Why don't we had a class name also with a title and then we didn't heading one. The text would be something like this. Ah, hey, I'm from title component like so not save it. And there's two more things that we would need to do. First of all, of course, I would want to import it within the AM Jazz. That's step number one on Second applies some styles as well. Import the title series is so first of all, let's head over to Hap CSS More. I'm sorry and Jess, and then let's import our title Jazz now, since we're doing the default export like so I could name this horror like, but we're just going to stick with title Someone's go with title. Then we will look in the Components folder. So in this case, it is just one level up on. That's the reason why we look for the components than we look for the title and I don't know, maybe right after the heading to the last time, too. Why don't we render our title component? Let's save it on. I can see in right inside that I do have successfully imported my title Js component and then, like I said, there's two more things we would need to do. First of all, let's import also right away, our title ceases, so let's write import and then we're looking for, of course, our title CSS for so since it is sitting within the same folder, we just need to type the name of the CIA assessment. But since it is CSS from not a jobs Group one, we would want to add a full extension. Like I said, finally, within the title CSS. Why don't we had our styling where we have a title class on a gun? Why don't we go for color on? Why don't we go for the orange color if 15 0 to 5 and then text transform again? Let's make the text uppercase on. Let's see how these styles will be applied. And of course, everything works really well on there. We go on right inside. We have actually specific component on We did the styling using the separate CSS file, and that way we avoided over populating our CSS file because in this case, as you can see, the styling is in a separate file. So that way our style, she doesn't get massive 11. 10 global name collisions: one gosh, about setting up our CIA says this way is the fact that even though we're writing our CSS in separate files, we still need to be careful off the global name collisions on the simplest way of showing. That is, if we had over back to title CSS and let's imagine that by mistake again, we probably wouldn't want to do that on purpose. But let's imagine that by mistake, we will target any of the classes that we have within the abscesses, and I'm will go with a global one. So let's start get Global on instead of, say, having a color off green, I will decide on color yellow on. Let's notice something interesting on the right hand side were even though we were setting up everything within the absence since. In fact, since we also targeted the same class from our title CSS, we are overriding this, so we still need to be careful off the global name collisions even when we're writing, the CIA says in the separate files 12. 11 install styled components: Once we have looked at typical problems we the regular CSS. I think it's a great time to introduce styled components. Now, since it is a external package, we will have to stop the deaf server on install it. So I will open up my integrated terminal because you can see my death service currently running. But I would like to stop it on the way we stopped. The server is by pressing control Fancy. Once we do that, I will also hear it just so we have more room and then we can either type command npm install. There's dash safe style components war. We can head over to their documentation and I'm gonna show you where you can find the command. So within the darks, we had over four documentation and then within the documentation will look for the basics and then within the basics, there will be installation tab. Just look for the top. I'm sure enough we will have our command. So in this case, I will copy and paste the command. And while I'm installing the style components, I will do a little bit off spring cleaning on also as a side note. If you would like to access the previous code that we wrote because I were gonna deal it right now just head over to a previous videos and you will be able to find it within the resource is so within the objects. I don't think we'll need a title as well as these comments. Don't delete all of them. And you know what? I will also have a empty def, so I'll delete everything here and will say hello from up on. Lastly, within the components, I don't think I will need neither the title CSS war title jazz. So let's select both of them on just delete them. Since that way our app will be a little bit slimmer. Once we have installed our package, I will start the deaf server. So again, let's write and PM start to start our their server, and now we can start exploring the styled components 13. 12 basic syntax: once we install styled components next one up, why don't we take a look at the basic syntax or how we can get up and running with styled Component First things first. There is no better place to start than their official documentation. How are I think? The A B I reference, explains Debus. So instead of looking through the basics who had override away to a a p a reference and then within the a p, a reference will fall along off. What are their suggested steps? Person foremost. We need to import styled from style components. And since it is a default export, we don't need to use the curly braces. Once we have imported this style, then we would want to come up with a component name. So we will create a component on well, store that component within the variable. Now, variable name is up to you. But as you can see within the example, they go with constant. And then they said this equal to a button. Now that is there, of course. Variable name? No. Once we set up the variable name then in fact, we are creating our component on the way We do that is by using the styled than that. And this is where things start to get interesting. We're right after the dot We have multiple options. If we would like to create a HTML moment, then we just write a element name. So as you can see in this case, they are using the button. It would like to create an article well right. Article it would like to create a diff will write a diff, however, were not limited to just creating HTM home. It's. We also can in fact create styled components as well as react components. Now the worry will get there. But let's just start with a basic syntax. Then, once we have decided well what element we will create, we'll need to add these tag template officials. Or in fact, those would be the back ticks. Now, since I think it's a little bit easier to show you as we're creating our own component, why don't we do this? Why don't we head over back to our project and start creating our first component? And then I will go over well, what is in fact, the tag template literal. First, let's import the styled So it's right styled from on. Of course, we're importing from style. Component on. Why don't we, right? Right after on the comments are first component were our first official styled component. Now I will follow the same Sendak's where there will be a variable on. I will go with Okay, I will not be very original on. Like I said, we need to write styled. That is the syntax. And then we're coming up with whatever element we would want to create. Well, since I already named Button there might as well go with HTML button element, but I could have written this as a Div. Like I said, I could have written. This is an article on. Hopefully you get an idea now. Instead, I will go with the button that is the component of creating. And then, like I said, we have our tag template, literal syntax. So what is going on over here? Well, we know that from the six we got the template. Liberals correct where, unlike the string, we have multiple more options. For example, the simplest way is we can in fact inter Pilate the values where, if I would want to use some kind of arable underside of the dollar sign as well as the curly braces. Now what styled components are utilizing our tag templates? Officials style are components on the way tag template. Literal work is if we have a function and then right after the function instead of the calling function, using the parentheses on That's not what I wanted to dio. Let's using the parentheses, how we normally would call the function. Instead, we use the template literal on for the example of styles components within these template laterals. Right now, in fact, we can write whatever CSS we would like, and they will be applied for this particular button. It's always of course, I need to show you how it works, So why don't we write color? That, of course, is my property, and by the way again, you can go as wild as you would want, as you would with regular spaces and check it out. We didn't have to use any kind of weird syntax, meaning we didn't have to put the value in quotation marks or anything like that, we just wrote, just like we normally would write, RCs is, and if you would want to add more properties and values. We'll be my guest. Let's go with background on. Why don't we head over and say Background will be below as well as I don't know, text transform. We can also maybe make it an uppercase. That's right, upper case on. Then these will be styles that will be applied to my styled component. But But, of course, on right inside. Currently, I don't see anything in a browser. So in order to render our style component, we would want to, in fact included in our JSX. So what is the name off our style component. This is where naming becomes important, meaning If you name this banana, make sure that you are in fact accessing the banana. What's save it on? I could see that I have the button, but since it is html element by the name of button, of course, we also would want to play some kind of valley, correct. So we still need to follow the standard practices. So within a button, that's right. Click me something like this. Let's save it on. We can see in the browser that we have successfully created the button now currently nothing is happening when I'm clicking the button. But what's really cool about style component that we can truly create a reusable components where I can reuse this button all throughout this particular project? Or if I really wanted to say if I have some kind of unique styles that I would like to reuse throughout my other projects, I can do it as well As long as, of course, I'm importing the style components within those particular project. So the component that I created is truly your usable. Still not convinced. Let me give you another nifty thing that comes with style components, because at the moment you're probably thinking eso what's the big deal? You create one component. There's in fact, using the button element from the HTML. So what happens if you create another button? You probably will have some kind of name collisions. Okay, let's test it out. Let's in fact, copy and paste this whole thing because I think it will be a little bit faster. So it's copy and paste that now. One thing we need to remember that that we are still sitting on the variables, so we cannot have. Of course, the same variable name. So what? Are we right? I don't know. Second button, more button number two. I'm gonna go with second button on again. I'll use the same button just so you concede it. Everything is working actually correctly. And then there is no black magic hour for this button. Why don't we go with a background of red on? The color will be blue Let's change this around. And in this case, within my J six, I will not access the first component as we already did that but I relax is the 2nd 1 Now I do think that it will be easier from just a copy in praise that on Let just right second button on. I'll say Click me. I am second, something like this. And then on the right hand side in the browser, I can see that currently I have two buttons and let me show you. Where is the Magic Woods? Tell components why we don't have any collisions. Any global CSS collisions on the answer is very simple. So we have our bigger browser. And if we had over Teoh a council more if we had over basically to our developer tools. You'll notice that for both of these buttons, there will be a unique class. And no, we did not create this class. This is in fact, what is happening behind scenes where each and every time you will create a component using the style components, they will get this unique class. So that way, whatever styles your place for that particular component, well, you will not be overriding them anywhere else because that particular component will have this unique last name. 14. 13 seperate file: while creating our style, components and objects is great. Essentially, we're not utilizing another great feature of styled components, a fact that weaken store them in a separate file. So why don't we fix that? So let's say somewhere within the source or you can also place it with components. It is really up to you. I will create a new file. Now I will call my file Buttons Jails. But as always, you can call this however we would like now, within this particular file, I would like to copy and paste both of my style components. So let's get it out from the ab Js. Let's copy and paste that. But we do need to remember one thing that in order to create a style component, we will need this import from the style components. So it's also at that on. Lastly, we would want to come up with a weight off how we can export it because the same rules will still apply. We will work with components Also, the same will work with style components where if I would want to make, let's say, one of them as default export, well, I'm just gonna write export default. However, since I have a few of them, I think I'm gonna go with export. And then whatever name I would like in this case, I will leave it as export comes button on the same thing. I'll do 42nd 1 now. Both of them have bean exported. And now within the objects, of course, E file server. And now there will be a big, beautiful error where it will say, you know, the button and second button. Well, both of the components are not defined, but we already know that. Of course we can import it. Well, say import. Then we do need to have the name import because we didn't do the export default. So in this case, All right, button from on. Of course. I'm looking for the file name off the buttons. Now, I woke up in place. That on, of course, in this case, we're looking for the second, but how it is still coming from our buttons file. But save it and there will be nowhere. So, again, not only we have no naming collisions. Global naming collisions not only weaken reuse it all throughout our project or any other project. We can also just store it in a separate file. So that way we don't have to unnecessarily clog up our other components. No. Lastly, why don't we take a look at that? We can still do the import in the another react component as well. Meaning were not limited to just rendering them within the objects on. In order to show you that example, I will have over back to a components file. What's great, another one. And in this case we will head over and say that the name for my particular file will be header Js now within the header Js again. It will be a functional component. And then let's say like this. Let's say there will be a adding one hello from better and then let's just grab one of the buttons. Doesn't really matter which one. I will go for the button because I think it will be a little bit easier from. And then again we need to leave in fact, our components folder and look for the buttons fold. So let's say right off 30 heading one again. I would like to render this particular button now within this button. How may I am from better just so we can distinguish it. And then, of course, at the end of the day we would like to render the header. So let's head over back to have Js and right after the import of second button, we can, of course, import better. Now. That was, of course, our default export. So we could technically rename this. But I'm just gonna go with same name. And then again, for some reason, I'm trying to look in the get folder where in fact, I would like to look in the components holder than within the Components folder. I have the header on, Let's say somewhere above the hill over a month, Why don't we were in there are header and you'll see that when I said I could reuse this button all throughout my project, I want oh, actually render it within the objects. Sure enough, I can render it within the op, Jess and one in the header. Of course I can render it also in the header 15. 14 VS CODE EXTENSION: before we continue, I would like to point out two ways off how visual studio code styled Components extension makes our life easier. Number one, we get syntax highlighting a number two in displays are cold box. Now, as faras syntax highlighting is concerned. We see that if we have a property and of course, we get the color blue on for the value we'll get our orange color on as well. E file. It's a mess. The semicolon it right away will yell at me and say, Hey, listen, there is some kind of er now, I guess the best way to show you what would be our code Without that particular extension? Well, I could open up the cyber and then within the sidebar, let's look for my visual studio code styled components Extension on. Let's either disable it or uninstall. It doesn't really matter how we do it. I'm gonna go with Disable on once I have disabled it. Now if I will head over back to my buttons notice two things First of all, my cold will be orange. So again there will be no syntax highlighting. There will be no distinction between the properties as well as devalues. Now technically could say, OK, what's the big deal now? The more important one, I guess, is the one where we're not being shown. If there is any kind of her, as you can see, technically are permitted. In fact, the semicolon and I wasn't warn about it again. I can even omit the colon on with the problem with that is of course, once I said it, I don't have to see. It says that I would like because the reason for that is I have the buck. But I'm not aware of that buck. So that's the reason why I would suggest getting this particular extension, because it will make your lives easier. So again, let's enable it. Let's head over back to the buttons on Yes, of course, I have my warnings so I can fix my code as well as I get my syntax highlighting 16. 15 variables: If you're still unimpressed, we'd style components. Let me knock your socks off by showing how we can use variables in our styled components. On the easiest way for me to show, that is by in fact accessing the ceases variable that is available already within the abscesses. Remember, the syntax was of our and then we have dash dash and whatever variable we had. So if we try all the same thing within the button dress, why don't we head over to a second button? And I were going to change the color right now because, of course, my background will be blue. So why don't we write white? That will be our color and as far as the background instead of red instead of I don't know , some other color I will act is a bar that was the syntax then dash dash and then whatever variable name. So my variable name is primary color on it will take a look on the right hand side in the browser. Of course, right now I'm accessing my variable. Now if I will change that value to, let's say, from blue, so green No, my button will be agreed and that way. Whatever variables I will set up within my global ceases, well, I will have access to them in my style components. That would be option number one. Our noticed something interesting where we did have our template. Literal syntax, correct. We had our back ticks. Remember within the job script, if we have template literal. In fact, if I would like to have an expression, I just need to write a dollar. Since then, the curly braces and then whatever expression I was like So let's think about it. We do have our tag template, literal syntax. Can we, in fact, access here the variables within our style components? If the variable is in fact set up within Johnston? Well, what's the start? So let's start maybe with a very simple one by the name of color. So let's write, Const. I'm gonna go with color and then let's add some kind of now, since it is JavaScript, of course, we do need to have the quotation marks, and in this case I will go with again the color off orange. So let's right the hashtag f 15 zero too far. And then I guess why don't we change the color for the second month since now we have the variable in the same way. How we work with regular template literal. In fact, we could access the variables that are coming from the job script within our styles components. So instead of writing white well, I don't write that I would like to access. In fact, my color variable like so and now my button, instead of having the color of white as whatever color I'm storing within this particular variable, if I will store a orange color within my variable, then of course, the color in my button will be orange. If I'll change this to let's yellow. And of course now my button will get a yellow color on you. Get an idea whatever value I will store within my variable. Then, of course, it will be applied in my CSS 17. 16 variables advanced: Once we have covered basics of using variables in style components, why don't we spice things up a bit by testing multiple possible values for our variables Now, how it will work. First of all, let's imagine the scenario where we have our buttons. But I would like to increase the padding, as was the margin for each and every button. Now, previously, we store just a value for a property. Our Since we know that we can store string, we could also store both the property on the value. Now, before I set up my variables, I'm gonna head over back to AB Jess on. I will delete this whole from AP because I do find that text annoying. And then, like I said, I would like to set up two more variables. 1st 1 will be patting. The padding will be equal to a property of pattern with some kind of value for my patting on. I'm gonna go without one R e M. But of course, you can store whatever value like a man. I'm going to copy and paste it and change both of these values where instead of padding, I'm gonna store margin within my margin variable on the only thing only really left to Dio is in fact used Both of these variables, so not start with, but number one we remember. In order to access the variable we need to have our expression on, I will use a patting variable as well as copy and pasted. And let's say also access the margin variable now for my button number one. Since I have two of them, I have both of them with a patting as well as the margin Gram. Like I said in this case, not only were storing the value, but we are also storing the property as well as the value on the only thing really left to Dio is just copy and paste both of them somewhere within the button. Number two on I can see that my button right now has the also patting, as was the margin. Now, if we would like to inspect a bit more in detail just to refresh the page on, then I could see on the right hand side within my developer tools that the padding has been increased, as was the margin for but number two on the same goes for but number one where the property as was the value was increased because we can store them within our variable. Now, to make things even more interesting, why don't we set up the function? Because let's think about it. Currently, we're just storing a variable that holds some kind of value within our strength. But we can also do the same thing by, in fact, creating a function that returns the string. But when we're using the function, I could pass in the parameter now, in order to show that we were going to use a border of property as an example. So let's say I have the variable by the name of border, it will be equal to a function. So what I'm doing right now is just setting up. My are a function on this particular our function will return a string now within a string . I'm gonna go with border property and then let's come up with some values. So let's say border will be solid then also, I will add some with for the border I can go with, Let's say, five pixels on land. I don't know. The border could be read. Correct. That would be one way of setting this up. Where? What's this that out for? But number two on again? We just access our border. Now, in this case, it is a function. So in fact, I need to follow this index where in fact, I run this particular function and now my border gets five pixels. So it is very similar to what we had before. The difference would be, of course, the fact that right now, since it is a function, we need to invoke it our since it is a function I could pass also a parameter. So let's say I'm gonna call this with and instead of just returning five pixels, I could say something like this where I would like to access my parameter. Now, in this case, we are expecting some kind of argument in here so we can just come up with whatever value would like. So if I go with let's save 10 pixels now, both of my buttons will have this massive war because not only I'm storing the property as well as the value, since I'm using the function, I can pass in the argument. And whatever I will pass is an argument will be applied to my CSS property on Since it is job script, I can also do something like this where I do have my parameter. But I could use default parameters. I can say you know what? If the user doesn't pass any kind of value, then I could just set it up. Teoh, I don't know. Three pixels. Now, In that case, since it is a string, I need two story within the string as well as why don't we run it? So for the button number two, I purposely will access my border function. How? In this case, I will not pass a argument. I'm gonna go with zero arguments and I will still have the border. The reason for that is very simple, because my logic is returning a string within the string. I am accessing the parameter. How are I'm using the default parameter by the value of three pixels? And that's why I still have my board. And as you can see, as we start working, we had styled components and start testing more interesting cases. It gives you way more options than just a regular CSS 18. 17 nesting selecting styled component: I also would like to show you how we can do nesting as well. A selecting the styled component itself. So nor do you do that I will create a brand new convenient by the name of Styled Header. Styled better Jess. It will be a functional component for the time being. Why don't we have just a anyone? Ah, low from styled matter. Let's in fact, create another heading. Ah, In this case, though, it will be aiding number two. What's at a class name? Class Name will be. I have no random and then another, adding, first and foremost, I would like to render it and then I would like to render it within the AB. Jess. That's the reason why I will head over to AB Jess. Ah, you know what? We can probably delete the previous components that we had as well as the imports, because I think our application is quite clogged up. And then we would want to import it, of course, of import than some kind of name styled header from Let's look in the components within the components, we have styled header. And of course, at the end of day we would like to render it so that's the reason why I will pass my component now. Like I said, testing the nesting within the style component as well is the fact that I could apply some kind of style. Let's say, as I'm hovering over this particular style component, I would want to change a background car Now, first of all, let's import styled components on. We do that by importing styled from on, Of course, Tell components, then, instead of just having here as a return. And if I could create my style component where what's great and you've arable. Now the name could be anything but I'm gonna say Styled rapper rapper. It will be equal to, let's say styled, and then whatever HTM element I would like. So I will choose a section on. Then I have my back ticks now within the back ticks we would want to create, of course, ourselves. However, now we also would want to change a return because in this case we are returning a deaf. But I'm going to return a style the rapper so styled rapper Now, in fact, I am returning my style component and I could apply whatever styles I would want again, not started with a background. Let's go with the red on. Of course, the moment we say what we do have our background of red for simple reason that we are using right now a style component. Like I said, the point of this video is to show you how we can use nesting within style. Component as well is how we can apply some styles for this particular style. Come on. First of all, how the nesting works very simply. Instead of just saying OK, I would want to select the styled rapper, let's say, heading one, I could just right within the style component that I would like to select all heading ones within this particular start component. So if I choose the heading one on, if I add, let's say color blow than the heading ones, that will be within my style component. In fact, we'll have a heading off blue for a very simple reason, because I nested here another selector with a of course elector of heading one, and then I added some values. Now the same will work with a class. I do have a class of random, so if I would want to apply some style sports particular cross while I'm just gonna create a random selector for my class And then let's add again, I don't know, Color of green. Now, whatever classes I had with this class name of random will have right now the of course color off Greek now, Lastly, Like I said, we're not limited to just nesting this way. We also could set up a functionality Where if let's say I'm gonna be, I don't know, hovering over this particular style component, I would want to change the background to, Let's say black and the syntax port at wouldn't be following where I do have my n percent than we add he colon. And then in this case, since I would like to apply some styles as were hovering over our particular style component, then we just right within the curly braces. So, like I said, I would want to go with background Ah, block, like so on. I'm also gonna add some transition because I would want that change to happen in work time . Why don't we say transition than all the properties? It will take two seconds just so we can see clear how the transition takes place. And then lastly, of course, we would want to say, Well, all the transition war, What's a ease in an now? In this case, what's happening as we are in fact, hovering over our particular style component, the background is changing. So two things. If there's anything within our style component, we can nest R selectors where, instead of typing out somewhere separately, where changes would want to applied for the elements that we have or the classes that we have within our style component, we just write our styles within our back ticks. And second, if there's some specific styles we would like to apply for the particular style component, we just use the M person. In this case, we used a however effect and then applied the background color as were hovering over our style component 19. 18 props basics: when we working react. We have a concept of props where, let's say within the objects I do have my style header how I could add a prop on In my case , I will name this title on. I'm gonna pass some kind of value for this particular title problem. Let's say low from up Js now within my style header. I could access this prop within my prominence on I will do structured right away. But of course there's many ways we could do that. But let's say I will access right away the title prompt. And then instead of just returning the strength within my JSX, I will access my problem like so And then, of course, each and every time I will change my prop within my objects or the value for this particular title problem. Then, of course, I will see also the changes within the styled hair. So still components have a very similar concept on is always the best way to show you. How it works is to create another component. Now, in this case, it will be another styled components, so in fact it will not be a rack upon or later on We're also gonna check it out how we can combine them, how we can combine the prop that you're getting from the area component and pass it within this style component. Because, remember, we do have still the styled rapper. And technically, when we look at our example, we will not be able to use it within this style header. Later on, we'll check it out. How we can combine both of them. Okay, now, like I said, new component Step number one on Let's call this I don't know Props, button raps buttoned Js No, Like I said, not area component, So we only need styled from on. We are looking for style components on. I'm going to create my variable right now. So it's called his const Props button. Then let's set it equal to a styled on button, of course, than our back ticks on. Last but not least, I would like to, in fact export it, so export the fault, perhaps button on just so we can see some changes was always Let's maybe some Bagram color of green on color off. I don't know. Maybe work. Okay, we do have our style component on last I would like to, in fact imported within my address. Let's close. Decide Maher. Let's import our problems button. As always, you can call this how we would like since the export was default and then let's head over to Components folder within the Components folder. We have our probable on the way it will work. This time. I will render it twice just so we can see the difference is off when we're passing in the props and when we're not passing in the props. So Problems Button lets a button remember one on. I'm gonna copy and paste it. Let's say button number two. As always, my spelling is just awesome. So we have button number two and but number one, let's save it. And we do have two buttons now, since my buttons are all the time coming out really, really small. Once again, I had maybe some padding one Ari ems as well as maybe font size. I don't know to Rum's something like this, and now my buttons are massive. So what are the props? Well, I could head over back to my AB Jess, not say decide that you know what I will control my background color by setting up the prop on my styled component. Now the Sendak's will be similar to how I had with the react components where let's say my problem will be color on for this particular color again. I could have the hash values and all that, but I'm just gonna go very simply by blue. And then for the 2nd 1 I will add a color off. In fact, read like So now the way we access the props because currently you're looking at it and you're like, OK, well, nothing changed. Yes, that is correct. Because we would want to, in fact, access the problem that we're sailing up now. What I'm gonna do right now is, in fact, right, the syntax very similar to what we had before when we were working with our own variables. Remember when we set up the variable the way we access it was the same how we worked with Temple, a literal where I have the dollar, son. And then I have the curly braces. Now the difference with the props is following where when we're accessing, in fact, the props, the props are within the function. So we still use this particular syntax where there's a dollar son than the currently braces , how are props are sitting within the function and then the value we're getting from the return of dysfunction. So that's imagine I do have my color problem, and I would like to apply for my background because one of them, how the color blow in the 2nd 1 waas the color of red. So instead of value off green, we could ride the following way. So dollar son, then to Curly braces, said, then we have the function on. We're accessing all our props from the argument here from the props argument. And then, like I said, the value will be returned from this particular function. So instead, what is the name off this particular problem? Will the name is color correct 40 both of them over the values changing. So in this case, I will say that you know what? For my background would ever prop value in passing it apply to a background color value. So since the prop name is color, I'm just saying all right past indie function than access whatever props you have on get me this particular color prop and apply to the value and then the moment we will save it notice. But number one will have a background of blue for a very simple reason that that was the value that we passed in within our color problem. And then the 2nd 1 will be red because again, that was the value again, the difference would be following where, instead of just grabbing the variable like we had with all our buttons, we need to make sure that we, in fact are passing in the function. And then we're active. Sing as an argument the props whole prompts object on. We're accessing the particular plot that we're looking for since we have the color prop. That's the reason why we're accessing the cull, prop and setting in as a value for our background. 20. 19 ternary operator: while using props in our style components gives this nice flexibility where we can change the values in our services, depending on the props that were passing. Our current set up as one floor floor is very simple. What if we would omit the prop altogether? Or we could just create another component without that particular problem? Again, both of them will do the same thing but create a new button. Omit the prop on Let's Ride Button Number three as our text and you'll notice something interesting. We're on the right hand side. I do have my butt. So technically that button is there. Our the background is totally gone because at the moment well, we have our props and we're checking. Is the props by the value of color there, then applied? Well, the props color is not there. So what would be the solution? Well, we could use something called a turning operator were First of all, I'm just checking whether this particular prop is on my styled component. If it's there, then use the value. If it's not there, then use some kind of default lower. So in this case, props color check. If it's there That's the reason why we're using turning operator. And then let's right, okay, if the properties there used the value from that particular problem, if it's not there, set some kind of default value. So in my case, I will go with Green. And sure enough, right now, all the buttons have some kind of background color because even though for a button number three we didn't pass any prop, we still have the default pump. And that's the reason why we have the background color of green. 21. 20 global styles: excellent. Our next topic will be global styles within the style components and you're probably wondering Well, wait a minute. Isn't the whole idea about style components to create exclusive styles for our components? So that way we could import and export the whole component with all its styles. And yes, you are. It also offers us a way of using Globalstar's because currently we do have our global styles are global. Styles are within the abscesses. War within the in excess is again. It really depends on your set up on 40 create reactor. They have the styles within the index uses as well as abscesses. First of all, let's delete everything that we have within the next, so it will be clear as well as within. The app ceases when we had a little bit off more styling here for our global styles. So let's go with margin zero for all the elements than also we can have maybe box sizing Ah , as border box, just as we're adding in fact, patting to particular element and it has the with, we will not actually create that element bigger. In fact, it will not increase the size as well as maybe we can add a little bit off. I don't know, fun family. So margin will be back to zero. Like so And then, like I said, we would want to add some kind of fun family on. I will go with I don't know over Donna. Let's save it on. Yes, I do have my particular fund family. Like I said, our case will be right now off getting the global styles instead of the using abscesses, using the style components and the way we do that with a style components is using the create global style. So instead we import at from the style components we import, create global style, said it equal to some kind of variable and then render it on top of our reactor. Now that could be within the index Js as well war. We can do that within the ab jest. It doesn't really matter. In my case, I will set it up within the objects. Just remember that we could also do the same thing within the AP or I'm sorry Index jazz. Now, like I said, we would want to import create global style. By the way, if you would like to navigate around the documentation. Just type global style on. You'll head over to create global stuff. All right? No, First, let's imported. Like so. And in this case, I will copy because I think it will be a little bit faster. So let's head over back to my ab, Jess. Now again, anywhere we would like somewhere, I guess, above the APP lets importante create global styles personal from the style components. Then we have our variable. And now let's set up our rules within the backpacks. Correct. So our styles for the global stuff on In this case I will head over back to abscesses on Let's just select I don't know this selecting all the elements as well as the body, like so and then within the objects that's pass it in. And then, like I said, last thing, we would want to place it on top of our react ary. So since we are returning already a death, I just need to have my style component And remember, what was the name global style global style on then, Yeah, once we render it again, we will get our in fact, global styling. Now, in this case just to show you how it works. I will delete everything or commented out from the AB success on as well commented out within my objects is otherwise You're probably thinking well, nothing really changed. Yes, nothing did change. However, if I comment out the global style As you can see, my global styles are not working because the app CSS is commented out The global stars that I had an index CSS is pretty much clean are within my Abdi s If I in fact uncommon my global style notice how we can apply global styling using the create global style from styled components. 22. 21 extended styled components: when we covered styled components in tax. I didn't mention that HTML elements are not the only thing that we can in fact create because remember our syntax we had our variable and then we created our style component on right after style. We needed to pick well, if we were going with a HTM element. And of course, we just needed to, in fact provide the particular regime element we're really looking for. Whether that was an article or a button or section, how are we could also set up the react components as our stars components as well as the other style components. So, first of all, within the props button, why don't we tested out how we can create in fact styled components based on other style combines on the syntax is called extending, so we are extending the styles from one cell component into another one. Now, first of all, I would like to change my set up where, instead of export default, I will set it up as a named export. So I will write export on DA. Why don't we, in fact, delete the default export? And of course, my application will currently break were a very simple reason because I am using a default expert. So let's just wrap it within the curly braces, and then everything should work again. If that's step number one, that maybe I will add also a little bit of padding and I'm gonna go with I don't know, worms are not batting margin margin, and I'm gonna go with one Maria. And next we're going to set up one more style component by extending the props button on the way it will work. I will go with Export const. Again. We can name this hair would like, but I'm going to say Big button big button on Let's use again, styled the syntax and then instead off using any kind of HTML moment we need to have the parentheses on. Let's look for which styles component we would like to extend, since, in my case, I would like to extend the props button within the parentheses we write, perhaps button, and then again, we have the backpacks now within the back ticks. If there will be a property that's already within the props button, if we will write it, we will override it within the actual big button our if the property will not exist within the props button than it will be exclusive to a big button. So let's say for the margin I will in fact go with a smaller margin. So for this particular one, I'll set it up as margin 0.5. So, as you can see, the Props button already had a property with the value. So in this case, we are overriding the property as well as the value meaning. At the end of the day, we're just overriding value. But you get an idea, and then I would want to come up with my own. Let's say properties. So I'm gonna go with text transform. Ah, I'll capitalize. Capitalize now, of course, I could go wild with my selections and with my styling, but I'm just going to stick to the basics. And then, instead of using the props but never where I will change my import, where from the same file, I'll import a big buttons as well. So big button on, then somewhere I don't know. Right after the button. Number three, I could just copy and paste it. And then let's change it around. Teoh, Big button now Big button number three. First of all, has the text capitalize on The reason is very simple because we added it in our styling as well as it has a little bit off smaller margin. Now, since it is a big button, why don't we also change the font size on? I will go crazy in this case where I will select it to be like three Ari ums. So now for sure, I do have my massive button. So hopefully you get an idea where were not limited to just creating the HTML elements as our style components. In fact, we could extend the existing style component. Our descent tax would be parentheses, then passed within the parentheses. Which style component you would like to extend on. It's really up to you from that point because if the property is already within the previous style component meaning the style component you're extending, you will overwrite the value our If the property is not on the previous style component that you're extending well, it will be exclusive to a style component that you just created 23. 22 extending continued: And just to reiterate my point, Once we know how we can in fact extend the other stealth components, we could omit the props altogether. So remember, within the objects, I do have three problems. Button on each of them. Have, let's say some kind of color. No. Instead, I could just leave one on. Then we'll see how it will work. So let's get her of the both of the colors, like so then, of course, all of them are green because that was our default cell. And then, instead of using the background color for not say, some kind of prop that is being passed in, I could just, um, it all together. And then from the process button, I will in fact extend the other buttons on for all of them. I will add some kind of styling that I would like now for the big button. Maybe it doesn't make sense, so I will, in fact commented out. But I could create, let's say, two more buttons or three more mountains, that each of them will extend, in fact, from my problems. But so you can think of them as some kind of default styles where color will be white. Padding will be such an font. Size will be to Ari EMS and margin. At the end of they will be one, are you? How are if I will add one more mutton? In this case? I will go with danger Button on. I'm gonna set it equal. Teoh styled. Ah, of course. Now I'm looking for my problems Button drops button, which in this case probably doesn't make much sense since we're not passing any more props , I will remember We could always do that, but in this case, I will not. And then why don't we just change the car for the background? Were the background in this case, we'll be, let's say red. Then I could select the same line of code like so copy and paste it. And like I said, I could create few of them. But in my case, I think two will be more enough. And instead of exporting this as a danger button will export, it has a six as button success. Mutton. How are as you can see right now I do have a bit of an error, so let's adhere properly read. But of course, they do have the complaint that in fact, I'm trying to access the big button. But the big button doesn't exist now for the success. Why don't we go with color off green now on, then within the objects. Instead of looking for the problems button on the big button, we will look for only two buttons. One will be Danger button Danger button on the 2nd 1 will be success. But once we have our imports were gonna change what buttons we will render. So I will, in my case, delete them on. Let's just right, Danger button or the danger. But in the text will be Danger button that's copy and pasted on. We're gonna change also the naming for my danger button to a success button for my six s second button sex as button. And then also the name will not be danger. We're gonna say it will be success. And there you go on again. The idea would be very simple where we create one based component that would hold some kind of based styles. And then we just extend from that particular button work and, of course, do the same way where we have the props on this is the case where you need to make a decision. If it is easier for you to, in fact, manipulate the props on, set up some kind of props as well as the eternally operators or the values, you can always do that war. In fact, you can do the extending our please remember, you can always, always still set up the props here where if let's say I would want one of these buttons to be smaller, bigger, I could still do that. So 1st 1 we had over back to objects on, Let's say, for the danger button, I will add my big for that, like so on. Currently. Nothing is changing, however, within the props button. I could set it up for my padding that first of all, let's delete the value on let's set it up as my curly braces, um, would like to access, in fact, my props. Then we have our function, and then the return from the function will be following. I will check first of all, whether my props, big or big prop is, in fact, on that particular button on it is not on a sexist button where it is on danger button. And if it is there, then let's make our padding massive. Let's right, maybe three Ari ums. How, if the prop is not on a bun? Well, then we're just gonna go with one argument. And sure enough, now the danger button has the big prop. That's the reason why it's so massive. How are the success? But it doesn't have that on. That's the reason why it's so small now. You can also right away, see that I do have, technically a bug because I didn't pass in my seven calling on my in fact extension from visual studio code rightfully tells me that, Hey, listen, buddy, you need to add the colon, and that would be a use case for using, in fact, extending off these styles components as well as the fact off, combining it together with the props. But as always, it is really up to you. You just want to use the props. You can always use the property. You just want to use the extending. You can always use the extending instead 24. 23 styling react component: Once we have covered how we can extend existing styled components, why don't we take a look at how we can write a alternative syntax to the current one that we had within the styled her? Because, remember, we had the react component by the name of Styled Header on what we were returning from this particular component was, in fact, he style component. And that is definitely one of the options that you can use where you're setting up your er component on instead of just returning some simple Jessica, you are in fact, returning the style components. How are Let's say you're not happy with the fact that you have, first of all to variable names you have right away for style header. And you cannot name this exactly the same because your style component cannot match the same naming that you already have for the reactive warrant. And then, of course, at the end of day, you're still exporting your react component. So this is exactly what we're gonna cover within this video on the name will be alternative syntax. Now, first of all, let's create our component. Now it will be area component, but the name will be. L turn. Not if, uh, header something like this again doesn't really matter how you call it. What's more important? What we're gonna right within our component. Okay, Now again, it will be a functional component. Or you know what? Instead of setting up everything, I will ah, copy and paste everything that I had already within the style component on I'm just gonna changes around within my alternative. How are why don't we also change? It may be within the objects where instead of looking for the style header, why don't we in fact, change the naming that we would like to in fact access the alternative one instead? So let's delete it and say I'll turn. There will be rendered on you know it instead of style letter. I'm just going to say alternate. They're better. They're not Header now. I don't think we need to change anything around because the title can stay. However, in this case, I do have the complaint. That alternative in the tutorial source cannot be resolved. Okay, Now let's head it over. Alternative header now? Of course. Yeah, because I'm trying to access the file that doesn't exist. I do you need to use the header on. Currently, everything is being rendered now styled after we already covered how we, in fact, could set up a stall component as a return. Or like I said, What if you're not happy with that particular set of what would be the alternative is intact. No, First of all, I could change this around where, instead of style, the rapper I could just return any section. So let's say I'm returning section. But then 40 styled rapper. Instead of working with a sile section, I will set it up as a style her. So remember when we were extending what was our syntax when we had the pregnancies? So the same thing I could you with, in fact my react component where, instead of looking for a section that I had previously, I'll set it up as a styled header. Now the problem will be right now the simple fact that first of all, I would need to export this styled rapper. So let's change this around where we have a styled header, but we would like to export instead a styled rapper. That will be case number one now, the 2nd 1 is that we do need to pass a class name has the prop. Now we don't need to set it up on our styled header or we do need to set it up within the actual component. So when we're rendering the alternative header, we don't need to pass the class improper over. When we were setting up our component, we do need to in fact, the structure it out the class named Prop and then inserted equal year the class name basically within our JSX on. Let's set it equal to the problems. We're getting the last name on once. We in fact save it notice. First of all, like I said, we're styling. Right now. We are component. That's case number one. But since we're setting up this as a variable by the name of Styled rapper, of course we need to make sure that in fact we're exporting that particular variable. That's number one now second within, in fact, your actual react component. Make sure that you do have the prop by the name of class name, and you said it equal to, in fact, the section because I can remember if we will head over to our council. You notice that still for our particular live on, Let me look within road. We have the Dev. And then, of course, I still have my classes correct for my actual component. So that's the reason why we're setting up the class name here as our problem. Okay, No. Lastly, as faras a react concerned we could even make it a shorter syntax. Where if it is a export default, I don't need to write all this style Rapper is equal to, let's say, styled hair. In fact, I could write following way where? What's right, export export the fault. And then we right away set up our style on In this case, I don't need to even use the name. So again, it is really up to you you could use like we had previously remember we had the styled header. I don't know. It is my preferred method because I like the simple fact that I could see where is my style component? And then, of course I'm just applying all the styles. But again, if you don't like it, you can always make it even shorter. Where, as you can see, everything is still being rendered for the simple reason that we just have our export default. Where I'm using this styled on, I'm styling my rear component and then I could just apply whatever styles you would like. 25. 24 hero component: beautiful while working on the style components, syntax using simple components was definitely useful. I think it would be even more useful if, in fact, we will use our knowledge to set up some real world components. Let's say hero components. No. First of all, I will do a little bit off spring cleaning again because there's too much information within our current application now, since I would still want you to access it as a reference now within the source, I'm going to create a new folder and I'm gonna call this example now. It is really up to you. If you want to delete them, you can go ahead and do that. But in my scenario, I will grab everything that I have within the components copy and paste it within the examples. That should be number one on. For some reason, I wasn't able to move it. So with me selected again now, yes, currently I move them. Now, of course, there will be some complaints, but I currently don't care about it. And then I also want to move the buttons. So remember the file that had all the buttons? Well, I also would like to move it to examples. Okay. Now, again, I didn't have an issue. Well, I don't know. No, I didn't have a Sure everything was working fine. And then lastly, within the objects, of course, we have bunch of imports that we're using. And, you know, in my case, I'm gonna also delete the create global styles as well. Now you can keep it for your reference, but in my case, I'm going to delete it than global styles are gone. And then lastly, you know what? Within this div, I would just say low from AP. Let's see, Yes, everything is being rendered. So that is correct. Now for our hero components that were going to be creating. I will need a images. So let's head over to, let's say, pixels and then within the pixels, we're looking for three images one for desert, one for let's say, ocean on 3rd 1 for the mountain. Now I would like to keep those images within the images folder in my in fact project. So again, still, within the source, let's create a new folder what's called us images and now each never image that I will grab from the pixels. I will in fact save it within the images folder. Now let's say I like this image. So saving the jazz? No. Like I said, let's look forward. Let's stop, then sores than images. And then let's add the name of image number one on. Then we have our desert. Okay, it's also look for the ocean. I do like this one. So second image will have a name of image number two on. I'm also gonna look for the mountains. Witness on for the mountains. I don't know. Why don't we go with this particular image on again? Save it as image number three, We do have three images. Now we can start working on our here of important. And first of all, I'm gonna create, in fact, that particular component. So let's head over to Components folder. Let's create a new file again. Let's zoom and I'm like, just simply call this hero Js. Now it will be a styled component, so let's grab first, all styled from styled components. And then let's set up our component. Now you know what? These tabs are also a little bit of knowing, so let's just in fact, remove them and then Like I said, we will create our component. I will call it a hero and then it will be equal to style on I will go with a diff. But as always, you consider this up was a section or an article doesn't really matter for, so I'm gonna give it a min height. So that way, even if the contact within this particular component will not be, let's say 100 view heights like I would like in fact, it will still be minimum height off 100 viewers. Now, you heights are awesome because they're using percentages. So, in fact, our component will be 100% off the view port That will render our application. So 40 mobile up. It will in fact, take the full screen. Are size 40 phone or let's stop it will do the same thing just for distance. Okay, Now, for the main hat, it will be one, sir O. R. I also would like to render d images because the point here is very simple. Where 40 hero component. I would like to set up the background image property and then for each of the images that we, in fact got into our application I would like to render a hero component. Okay, Now the property name, like I said, was background image and then this in doctors Far on where? For the value. We first need to specifically say well, where we will get our image. Our remember we're using the style component. So instead of just hard coating some kind of value here, in fact, I could pass again. My props function. So I'll say you're not within the props function. There will be a prop by the name of image. And then within that image, while our story information off which image I would like to render. Okay. What? Save it for small. And then next we will import it within the half. Generous. So let's look for our hero component. It will be within the components and then within the components we're looking forward to hero component on. I don't think we need this. Hello From my app anymore on now, I would like to render both off de components. Why am I saying both? Well, because I would want to show you side by side. How in fact we can use the props, not save it. That is my hero, but currently says Well, first of all, you're not even exporting anything from the hero component. So of course we need to change that. So export the fault hero. That is the component we're exporting. But we're also looking for our image problem now, in order to pass our images into our image problem. First, we'll probably we should import them from our images folder. So again, let's look 40 images folder in this case. Or remember, Since images are not just for fun, we d need to show the full path. So image. Let's say number one J peg on Let's copy and paste it on. Let's look for image number two as well again. In this case, I do need to have the full extension because it is not a job script file. And since I set up the prop by the name of image, no, set it equal to right now variable that's holding the value for my image. Number one on. You'll notice the moment I will render it. In fact, right away I will have my massive surge now are not also within the app CSS remember we did have the abscesses, but I did comment out when I was working with my global styles. So again, let's select everything. Maybe on let's apply these particular global stuff. Okay, that would be my hero component. Now there's a few things that I would like to show you since we are experts, of course, of how to work with the props. First of all, well, what happens if let's say I would want a different image. So I'm gonna company pressed it and there will be two hero components. But I would like to change which image is being rendered. Well, we just passed a different value within our I am G prop and I have two massive hero components. One is using one image on the 2nd 1 is using the second image. Now we also know already know that since we have, in fact, on option of setting up some kind of default image, I could sit up here, deter Neri operator, because let's think about it. If again, we tried to render hero with out this particular image prop. You notice that, yes, that particular component will be there. But of course no image will be rendered since we're not passing in the image problem. Remember, there was the third image that in fact, we download it from the pixels. So why don't we tested out where? Within the hero component, That's import image Number three. And then again, it will come from the images folder. Or in this case, of course, we need to go up the level. Then we look for images folder on in this case image three j pick like So So Munger said, Remember Turning Rapper where I'm saying, All right, look for this image prop, or if that particular prop doesn't exist, well, then return something else. So in this case, let's say all right, so look for this particular problem. That's case number one that if that proper is there, then of course, set it equal to props. I am G. But in this case, you know what I need to place my colon right after. So I'm saying yes. If that prop is true, if the values there then yes, grab it, or if it's not their dangerous use, I am G number three. Now the men and I'll sarat notice the third image will in fact be my mountains and then once we have covered how we can add, in fact, our default props. We could also add maybe a little bit of more CSS because currently the images are not rendered exactly like we would want to. So for that we have the background. And then, of course, we have the position now for the position. I would like to place it in fact, in the center. Now let's also change. Maybe the background size, background size on that should be cover, so it covers everything on you know what? Why don't we also Background Repeat said it Teoh a no repeat. So let's look for background. I repeat on Why don't we do with Migron? Repeat, no Repeat. Those would be. The CIA says that I would like that. And lastly, why don't we set it up? That we can always change it with the props? Where if let's say we have a prop off big, only then we're using the 100% off the airport. But in fact, let's say if we just rendered by default, then we will only render like 50% off the screen. Size it now remember that again it was being set up within styles component. So instead of looking 400 view heights, a Mulligan render 100 view hurts. If the prop by let's say the name off big will be in my style component. So again we have our function on the CSS will be set up from our function where I will look for ramps big. And then why don't we do a question mark? So again, we're looking for that particular prop on If the prop is there course then legis render 100 units. If the prop is not there, then let's go with 50 view words Look So So why don't we change it around where the 3rd 1 will have this particular big one hour the first you will not on as we can see, the 1st 2 are just taking 50% off the report or the last one. He is the massive one because we did have this particular problem by the name of big 26. 25 banner compnent: having our hero components is awesome, but most of the times within hero component there's also some kind of banner on. Then within the banner, let's say there would be a call to Action Button as well as the title, So why don't we set it up? Or in this case, we will use react component combined with Styled component. So let's create our new component. Let's call this new file. Like I said, I think I'll choose a banner Js again. Naming is really up to you. The and functional component that's correct, as well as stop from styled components imports styled from style components on its up to you if you like to do the set up where in fact, we were styling right away. The react component. Remember, we did that with export default on just started equal would styled and then the name of the component. Or I'm gonna go with, in fact, setting up these Kyle component who is in my banner component. But as always, it's really up to now. First of all, let's set up our style component on I Think I will name mine. A banner rapper Const. Banner Rapper is equal to styled on, Let's say that I will want Teoh use a diff now for the day of what styling I would like. First of all, why don't I set up my Js extra turn where, instead of just returning a day of we will return a banner rapper within the IV Battle rapper, Let's create a heading one that will be our title. However, the title text. I will in fact get my title problem. So let's send them this way like so. And also there's one more thing that we need to keep in attention to. Where if I do have my banner, let's imagine that I wouldn't want to hard code all the Children that will be within the van Rapper within my component off the banner. So let's imagine scenario where, as I render my banner component, in fact, I would like to add I don't know, a button or something. So in order to do that kind of set up, I need to have Children prop and then just decide where I would like to render these Children. You can render it, of course, above the title or below the title. It's really up to you. I will render it underneath the Children. I do have my title. Awesome. On land for today. Why don't we had a little bit of styling for our particular banner where I could add a color off on white than font size? We can go with you. No, no. 60 pixels. Something really massive text transform, uh, upper case on your case on, you know, text the line also could be center. So text align on. We have the center now, since we can in fact use the nesting, I could say you're not as I'm hovering over the ending one, I would like to have a color. All right. Like so And then, Lastly, I would like to, of course, render my Bannon rapper so its head over back to have Jess on. I'm gonna go to header number one and in fact, change my syntax. We're within the hero. I would like to first of all, import course. My banner banner from on it is sitting within the components. So we had over to a banner component. And then, like I said within the hero, let's look for the manner. Remember, we had a title problem. This is my title like So I'm Let's check it out. What will have So I have this massive, massive title on. You know, I think it's little bit too big because there's something that I would like to show you where we set up still more senses within the hero. So you know what? I will minimize this a little bit just so I can see that it is all the way. And I thought now the problem right now that this text is sitting all the way to the top off my component correct on, Let's say I would want it all the way in the center so I could head over back to hero jazz on Let's a Display Looks than a line items center, so let's place them horizontally in the centre. I'm sorry vertically and then justify content is responsible for placing the items horizontal in the centre on. Yep, Right now, my title is sitting exactly in the center on. Lastly, Like I said, I would like to show you how in fact we can render something within the batter is remember , if we don't have this particular Children problem, we will not, and I repeat will not be able to render anything within the batter. Now, maybe for that particular example, I will head over back through the examples. I don't know whether that's buttons or problems Button. There's a real matter. Maybe I should look for this particular danger book. Okay, just try to render it here. So ah, where is our particular component located? Import what's called this danger? And remember, it was a named imports of danger button. Then we need to head over to the proper folder on the name is examples. And then we have the props button. And then remember, we have an option, in fact, adding also one more problem. So in this case, though, we have the banner and we need to make sure that we render within the banner component on Let's call this, of course, the danger button. I would want to be big. Correct. That was the problem. We added the proper big. So now my button will be three rum's. And then let's also set up some kind of text. Ah, click me. Click me on. Yes, we should have our massive massive button again. One more thing as faras react, is concerned if within the banner I will in fact remove these Children, you notice that even though the button is sitting in there, I know that is in the ab Js. However, if we don't set up properly where we're rendering the Children, then of course no Children will be rendered. And that's the way out. We can, in fact, combined. Both things were not only We have our style component, which is responsible for working with this hero. So each and every time I would like to change something, whether that's adding a default prop or in fact adding the default height, I, of course, can do that. But also I can combine the style component with react component where there will be some properties that I would like to add, in fact, said it in my react component. And then, of course, render it also within the area component. Now, lastly, there's one more thing like I previously also mentioned where I could pass the property from the react component into the style components component. Okay, now the way it works is let's say I will have a color prop on again. I will, I don't know, choose a color over it. Then currently, of course, it doesn't really matter because, as you seem, there's no changes affected with this particular set up on a side note, by the way, also mentioned, I forgot to mention that we do have our hover. Remember the nesting where if I'm resting over this particular heading one and, of course, my colors changing and then lastly, like I said, Let's covered this problem because currently I do have my color prop. But since I'm not using within the banner, as you see, there's no logic here set up for this particular prop. We would want to set it up, in fact, for the banner Rapper, where let's access the color prop and then let's set it equal within the batter. Rapper We're Color will be, in this case, equal to a car like so. And then let's change it where, in this case, we're not anymore. Accessing just a heart coated value instead, remember, we had an option off props. That was our function, and then I would like to return whatever is sitting within that particular color. So in this case, my color will be read because from the banner component. I'm passing in the prop by the name of car, and this current value is red. And then within the actual banner, I set up the logic where I could check it out. All right, so I'm looking for my color prop. Hold this color prop is not any more being added manually by me because, as you can see when I'm rendering, in fact, the banner I have technically no access to my banner rapper. How are I could set up the logic where, yes, give me that particular problem and then I we're gonna set it equal. Teoh, the banner rapper That is, in fact South component. So understand it is a little bit confusing when we have two types of props. We have react component problem, but we also have a style component prop. But this would be the set up where you could use the rear component prop on passage into a styled component problem. 27. 26 attrs method: next. Why don't we take a look at how we can work with inputs when using styled components? Or again, my application is quite busy. So let's do a little bit of transfer. Were both of the components on the hero as well as the banner will be transferred to examples like so on. Then again, no, no, But within the objects, there will be some spring cleaning. When we don't need any of those things, Let's like this one as well. And then within a day of again, let's start with a very, very basic hello from now. Within the components, there are different components that we would like to create on those will be inputs. So let's say here we will create a file on ledges called us inputs Js. Now within the impetus jest, the only thing we need is in fact getting a styled from style components. So it's right imports styled from styled components. And once we have this particular input, well, why don't we set up a component the style component that will be rendering input? Okay, now let's place it. Or basically, let's create a basic one. Let's say constant basic and you know what? Let's close The sidebar input is equal to styled. Then, like I said, we would want some kind of input. And then, of course, we do have our back ticks. And lastly, before I forget, let's export right away on Do you know what? I will be setting up multiple exports so I will use, in fact named exports so exporting as a basic involved. Then, of course, within the AB, Jess, I would like to render it import on the name I believe was basic input on from my inputs file, which is sitting within the components and then within the components I should be looking for. In fact, my input, my inputs Js component. And then, like I said, let's get a writ of this simple text right now. And let's just look at the basic input basic and put a not say what would be the issue if we're trying to have that kind of styling now. Currently, first of all, we have a complaint because I didn't save the input all together. But I do have successfully in my input now, this year's following where for my input. In fact, there are no attributes that I would like that because you know that for the input you would want let's say the type attributes you want. Probably also a name, maybe I d or something like that. But currently the input that we have right now, while it doesn't have any now before we deal with that particular issue, you know what? I will also change a fun size. So I'll make, in fact, my input bit bigger as well. A spouting maybe same way Rum's on. You know what marginals, maybe one rum's one ari EMS on. Sure enough, right now, my input is bigger, so it will be a little bit easier to see what in fact is happening behind the scenes. Once I have this particular set up, we will have over to a bigger screen sores. And then I'll show you, of course, that the attributes are missing. We do have the input. But like I said, we're missing our attributes. We're missing the type of attribute We're missing. The placeholder, the name the I D. You name it. So how do we fix it? Well, when we work with, in fact, with stealth components, we have an option of getting the attributes method so the fin tax would be following where we added dot Then I right a t t our has, and then we would want to set up our own attributes. Now, when we're sitting up or attributes, in fact, we need to pass it here as a function reversal. This is a method that would be number one. And then within this particular method, when we're setting up our props the same how we worked previously with a general props while it works exactly the same where we have the props, that is my function. And then I would like to return from the function, and whatever I will return from the function will be set up as my attributes. Now, there's one thing that we need to keep in mind that as you're working with a narrow function, since I'm returning, also an object, I'm gonna wrap it within the parentheses, okay? And then within this particular object, I consider of whatever attributes I would like. So let's say in this case, I we're gonna set up the type where I could say type. And of course, the name needs match whatever at you with you would like to set up on. I'm gonna go with text. So I'm going to say that my attribute will be text. Now we do need to set it as a string, though that's one thing to keep an eye on. Because, of course, the value for this particular type needs to be text cash that we're setting up as a string on Let's go with another attribute, But again, we're not limited. But just to show you that, of course we have the place, um, Holder, like so that will be our next attribute. And then as a value, why don't we just say enter value? You'll notice on right and said, First of all, I could see that I'm having a placeholder attributes, but because, of course I have the text. But also, if we had over an inspector around mint at the moment, we already have the type Now, alternatively, you could set up in fact, the react component and then just return. Of course, your basic input. If you wouldn't be using these attributes in fact method, you could set it up as a react component, then return. It has a basic input from your J six. And then, of course, add whatever attributes he was like, Technically, you could have done it this way because, of course, you would be returning the input and then you would just be styling the input. But this, of course, is a much better set up where I'm just setting a input separately. And your next question probably is, Well, what if my type value is number or email? Do I have to create another inspect style component? Well, we could definitely do it this way. I could just copy and paste it on for the time being. In fact, I will rename it Awesome input, even though currently, it will not be awesome. But in the second, we will make it awesome. So are some input notice if I will change the number on. Of course, If we will head over back to ab Jess, then we will important both of them, uh, off some input as well. Awesome input. And then let's render side by side where I have one basic input and then two awesome inputs on why don't we also copy impressed it? There will be three inputs on together, and then for the second inputs. Of course, both of them have the type of number. However, What if I would want, in fact, change the attribute based on the prop that I'm passing? Because you're probably noticing the fact that in fact, we are not accessing their props yet. We're just hard coating are attributes currently. So how do we do that? Well, we could set up not equal toe a string. But I could say Just grab the type prop that will be set in fact, on our awesome input or ive that type prop is not there. Then, of course, just use the number. Same goes with the placeholder again. The same would work with any type off, in fact, attributes that she was like So it's right props, place, holder. And then we obviously will set some kind of value. How are if the problem not be there? Then, of course, we will have our entire value on Let's just that out within the AB, Jess. I will leave the awesome input, the waiters. So that's the morning with hard coded values, meaning in this case, probably more like a default drivers because these would be, of course, the true hard coded values where we have no options. In this case, it's more like sitting on the default values, even though parts of it are hard coated. And then for the 3rd 1 Why don't we had, in fact are perhaps in this case won't set it equal to une mail, like so on for the placeholder when we also pass, please on their email something like this, And then I can see that 3rd 1 right away has my placeholder prop, but just double check. If we head over again and inspect, we can see that. Of course, the type for this particular input is in fact email. So this is the way how we can have in fact, attributes dynamically using the styled component on the way we do that is used again. Attributes method within the attributes minted, we do need to pass the function again. The argument that this function is receiving is the props, and then you access the props. If you don't want to use the props, you don't have to. You can just hard coded everything, or if you would like to in fact access the props, then you could set something up with default values 28. 27 css helper function: next we're gonna look at the CSS Helper function now. First things first. I'm going to clean up the application that I currently have. So within the AB, Jess, I'm going to remove the imports. Were the inputs as well as clean out the JSX return. Let's say again, Hello From up as faras Abject is concerned. And then I'm also gonna move the inputs Js into examples folder. So let's just move it on. We're done now within the components. We're going to create a new component by the name of boxes. So let's create a new file boxes Js on. Let's set it up as a style component, meaning we don't need to react. Let's just import styled Fran styled components on. Then I'm going to set up a variable on. I'm going to give it a name of box const Box on it will serve as my base component and you'll see in a second what I mean by that. And then I'm gonna set it as a template, literal and then within the temple, a literal legis, right, Some styles. Let's start with with on I'm gonna go with, like, 100 50 pixels and of course, it's really up to you. You can go with different styling, but I think it will do the job in this case. So height, 50 pixels. Then let's add a little bit of margin. Let's go with woman R E M And last but not least, I'm going to go with some kind of border. So to pick so solid and black good, that's my based component on. Then we're going to set up two more components. The style components that will use this particular component, meaning they will use this particular variable were you know that since we're working with tact functions model, we just pass it in as a expression. Correct. So export right box, that's my first component on Styled Live on. In this case, I'm just going to set up my style component as a div. And then, like I said, within this death Ah, we're just gonna access this particular variable that we created before as our base style. So let's write box. That's component number one on down. We're gonna, in fact, have been placed it like so on. Set it equal to a green box. So let's change the naming here. Green box on four time being while we're gonna leave the same variable here box right now. Let's say that and then I'm gonna head over back to ab Jess. And you know what? I can just close the inputs. I don't need it. And then, of course, I'm gonna imported import box. Or, you know, in this case, I have red box and green box, so I need to be a little bit more precise since I'm exporting those two. And those are, in fact named Exports. What threat? The red box. A green box. Both of them are coming from the boxes file. So it's like from components and then within the components, we have the boxes. And now let's render them just to see what we have. So I'm gonna access first of all, the red box, like so, man, I'm gonna copy and paste it on. In fact, used the green box component instead. Kept have do boxes. No. Where's the problem? Well, you're looking at it in your thinking. I probably would want a difference for, let's say, read red box and a green box. Well, just to have ah border or something like that to have a different color because currently, what's happening? I have the same box. But of course the whole point off, in fact, creating more components using some kind of bass style. While I still would want them to be dynamic where I still would want some kind of way where they would be unique so I would use some base styles. But when push comes to shove while I could add a different border, let's say I could have different color and so on and so forth on we already know that we could use the variables, of course, within our template, literal. And since at the end of the day, we're just accessing this string anyway, correct, we could try it out. I could say something like this. All right, so I'm gonna creating new variable. I'm gonna call this green. I said this to a color of green on. Instead of using the black color for my border. Well, we know we can access the variable mark so on. Then let's just set it equal to a green variable that is sitting on the top and it works. Now the problem is again. It works for both of them correct. So both of my components that are using this particular string, well, they have this in fact color, agree. So it is dynamic in this case, but again, it is dynamic for both. So what would be the solution? Well, we could head over back on the props, Correct. We know that we can use the props, So why don't we go with color prop? And again? We can name this, however we would like, But I'm gonna name a color. I'm gonna set it equal to a red since it is my red box. But of course, I could add a black car or whatever, and then I'm gonna do the same thing for the green box on. In this case, we're gonna set it equal to agree. Okay, Not step number one, then within the boxes instead of just accessing the variable that we set up here as a string. Well, we could try axing the props. Correct, Because we know that it is a possibility you when using styled components. So, in order to access the props, remember, we have to use the function instead. So I have my function. Then I pass in my props object? Um, that I'm just gonna set it equal to a props of color. So whatever value I'm getting back from my props color, well, it will be applied for my particular border and everything works fine until the moment when both of my boxes, well, they're gone. They're not display. So this is the case where we're gonna have to use a CSS helper function more CSS stack function. We're unfortunately, when just using the template literal. We're not going to be able to access deep props there. So we're going to import our CSS helper function. So right after the styled on in this case, it is a named import. So that's the reason why I have to place it within the parentheses. And since our CSS helper function is in fact tag template, literal or a tag function, well, we just place it in front of our template literal. Well, let's save it and let you go on the right hand side. In fact, we have two boxes. Oh, are both of these boxes have unique border car on. The reason is very simple, because we do have our color prop on. Then we just passed the values you can think of CSS helper function as a way to set up more complicated functionality within the strings that you're gonna pass in within your stuff. Components. So in this case, when we wanted to use the props, in fact, inside the strings that were passing into our style components well, we have to use a CSS helper function. 29. 28 animations: once we're comfortable would see SSL per function. We're going to cover the animations in styled components. Now, for the time being, you know what, ab Jess will stay exactly the same. So I'm not gonna delete anything here because I would like to place the boxes side by side , Meaning there's gonna be a new component. The animated box on. I would like to place it side by side with the other two boxes that I created. And then we're gonna take a look at another use case for CSS helper function. So that's the reason why app Js stays exactly the same power. We're going to create a new component. We're gonna call this and he made it box Js and then right away. Why don't we create our style component? So it's right. Import styled from styled components. Step number one. Now, eventually, we're gonna have to import also the key friends from cell components, but we're not there yet, but I would like to create another style component by the name of a box. So let's write export, uh const than the name is box on. I'm going to set it equal to a styled again let's set it equal to Dave than our template liberals on. Let's set up some based styling. Let's go first off with margin three. Ari Ums Ah, with again, we can go with 150 something like this. Then we have also the height. So let's set it equal 250 again Border. You know what? We can go with three pixels. Solid blue. Let's save it. Since we're exporting, I can just head over to ab Jess on I'm gonna important. So in this case, let's import are barks import than it is a named import. So let's in fact, access the box from our animated boxes. So our or animated box I'm sorry components, then within the components we have our animated box on, I don't know right underneath the green box. Why don't we look for our animated box or a simple box component? And there you go. Now we have our blue box. Now how we can create a animations when using style components. Well, we already know that typically when using this, he assess we would do something like this, he frames and then we would write the animation name on what we would want to happen during our animation. However, when using this style components, we're gonna have to import, in fact, the key frames. And again, it is a named import. So we need to place it within the curly braces. And I believe in the last video. I misspoke when I said the parentheses, So I'm sorry. It is the curly braces, not the parentheses. When we are, in fact, looking for the name import on the name is key frames, like so my the way it tells you right away on a right inside here as a suggestion. Well, what we are getting correct. So functional key frames on. I'm just gonna go with that, Okay, I have my key friends. Then I would like to set up the variable on. I'm gonna call this rotate. Um, what started equal to a key friends, which again is a tank function. So that's the reason why we have the function name. And then we have a Templar literal. And then let's set up our animation. So let's say at 0% like so, um, you know what? There will be no rotation, so let's write trans form. Um, let's that equal to transform to rotate our old take on rotate Ah will have a value of zero degrees like so on. Now I'm just gonna copy and paste that. So we're going to copy and paste that, Let's say, two times on, Let's change them values around. So at 50% instead of the rotation being zero degrees while I'm going to set it equal to a 300 60 degrees on when I'm 100%. So when my animation is, in fact complete, Well, I would just like to rotate it back 360 degrees like some And then, of course, within the barks, Well, we're gonna have to access are variable the variable that holds our animation on. Of course, we're going to start by, in fact, setting up the property on the property, name his animation. Then we're gonna go. In fact, we have our variable. So what is her variable is rotate that the animation name then how long the animation will take place? Three seconds. How the animation is gonna happen. Well, he's in and out on. In fact, how many times on I'm gonna go with infinite and in this case, you'll notice on the right and said that I do have my animation on. Everything works really well on. The reason for that is very simple. Again, we're gonna have to import key frames from the style components, not step number one. Then we're gonna step some kind of variable on. In fact, it is a tag template, literal meaning it is a tag function. So that's the reason why we have to write a function name than Templar liberals. And then we set up our animation. Then, of course, in order to access that animation, well, we just need to have the animation property. And then we're normally we would just write the animation name. Well, in this case, we're accessing the variable correct hand. Since it is a tag temple, a literal well, we need to use a dollar son. And then, in fact, the curly braces essentially interpellation as well as how long it takes all the animation takes place on. Then how many times the animation runs, which in our case, is infinite. How are I would like to point out one thing where we need to be careful when in fact we would like to reuse this particular animation because I could easily do something like this is what we're not only have this rotate within the animated box. Well, we could write Export. That's step number one and then within the boxes. Let's try to access. So let's say within the boxes, let's look for import than it is a name. The import, of course. Rotate on. We're looking for the file next door, meaning within the same folder, So I'm gonna import from animated box on. Let's try to use it. Person foremost. Let's say somewhere within the box, I'm gonna try to access it so it's right again. Animation. Then let's try to look for our in fact arable. So it's a dollar sign again. We need to do the same thing. Dollars signed into pollution. Rotate on man. Same old spiel. Three seconds. Ease in an out on. Also, let's use the infinite what? Save it. And now all the boxes are in fact using the same animation. How are like I said, we need to be careful where if we're not gonna use the CSS helper function well, it will not work. Okay, The way it works is very simple Let's say, Let's set up some separate variable by the name of I don't know, animation, animation. What said it equal to a simple template, literal. And then let's try to do the same thing where we're gonna access this particular variable like so. And then I'm gonna, in fact comment all the animation that I had before and the moment we do that, we get a massive, big fat error. And the reason is very simple because it is not supporting the more when using styled components. So be careful when you're setting up some kind of styles that you would like to reuse in multiple components. Make sure that you're using. In fact, CIA says helper function right away because there's gonna be cases where, of course, the styles that you would like to pass from one style component into another one. Well, they're just going to get more complicated, correct. Where we are using the props where we're using, let's say animations and you're not gonna be able to do it using Onley. Simple template, literal 30. 29 theming: excellent. Once we know how to work with the animations installed components next we're going to take a look at teaming in style components. So by the end of this video, we're gonna have the application where there will be some number as well as some content. On On the right hand side, there is a button the moment we're going to click the button while the colors for our application will change and you'll see how easy it is to do it. In fact, when using styled components All right now, first things first. As always, we have our cleanup. So within the AB, Jess, on what we would want. Well, first of all, why don't we get rid of everything that we had here? The only import support from obsesses on? You know what in the return again, just a simple hello from I will do just fine. Then, of course, I still left some part of my previous imports. Let's say that Yes, I do have a simple hello from amp that works really well then, like I said within the components, I do have two of them. The animated box and the box is on. I will move both of them into examples. All right, Now, within the components, let's start very simply by, in fact, setting up our themes. So our theme colors as I'm looking at my finished application notice, I'm gonna have a blue one Red one as well as the green one. Okay, Now, in order to do that, I'm going to create a new file. I'm gonna call this team's Js and then within the teams Js um set up will be quite simple where I'm going to create. In fact, three objects on I'm gonna export them right away so I can just close the sidebar and right const on Let's start with the red team. So it's a red theme. Like I said, it's gonna be an object. And then within the object, we're going to set up a primary color. I'm a record where, of course, since it is a property you can call this ever you like on, I'm gonna set it equal to a red as well. A secondary color secondary color on that particular secondary color will be rgb on. We're gonna go with 2 55 So the red one on before green and blue. Why don't we have 200? So essentially a lighter on my next step will be following. I'm going to copy and paste the same team the red team. However, the 2nd 1 I'm gonna rename a blue team on also the prime Mary color will be blue. And you know what? I'm also gonna change the secondary color for 200. So red is 200 greenest 200 power. The blue eyes gonna be 200 54th then last thing, we have our green team. So let's changed their name. First of all, variable name for the Green team and also primary color value to green. And again we're gonna do the same thing to 55 for green and then for red 200 on for the green or I'm sorry to the blue 300. We have our themes. Now let's head over back to our app Js on First of all, let's import the theme provider from style components and that is a component. In fact, that's coming from styled components on. If you are familiar with context, a p i it we're gonna look very, very similar. And the reason for that because under the hood thing provider is using, in fact, the context FBI from react. Okay, so it is a named import. So let's write theme provider. It is a component and it is coming from style components and also right away. Since I am important thing provider, I'm gonna have to provide 18. So let's import all the themes that we have within teams. Js So let's right the red team. And remember, of course, they are named imports. So green team green theme on Lastly, we have blue theme like so coming from on. Of course we had over the components within the components. We have the things and then when we're working with being provider for So we need to wrap our whole application within that thing provider because, of course, we would want to access to that particular thing. And essentially, you notice the center where there's gonna be three teams. Um, and we just pass particular team into our theme provider. And then our whole application, in fact, will have access to the colors that that particular team provides. Okay, Now, like I said, whole application needs to be wrapped in the thing provider then form the theme provider. There has to be a one return. So either we can return something like Maine were. In fact, we could use a fragment. It doesn't really matter. So for the time being, I'm just gonna return the main like so on. Then also, I'm going to set up some kind of heading one. So again, alot from up there something along these lines? No, the problem is right away the moment we do that. Well, we have a big factor where we have to provide a theme prop. Okay, so theme provider will expect a theme prop. And then, like I said, within that particular thing, prop were passing one of the teams. Now, eventually, we're gonna have a set up where there will be a button in the moment we click the button. Well, that's when we're changing the actual Valley 40. But just for this particular time being, I'm going to set it up as a red team on Let's save it, the moon, we do it well, there are actually no changes when just cr hello from map. So you might be thinking, Well, what's the big deal? Well, the big deal comes next were in fact, we're gonna set up our nab our on. We'll see how easy it is, in fact, to access whatever values we have. The themes. Now, as a side note, this is not the only way how to do it. This is just the particular way I had for myself. There's more obviously properties with CSS values that personal we could add. It's a fun families, I don't know font size and all that. And also it is not the only way how we could set up our themes again. This is just the way I set it up for this particular example. Please understand that even the toggle ing and everything that we're gonna do later you can do in 10,000 different ways. Okay? This is just to show you how the basics work. Okay, Now we have our thing provider. Awesome. We have the return within our thing provider. Now, let's take a look at how we can access those particular values again. In our case, those are just color values. When we can set up whatever CSS would like on in work to show you that I'm gonna go with In fact, new file. So I'm gonna create a new file. I'm gonna call this knave barge es and then within the nab our dress. Well, let's set it up as a react component. So let's go with narrow function on again. I'm using a snippet. And sure enough, I have my now Barca bone. Well, since I'm gonna pass, in fact, the button within my number, I'm right away going to set up a Children problem where noticed again. In my final application, I'm gonna have here this button. However, since I'm going to create a separate component for this particular button on, I'm gonna in fact pass it within the objects. And that's the reason why I'm setting this up as a Children now within the knave bar. Well, first of all, I'm going to set up a new style component, So we're gonna do a import from style components. So let's import styled from styled components and then let's set up are in fact Sal component on in the other components that we're going to create the content component. Well, we're going to do a different set up. We remember we had an option of also styling react comportment just to show you again and reiterate that there's many ways how we can work our in this case, I'm going to create my style component and place it right within in Hamburg. So it's great are variable. It's called this something. And in my case, I'm gonna call this knave rapper. Let's set it equal to styled. Or in this case, since I'm gonna use a now element, that's the reason why I'm writing now and then we have, of course, are back ticks. So we have our tactically literal so knowledge right are styling on. Here's the kicker We know we have a background property. How are instead of setting it up, let's say equal to red or blue or something like that. What we're gonna do is, in fact, right away used the props to remember in order to access the props we have to use in fact, the interpellation and then within the inter progression what we're passing in the function . So within a function, remember, we're gonna have to have a props object and then from the props return Well, that will be, in fact, the value for our background. So let's write props, then we have to access a particular prop by the name of theme. And then we're looking for that particular property that we have within our object. So if you name it differently, please make sure that you are, in fact accessing the correct property. So in my case, I'm gonna go with primary color. All right. So in the themes, I can notice that my primary color will be either read Blue, More green. And that's the reason why I'm setting this up. Pass a background color. Okay, Now, also, we could expand this a little bit. We're not only weaken return just the value for our sisters property. Well, I could return the whole thing. So the way that works is let's set up again are interpellation. Let's set up her function or proper selection on let's access our props Object on. In this case, though, when I'm returning from this particular function, I'm gonna turn first of all the color property and then in order to access again within the template literal the variable well, again, I'm going to set up one more interpellation where I'm gonna look for props. I mean, and then in this case, it is a secondary color. Okay, now, just to show you how everything works, otherwise you're probably a bit confused. Let's do this. Let's head over to a div. Let's write a knave bar wrapper. No. Then let's set up a heading to like so and then we didn't heading to what's right. Company name. Okay, No last thing we're gonna have to head over to a objects import are now bar like so. So it's import. Never bar from again. Components within the components. The number is sitting right here. And then instead, off returning a heading one. Well, we're gonna return a number, so that's right number. We're not passing any props and check it out. What do you notice in the browser? Well, I do have right away my background color, even though even though I didn't set it up as red, I just said, Listen, grab me the themes prop and whatever property you have on themes prop. Now let's just set it equal to death particular property, then also the same thing wants with a secondary car. Where, since I know that within my theme, there is a property with a value for my second dollar Carl. Well, I just started equal to a color property on right away. Said it equal to that particular value. Now, if we're gonna head over back to app Js And instead of looking for the red team, we're gonna look for the green thing. Check it out. Now, my colors are in fact reflecting that the values we have within the green thing, the same thing if we're gonna set it equal to a bleak bloating on Yes, of course. On right. And said again, we have our colors. So hopefully you get that idea more. First of all, we set up our values and then we pass one of these rallies in this case into our theme. And, of course, later on, we're going to set up, in fact, the toddling where I could just click on the button and toggle that particular thing. Okay, now, what's even more cool is I can show that if we're gonna set up, in fact, a new component and I'm going to call this title on Let's say, if we're going of past in that particular component within the NAB are so instead of setting up this heading to within the nab our within the component. In fact, I could nest another component within the NAB our and even still, we're gonna have access to our particular thing. I'm now just a showcase that let's create a new component. What's called this title Js again? That'll Js eyes going to be a functional component. Andi, we're gonna have to import, in fact, right away styled. So import styled from styled components. Okay, then. Remember, we had multiple options. How we could set up our component. I could right away style the react important instead of setting up like we have within Napper, where we did our set up for the separate style component and then made a return from R. J six. When this guys, why don't we do it this way? Let's in fact set up styled right away than the name off. Our component is, of course, title. Then we have to have our tactics on weaken just right. Whatever styles would like order now in my return, in fact, I'm going to set it up as a and in Cuba, remember, we had to have access to our class name. So let's write class name, prop. Otherwise, this particular set up. Well, it's not just gonna work. And then also let's grab the title prop that we're gonna pass from the napper. Alright, so first of all, let's say are knob R. I's gonna have a title. The title prop as well as Remember, we have to have a class name with the value for our class name Pro. Now it's more interesting. Like I said, what I'm trying to show is that even though this particular component, well is gonna be nested within the knob, are we still have access to our think so in order to show that again, we're going to set up the interpellation props. So we have to have our props function the van from the props function. We're going to return a Templar literal. So it's right here. Props, as I am Templar literal on. We're returning the property by the name of color, and the value is gonna be again interpellation props theme on whatever value, like So since I had secondary color mark. So what's imported in the nav barges and you'll notice that we will have no changes with our application. So let's go with import title from on we're looking in the same folder. That's the reason why Well, for the title and again instead of using the heading to Why don't we just change this? Why don't we say title like so and then for the title? Let's say again, Title prop Correct. That was our set up on what's right. No company name. So company name. Let's close our title on You'll notice that there are no in fact errors in my coat. So everything works really well, even though in fact we are accessing right now a nested component. So what that means is, once we set up this theme provider regardless off a nested, our application becomes because notice again, the title is not sitting here somewhere where the theme provider is technically available. It is sitting within Naber but were still able to pass the steam. So the value that we have for this particular problem down to the react component tree No last thing as far as the knob bar is concern, I'm going to set up a little bit more ceases. So first of all, I'm gonna say the Children are going to sit side by side with, in fact, the title. Yeah, and that's step number one. And then I'm going to implement a little bit of plugs box. So it's right. Some padding. Let's do one more e M. Yeah. Then next one up. We have text transform, text transform on. I'm going to set it equal to I don't know, capitalize something like this, something like that. And then let's use display. Flex This play looks on. Let's set it equal as justify content. Ah, space between yeah, something along those lines. Let's say it again the moment we can notice only the padding and capitalisation. But in the second, once we passed the button, of course. Well, we're going to see the flex bucks. In fact action as well. We have our now bar. Then again, let's open up our components and let's create one more component by the name off button. All right, it's creating new file. It's called this button Js on in the button jazz file. Well, we're going to set it up as a style components of import styled from styled components. Okay, then let's create a new variable. Let's call it a button styled mutton on. Of course, I'm going to set up my tent laterals. So my tag template literal is already in action. And then again, the same way how we were working with. In fact, the knob are well, when I want, let's a background color or color. In fact, I could access right away athe So again we have our props function. Then, as a return from our proper function, we're going to return a temple a literal. We're going to set up our seizes property by the name of background. I'm gonna set it equal to a props seem ah, secondary color. Okay, Something like that. Then let's add, in fact, are semi colon that is, in fact, very important. Otherwise, your application will experience some assures if you're not going to set this Michael on land instead of the color worms are instead of the background color, why don't we go with color on land instead of the props team? Well, we're gonna set it equal to a primary color. Okay, let's save that. And again, we currently cannot see this particular button, but we're going to see it in second. So let's write text transform. Let's set it equal to a capitalized like so on Then let's maybe add a little bit of border two picks those solid black And last but not least, when we had cursor or pointer. Now, once we save this particular button style component, well, we're gonna have to import it as well. So it's right on export default on. We're gonna export this particular button then within the AB. Jess, my access that button. So import button from on, of course, were looking in the Components folder on within the components folder. There is a button component. And then, like I said, since I already have this set up in my nab our where I'm expecting a Children more accepting the Children. So I'm gonna pass my button some even right button on in the box. Mutton. Let's all right. So our goal, I mean something like that on. Let's save it on. We're seeing in a browser that, of course, we have our button. Now, Currently, when we're clicking the button, we're not changing any values. OK, now, lastly, let's set up the content In fact, component where if you're looking at, are finished application, well, we're gonna have against some title as well Assim text. So we're gonna set it up right underneath the number, and then we're gonna work on the functionality. So as we're clicking, we are in fact, changing the thing. Okay, so last component within the components, what's great in your file? Let's call this content Js like So let's set it up as area component. Then the name will be, in fact, content. But since I'm gonna use the style component option of styling the RIA component, well, I'm gonna use right away the last name Propp. And in fact, with my return, I'm going to set up a section and right away a class named Prop with the value. What's coming from? In fact, my props, right. We're also gonna import styled. So import styled from styled components, Okay. And then within the section, why don't we write some having three and let me close the sidebar Ah, section title section tattle on. We can also set up a paragraph within the paragraph. I don't know, weaken right, like 30 or something like that. So 30 words on last But not least we, of course, off our react component. So why don't we style it so export default Styled. We're styling our content component and then within the Mac. Tex, let's just write a little bit of CSS, not start with text, transform, text transform. And in fact, our text will be capitalized, then padding. We're gonna set it as a to worry EMS background. Well, for the background again, we have two options. Weaken. Either set it up as a value that's coming from theme or in fact, weaken right away half or whole property. Now, in this case, since we are already experts, why don't we do this? Why don't we just grab both of these values from the button? Because I don't see the point off retyping them. Let's copy and paste it. In fact, like so on land as far as the background I'm going to use the second Ellerbe color on the color is gonna have the same value. The primary color. Okay, let's save it on last button, unlaced. We're gonna head over top. Jess. I'm gonna import my component by the name of content. So it means right import content from And of course, it's coming from components than the name off. The component is constant. And then, let's say, right underneath and nav bar. Why don't we do this way when we look for our content component and there you go again, we can change the theme and you'll notice that not only the NAB are not only the title that he's nested, in fact, within our number on the button on also the content component basically all the components that are sitting within the theme provider well, all of them will display, in fact, a different color once we change our theme. So once we go with a red theme, sure enough, one of them are displayed as red. Then we can also do the same thing with the green tea. Not let's set up our dog ling functionality normally prior to hooks Prior react hooks. Well, we're gonna have to change it. In fact, this to a class based important That was just the way to do it because we would set up some kind of, I don't know state here, of course. And then every time we click on a button, we would change that value in the state. And then, of course, we would change the value that's being passed into our fame problem. Our with a rival off react cooks. In fact, we could use the use state off. So first of all, let's import use state hook. No, Once we have this hook, it is a function on the function returns to things. In fact, it returns a all right on the first value is the actual value of the state in the way. And the second value is the function that controls that valley, not the boy with the best way we can. In fact trick. That is, in fact, right, the long okay. And then let's use our use state, like so on. Currently, let's just pass Red Thing, because within the use state we have to pass a default value for our state value. Let's save it on. I'm gonna open up right now, my council, just to show you that within the council, Like I said, the function, the use state hook function returns the array on the first value is in fact the value of the state, which in our case, is a red thing. Correct? That is an object in the 2nd 1 is the function that controls that particular state value. Okay, now there's multiple ways so we can access these values we could set it equal to would say a some kind of variable Since we know that we have array, Of course, that is always an option. But we can use a shorter way where we could set up, in fact, a All right, The structuring on the way works is I'm gonna write Constant. So I'm gonna create two variables on the first variable. It's really after us how we would like to call it. So we're accessing two variables. So 1st 1 is the value from the array on the 2nd 1 is the second value from theory, and in this case, I'm going to right thinking I'm set thing. But please remember, you can call them, however you'd like, because what you're doing here is you're setting the values that are coming back from the array to those particular variables. So the 1st 1 is the value of the state on now, it's actually equal to a theme in the 2nd 1 is the function that controls and we're gonna set it equal to use state on. Like I said, we do need to pass a the fourth value. So, Marcus, I'm gonna pass ready but we can pass the Green Team blue team. It doesn't matter. And then, instead of just accessing the green theme straight away, I must say, I would like to access first of all, the variable that holds my default e the moment we save it. Well, our application is again read the reason for that because, of course, we're passing in the default value as a resting. And now let's set up are struggling functionality. So first of all, let's set up or function that changes that. So I want it deleted on the name will be handle. Ah, theme. That's the name of my function. I'm gonna set it equal to a function Of course on Then let's decide how would want do that again. There's multiple ways how we can do it. But I'm just going to use a very, very simple, if statement somewhere say, if theme in a primary color. So again, in this case, I'm accessing the value in my state, and I'm saying even the primary color value is equal to a red. Well, I would like to change it, so I'm going to run, set being and then passed in a different option on like a sorority previously, it's obviously not the only way how we can set up the Tata going. All right, this is just my set up because I found that the most easiest okay for this particular example on what's right green thing. So if the theme is red, which I know because if I'm checking the primary color and if the value is red well that I know that my theme is in fact the red thing. So I would like to change it to a green thing. So what we're doing here is, in fact, we're using the sect in function, and we're just changing from the red thing to a green thing. Now that's case number one. Also, we have a case where the theme would be actually green. So it's right else, if again, the parentheses, theme, primary color. Let's just check it. Whether the value is equal to green. If it is well, why don't we change it? The blue, so again function said theme Blue Thing like so my husband. At least we have an option. Of course, if the theme is blue makers in both of these cases, we checked whether it's red or green. When lastly we can say All right. If it is blue, then let's just change it to read again. We could set up here some kind of Ah, I don't know around them number or something like that, where I'm in fact toddling over them or something along those lines. There's multiple possibilities. In my case, I just went with else. And if statements. Okay, now let's just change that to a red theme. Let's say that. And now when we click on the button and you know what, I think I can close the council here. Ah, then we would like to run the handle thing. OK, what's right? Click on let's. In fact, use our function reference. I'm not save it. And then you're gonna notice something interesting where each and every time we're going to click the button while our colors we're gonna change. So just reiterate the main points. First, we're gonna have to have our thing provider. And then we have a theme problem. And then within the theme prop were passing in the values that we're gonna set for each and everything. Now we could set up on Lee one thing we can step set up 10,000 teams. Of course, it makes sense if you're using these particular actually properties Well, to name them exactly the same because you're gonna be accessing them from the components that are being rendered in your application and then within the theme provider, we need to have a one return, in fact, so we need to wrap everything within one element, and then we just need to come up with whatever components we would like to display on, regardless off how deep your components will be nested. Remember, we have a title component that was, in fact, sitting with the number still, each and every time if we're gonna access, perhaps I mean, on whatever property names we have. Well, we're gonna have access to those ralliers. We can use it just to set up a value foresee his property were, in fact, we could return the whole property. So that would be on the themes in the CSS style components in natural 31. 30 media queries: right after theme ing. We're gonna take a look at the media queries in styled components. Essentially, how we can change styles as our screen size is getting bigger. War smaller was always first things first. Let's clean up our application. Now, this case, it's gonna be a little bit different. Where I'm gonna create in your folder. I'm gonna call this theme ing more something along these lines. And then let's select all the components that we created in the last video. In fact, let's set it within the theme ing. Yes, that is correct. Then I'm gonna have bunch of questions. Well, that I would like to change my imports on. No, I wouldn't. So, within the AB, Jess. Ah, we're gonna in fact, delete most of our imports as well as the functionality. Like so on. Also, the return eyes gonna get slimmer. Gram, we're going to set it as a div. Andi, within the death, let's just say low from there something like that and then lasting the theme ing folder. Why don't we move it into the examples? Okay, so you have it for your reference. But of course, Finally, our application is cleaned as Well, as I'm not a big fan of all these tabs on Yeah, why don't we start working on the media query on the essential idea with the media query in the style Component is, in fact, very, very simple. However, since there is some downsides to just using a simple method, we're also gonna spend the next video on setting up a little bit more complicated approach . Okay, first of all, let's create a new file What's called his banners Js and then within the banner Js Well, we're gonna have a style components. So it's import styled from style components. That's step number one on Let's create our first banner. Let's just say export right away. So named Export const. Banner. What set it equal to styled? Let's use. In fact, they live and I'm going to set up some CSS properties like, for example, background. Um, I'm gonna have my background. As of right now, we're gonna head over back to AB Jess within the objects were gonna imported. So let's look for our banner from more banners component. So within the components folder, we have our vanished. And instead of having this silly hello from AP Why don't we return a banner component? Correct. And then within this component, why don't we have, like, a heading one with a first banner for his matter? Right now, let's say that And then what I would like to do right now is in fact head over back to banners. Js on. We're gonna add a little bit more styling to heading one just so we can cover the nesting. Remember again, since we have right now a heading one within the banner in the style components weaken, do nesting Where I am selecting right now, the having one on I'm gonna have some color on the color will be Let's say white on. I'm also gonna handsome text transform Um, let's say uppercase now. The whole idea behind the media queries is the fact that as my screen size is in fact changing, well, I could also change the CSS on. We know that in a regular CSS we'll write something like this meteor screen on. Then whatever screen says so installed components. It's almost the same. But syntax is a little bit different where we write media so at medium. Then again, we need to select the screen size. So I'm gonna go with men with off, Let's say 5 76 pixels on. What we're saying is starting from the screen size off 5 70 six. Well, our styles are gonna be different, and I'm going to set it to a background off. Let's a blue like so on four. Heading one. Well, I'm gonna change also the color to a yellow. Okay, so that would be a syntax for a very, very basic media query. So once I get past the screen size off 5 76 well, what happens is that my color is right away changing not only for my banner met. Also Ford heading one on. Just to reiterate my point when I'm going to do right now is, in fact copy and paste my banner. We're gonna In fact, we name this as a second Boehner on. Let's just change some of these values. So background right away he's gonna be below than the color and we read text can stay. Application doesn't matter. Background. Once we're past 5 76 is going to be green, and color is going to be blue then within the AB. Jess, let's import this bad boy, sick and banner on. We're going to do the same thing like we had before. Copy and paste it on. Let's just change it here. The actual component name. So it's right. Second manner I'm within the heading to We're also gonna have a second banner. Okay, Now, both of them. Since we have added the media queries well, the moment our screen size is gonna get bigger than 5 76 well, the values are changing. Correct. One downside to this, though, is if you're noticing as we're setting up our application and the more and more components are relying on this particular value, well, there might be an issue where, down the road, I might think You know what? Um, I don't like 5 76 I would want, like, 6 76 So each and every instance that I have for this particular media query, Well, I'm gonna have to head over there and change it. Otherwise, if I don't do this manually, well, you notice that First of all, the second banner is in fact changing. Once it gets to 5 76 then on Lee, the 1st 1 he is doing the same thing. He is basically using that mirror, equerry, because the value is already 6 76 So there has to be a better solution where we could set up our values. Let's say in one place, once we do that than each and every time when we're using the media query, well, we are in fact accessing those values. And then if we would like to change them, we just need to do them in one place. I rise. This could get annoying where you're gonna have to jump from one component, another one, and in fact, change this manually. 32. 31 media with object: okay, so we can see the issue. But what would be the solution? So we don't have to jump from one component into another one and then change these values manually. Well, we could start very simply by creating, in fact, a new object. I'm gonna call this const scream. I'm gonna sit this equal to an object said on We're going to set up a property by the name of foam. Now, phone is in fact signaling that the screen size will be equal to, let's say, a phone screen size right now, instead of just setting this to some kind of value. In fact, we could set it equal to a function. Correct. I'm going to set it as a hero function on from this particular arrow function. Well, we're going to return a strength. Now that's step number one. Then we know that as we work more jobs, in fact, we could use a rest operator on we could gather aural the arguments that we're gonna pass into this particular function. Then I'm going to do two things. First of all, I'm going to re assign them on. You don't have to do it, but I just think is gonna make a little bit more sense. I'm gonna reassign arguments to a styles variable. That's the number one. And also I'm gonna in fact log out the styles just so I can see where in fact, we are getting these values on last. But at least since I am using a Templar literal, I could just access it personal these styles. But instead of just returning a simple string, I'm gonna return a media query. Remember that? Was this Intacs within these tiles components on, Let's say men with like So, um, let's just add some kind of value in my case is going to be 576 pixels. Okay, Now, remember, in order to have a proper syntax for media query, we needed to have the curly braces. And then, since I am using a template, literal, well, I'm gonna access my style's basically the arguments that I have gathered from my function. Now, instead of hard coding, whatever we had before when we had the media and then all this with instead, First of all, I'm gonna common this up. Just here can have for reference, but instead first will remember again we have to use the interpolation. Then I'm looking for my screen object than within the screen object. I have the property ward method by the name of phone. And then I can run it easy here as a tack template. Literal like so war. I can run it as a function doesn't really matter. Now I'm going to run it as a tag template, literal. And then, within this particular tag template, literal, Well, we're gonna pass in whatever. See, a sense we would like to change. So it's a ride. Background, Let's say blue, just like we had before then also, we're going to select the hearing one. So let's add the semicolon. Because remember, we're still tapping all the CSS. Let's write heading one than within this particular heading one. Why don't we add a color? Ah, for yellow on. Just to show you how it's gonna work with 2nd 1 why don't we just grab a with this that we just created? Let's copy that. Then again, I'm gonna come in the soldiers here. You can have it for your reference. Let's copy and paste it. And remember, we're still accessing the same object and the same method. However, in this case, I'm gonna change them values here, right? Instead of background being blue, it will be green on. You know what? 40 heading one. Remember, we needed to access blue, not save it, and you'll notice the moment our screen size is gonna get bigger than 5 76 Well, all the changes that we wrote within our function and passed it as an argument while they will be applied in this case instead of again jumping all throughout our application. I'm just changing this in one place. So if I'm gonna change it to, let's say, 900 pixels than still once I'm less than 900 my media query won't be showing. And then, of course, once we're going to get past 900 well, then right away, we're have our styles numb. Please remember, Of course, I wrote it within the same component. Basically within the same file is because I didn't want to jump back and forth from the other in fact, component already filed. But normally you'd said this up somewhere in a different file. I'm just imported wherever you would like to use the miracle. So in this ways, I just need to change it in one place. And, of course, you're not limited to setting up on Lee. One method, you can have one phone one this stop where in fact, you are using different values instead of men with of let's say, 900 you're gonna have a phone with, let's say 5 76 Then you could also set up. Like I said, this stop, they're stop. The desktop is gonna be equal to again. Another method and so on so forth. You just need to make sure that you follow the proper job. Script syntax. Of course, that's the reason why we're adding, in fact, the comma. But everything else is really up to, you know, Lastly, let's just check it out. What we do have in the console just to make sure, um, where in fact, we're getting our arguments as you notice once we can Salakjit, we do have, in fact, our set up where I'm gathering everything that I had from my arguments. That's the reason why we're using the rest operator. Um, in fact, gathering all the arguments that are being passed into this particular function, Then I'm reassigning it styles and then eventually I just create my return where I am returning a media query and then within the meat media query. Since it is a temblor literal, well, I just access on my arguments on that way all the CSS that I'm in fact writing and passing into this particular function well, it is applied for that particular style component. 33. about project: awesome guys. Congrats on completing tutorial and welcome to our beach Walk Result Project. Even though we'll use quite a bit off CSS to create this project, I just want to remind you that the main goal off the project is not CSS like me. Repeat, The main goal of the project is not see assessed, but in fact is reusability off our components and functionality off helper functions. So what do I mean by that? Well, if you're just looking at this project, it will be probably faster to just build it with global citizens. And yes, I said it, it would probably be faster. Just build it with global ceases. But remember that our goal is not just this project. What we are trying to do is create components that we can reuse on helper functions that make our workflow better. 34. 2 project intro: what in the world we will build in styled Components Beach Walk, Resort Project. And I guess before we take a look at actual project, let me tell you my reasoning Behind the project two main goals of the project was to show you how we can use styled components to make our CSS reusable beat in a different section on page or project altogether. And second, how we can leverage the fact that we can use JavaScript installed components and by doing so, improve our work full tremendously. That should cover why. So let's take a look at a actual project. We're going to start off with a header section on within the header section. There's gonna be three components that we will be able to reuse all throughout our project sections or pages. So the first thing we're gonna be this massive hero component which we're going to serve as our background than the middle one, which will be banner. And then there's also gonna be the button. We also gonna take a look at how we can implement animation without our banner using these stealth components. Next one up will be about section on first and foremost we're gonna take a look at how we can create a section component meaning for each and every section. We're gonna be adding the component that will gonna have some default values more precisely patting as well as we're gonna be able to change the color. So the only difference if we would want to get a colorable just gonna have to pass a prop in the style components and we're gonna get a different color 40 section. We also, we're gonna take a look at title. Now we can make this reusable on. As you can see, this is where we're using the button. As far as the helper functions, by this time, we already have created many of them. By the time we're gonna be done with this section, however, the most noticeable on probably would be border. So as you can see, we're gonna have a border and we're going to create a helper function that allows us to create borders very, very fast on. Then we're gonna have our room section when there is going to be quite a few more CSS properties. Of course, because as you can see, as I'm hovering, there's gonna be some, however, effects the prices showing. Then we're also gonna have a shadow As I'm hovering. Noticed the box shut. I was increasing on also were using the button here. Now, this is the same button that we created before. But since we use style components, we can extend our component on just change whatever we would like to change to make it more specific. So in this case, we just made a batting smaller. So that way we don't need to rewrite our CSS. We already have original thesis, and we just extended the button on Made its more. I also want to let you know that we will going to use media queries so the key friends will be used from styled components. As you can see, the project will be responsive. So depending on the screen size, there's gonna be either to calm layouts or three column lands and so on and so forth. Hopefully, you guys enjoy the project and let's start building it 35. 3 setup files: In order to improve your experience, I prepare the set up files for our project. And I would like to spend this video talking about what you're gonna find in the set up Piles folder as well as what was my reasoning on placing these kind of items in there and you can find the set of files in the resource is of this video you're gonna be able to download Zip folder. Once you unzip the folder, you'll notice that this is gonna be your folder. Then within the folder, we're gonna have three things we're gonna have. Images will have rooms, data as well. The styles know the images should be most self explanatory. Where we're gonna have all the images that we're gonna be using throughout the project. Well, that has background image, whether debts about rooms and so on and so forth. The next one up, we have rooms, data, and this is just gonna be a array that we're gonna hold information about each and every room since obviously we're gonna have a react project Wheels is gonna loop through this array on this is gonna be information about each and every room. Again, it's not like you couldn't make this yourself, but I just want to make your life a bit easier where everything is already prepared for you . And last but not least, we have one of the two major reasons of why we're doing the project in the first place. So the main ideas about the project are very simple. I would want to go over how we can make our CSS reusable using the style components, as well as how we can use and create helper functions, since we can use JavaScript within our style components on, Here's my thinking. Let's say if you're building the project and you get tired, were annoyed with CSS. You're like, Well, why do I need to look at CSS? And we're just building against the assess and more success. So if that is the case, you can just either watch the videos by not falling along. Or you could just skip them altogether and use these helper functions in your own projects . If you obviously find them useful now, within this file will be all the helper functions that we're going to create throughout the project. So even without watching the project, you can just grab these helper functions on and use them all throughout your projects. 36. 4 styled hotel install application: to kick things off. We were going to create a new create react project again the same way how we did it with style components tutorial. So, first and foremost, I will gonna head over to terminal. I will going to navigate to a stop. And you know what? I will gonna zoom in just so you can see for sure what is happening. So I was like, This is my terminal. Oh, gonna navigate to this. Stop now. Once within the nest up, I will going to use create react Cap on. I'm gonna call my application Beach Walk Resort now. Actually, you can call this, however you would like on the moment press enter. Of course. Now they create react. Knapp takes over, starts installing the dependencies, and once all the dependencies will be installed, I will going to resume the video. How awesome we have Our dependence is installed. So now I would like to navigate to the folder. Well, like so once I will gonna be in a folder. I will gonna open this up in my crate coder on my case. This will be obviously visual studio code. So the only thing I need to type is code dot on before we start up the server, before we start up the deaf server, I would want to navigate to obviously my text error on. Let me zoom out a little bit. I will gonna right away install style components because obviously, this is what this whole courses about. So I don't think I need to waste my time by starting a server and then start the next video by again installing the style components. So it is going to say in pay em installed as they're safe. And then we're looking for styled components like so the moment we installed them, Then we're going to start up the defense ever as well as I'm going to show you how kind of set up I have as I'm developing. So basically, I will gonna open up a new window. I want to have the new window. This will be side by side. So we'll have my browser window, the small one, the one that we're going to use all throughout the development. But there's also going to be a bigger one as well, just so we can see our changes once in a while. He and a bigger browser window. So my plan is very simple. I will gonna clear the council right now. So clear the council. Then we're gonna run NPM. Start that. We're going to start off the death server now. I will gonna have my dear sir own right hand side. Like I said, I was gonna probably make this side bar a bit smaller. I can close right now. The council. I don't think we're gonna need it. Our integrated terminal. I can also close this welcoming screen and then on the screen. This will be a finished project. So as we were working with finished project, I'm pretty much going to show you what is happening. And then this will be our project on Lee. Bigger browser window. So at the moment, this obviously will be a default, create react up. But the moment will could be them with a project. This will look similar to what you're having right now. So, yeah, this is gonna be our basic set up. And now we can start working on our application 37. 5 styled hotel folder structure: Okay, that was nice and easy. Now we do have our boots strapped application. So why don't we first start with a folder structure? Because we all know that that is crucial for any application because it is much more harder to make any changes later on instead of get everything ready right off the beginning. Right now, as far as folder structure is concerned, since this is a react application off course, you can structure your project However you would like. I copied my project structure from the gas B. J s. Now, for those of you who don't know what it's got to be just basically, that is a static side generator. Well, frankly, it's way more, but let's say let's stick with official naming Ah, statics I generator, which has a folder structure that I really liked. Now the basic idea is very simple. So I am in my source folder, correct on within the source folder. I will going to create a folder by the name off components. Now, within this folder, I'm going to create two more folders. Now, one folder will be global's. Basically, these will gonna be the components that we use throughout our project or we can even copy and paste them and use them in different projects on. Then there will be folders that relate to each and every page that we're gonna have in the project. Of course, in our case, we were gonna have only one page. But just to give you an idea, let's say that you if you have home or about page or contact page in our case, we have only home. So I'm going to create a folder that will gonna have the sections that are displayed within home pitch. So if I'm gonna be creating something within my home page, I we're going to create a component, and then I will use maybe some global ones components there. Maybe I'm going to create some unique ones and so on and so forth. So this will be components folder. And within the Components folder, we have the global's as well as we have the home folder, because obviously again in our project, well, we're gonna have Onley one pitch, But if you're gonna have multiple pages, you can just add more folders here. That would be the set of porter components. Then I would want to have the images folder where basically I will gonna have all my images . Now, if will gonna head over to our desktop, Of course we can see the set of pulse. Sure enough. And then once we see the set of files, we see that. Okay, so I do have styles. I have rooms, data, and this is my images. So what I could do is again copy and paste it and get those images into my beach walk resort. So let's head over to Beach Rock Resort. Let's get over to the source. Now, this is important. So this would be in a source and legis copy and paste these images? No. After that, I would want to set up one more folder. Now, that folder again will be by the name of pages. And when I say again, what I mean by this is in our project, of course, there's gonna be only one page, But later on, if you had more pages, you can just stick them here. So that way, what's gonna happen is that you're gonna have components that are responsible for each and every page. So it's a in this case, we're gonna have become home component that is responsible for the whole homepage. However, within that home page, well, obviously gonna have different components that are responsible for each and every section. So what's gonna happen within the ab Js? We will render the homepage that is within the pages folder. But then within that pages folder will be rendering all the components that are sitting within the homepage, and it will be a little bit easier to understand as we're moving along on the reason for out again is I just copied this from the gas B J s where basically we stick our pages in one place. So this is gonna be all the components that are responsible for our pages and then later on , we can pick and choose how we actually add these components here again. This is really up to you. You can follow this structure, you can come up with the own structure. You can obviously use the structure that you already have. But this is the structure there. I prefer. Now, as far as the rest of the files are concerned, what I would like to do right now is just zoom out a little bit. Hopefully you were able to see everything that was happening. And now let's see. So I do have my index Js and I do have this import off Index es is well, since we're gonna be working with styles from the stealth components, I don't want it. So you can either delete it. In my case, I can leave that Index es says there I don't really care about it, but what I will going to do is get rid of this line. Basically, I were going to come in this out. Let me say that that's probably gonna be the last time we're gonna be dealing with Index Js . Then we're gonna head over to ab Js and in this case we will get rid of few things. So I don't want this import logo as well as perhaps the assists as well is not necessary. So let me delete both these guys. Then we will gonna delete prairie much everything here within this Dev. So now we actually have a bit of a mess here because there's a simple return. So why don't we start by very simply saying live on? We're gonna have some hello world I would say that her application is very, very bare bones. I can get her off this logo. I will not gonna need it. But still, within that same folder within the source folder, I will gonna create a new file. We're gonna have all our helper functions. And again, you can name this file however you like. I'm gonna call my style's Js, so as long as you have some kind of file, everything is gonna be working. Fine. Now, this will gonna be set up with the folders and before we dive deep into creating actually home page and then maybe creating our first component. What I would like to do is head over to the public, go to index html on Let's maybe at a proper naming here, right? So let's find a title and I'm gonna call mine Beach, Walk a resort, and I will gonna have this recording here. And the reason is very simple, because if you're checking off, what is my actually finished project? Noticed that I have beach walk resort, and then I was that the moment I have react that, but we're gonna have beach walk resort recording, so that way It's a little bit easier for me to distinguish which one is a recording in which one is actually the final project already. Now, this is saved at the moment on that will probably going to be last times. Well, when we're heading over to indexation email so we can close it at the moment, we're not gonna add anything within the styles, Js. But this will probably gonna be I would want to say your most important file, but I mean mostly. And then I can close the styles Just a moment. And like I said, why don't we create our home page? So I will gonna head over to the pages. I'm going to create a new file. I'm gonna call this home Js and let's maybe go with a capital letter. So home Js on. Since I'm using again my snippets extension, I create a new functional component about this How sleek and B e r a function component says you can see right now So I can const home. This is the name of my component on then here This will be a export default. Now, In this case, I will not going to export right away whatever I have in the home because, like I said, this will just be rendering my whole homepage. But I would like to do instead is start creating the sections that will be responsible for each and every component within the homepage. So imagine this. Let's say, would be a header section, then this will be a about section on. Then this will be, let's say, room section. So what I would like to do is separate them a little bit. So they're not all within the same folder, because then it's gonna be really mess. Imagine that you have like, but says ex pages and then for each and every page, you also have the components that are displayed on each and every page. So at least this way you can divide all the pages that you have and then start creating the components that you're using in those pages in a separate folders within the components folder again, this is just my preference that I copied some parts of it from Gatsby Js But you, if you don't like the system, you can honestly come up with your own one. So what I have right now is the home pitch. All right, so everything is working really well. But the first component that I would like to create within the homepage will be a header. So I'm gonna head over to the components. I'm gonna head over to the home folder, since this obviously will be responsible for all the components that we're gonna have within homepage and we're going to create a header Js Now again, we're gonna do exactly the same thing where we're gonna have a functional component. How are you going to say that this will be in our function? And then why don't we start very simply by hello from Header? And obviously you'll see later on all the things that we're gonna be doing. So the moment I'm just gonna save the header, I will gonna head over back to the home Js and we're gonna have our import. So in this case, I would want to get the header. Now I will gonna have to navigate to Components folder within the Components folder. This will be my home folder where all the components will be located. And why don't we start very simply by saying that this will not be a div. This could be, in fact, a react fragment. We can go ahead with a header on. Let's say that on at this point, nothing is actually happening because the last thing that we would need to do is head are over two ab Js and get my home page. So in this case, I could say import home. And now I need to obviously have get to a what? Well, this is not gonna actually leaving the folder. This will be within the pages. So I have my pages and within the pages, I have my home page and instead, off actually rendering the Div again with hello world, I will gonna get rid of everything and we're gonna go again with a react pregnant. Now, for those of you who don't know what is react fragment that basically allows us not to overpopulate our document with unnecessary HTML tags. No, In this case, you have a full option. You can write, react, and then you need to adhere. Dot for ag meant like so. But this will be exactly the same like we had before within the home. So we have a shortcut here. Just a closing and opening angle bracket or weaken right, full on, react, pregnant and closing One also will be reacting now. Actually, I have right now a syntax error. So let me delete that now everything should be working really well. And then within this react fragment and by the way, known this is not gonna be working really well, because this is how it should be. If you don't prefer this angle, brackets get, it's exactly the same thing is happening. And now let's go or with a home. And yeah, this should do it now is that the moment is complaining? Okay, Home is not have found And I think my error is saying that we can't have the home. So let me head over to the home Js and notice I'm looking for components that I'm looking for a home folder. But I should be looking for the header because that's the thing that I would want to render in the moment we say that everything is fine. So we have our hello from the header which obviously will be in our home folder and then we're gonna have the header component on all the rest of the components will be in the home folder as well as we're gonna import them into home components within the pages. Enough for the abject. The only thing we're gonna add more will be the global stops. And then, in fact, we will be done with AB Jess. And then rest of the work again will be within home. Jess, where we were gonna import whatever components we are creating within the home components. And, yeah, that's pretty much going to be our set up. 38. 6 styled hotel global styles: once we have created our folder structure as well as we do have our first components within the pages as well as we have the first component within the homepage. Why don't we think care of the global stones? And again, normally you would do that either within the app, CSS or index CSS. This is where you would basically story or global stocks. However, since we're learning style components on, we want to be rebels are slim over exaggerating were not. Rebels were just following the guidelines of styled components. But let's say for true CSS defenders, we are a rebels. We were going to be creating a global styles using the stealth components. Now we could create it anywhere we would like because we're gonna create within a separate component or you could, let's say, created within the objects as well. But since this will be quiet, a big file I will gonna head over to the global's and I'm gonna created this component within Global's. So first and foremost I will gonna call this let's say, global styles, global styles Js and again. If you don't prefer this component to be within the components Housley, you can just create here whenever you would like within the source. Okay? Now, I would need to import this. First of all, from style components on the proper naming is like this we're gonna be going with create. By the way, I can close the sidebar for second global styles. Then we do need to important us from styled components. Of course. Then once we have the set up, why don't we have the new variable by the name of Global's? Now, this will be equal to obviously the function that we just got to create global styles than we do need to have the template literal or tag temple liberals. And last but not least, we would want to export it. So we're going to say here, export. Ah, default. Millo most So now this way. We don't need to really care about what is happening on just to kick things off on so we can see that everything is working. Why don't we knew body color right now? Obviously, we're gonna change this later on, but I just want you to see that everything is properly imported and exported, and in this case, I will gonna head over back to app Js So we have our homepage and since we're not gonna have any more pages, we can just have a simple import. Let's call this global styles Since we have it as a default export, we really don't care. Anyway, we can name it how we would like And now we need to head over to a components. Of course on then, within the components there is a global folder and within the global folder we have our global styles And if we remember the proper way how we could work with global stars within the style components is just to render this component on top of your whole react tree. So technically you could even head over to inject. Js would say if your app Js is really massive on, you don't want oclock it even more, you could just at over two index Js and do the same thing. So I'm gonna do it still within the FGs because our objects will not gonna be clocked up on I'm just gonna get my global stuff now. What do you see right now? Well, at the moment again, it is complaining that created Globalstar's is not exported from styled components. Okay, so let me head over. Bark on. I think the naming was a little bit incorrect. So this is not global styles its style, So let's save that. And now, yes, everything is working. We do have our global stops. So why don't we start actually working on them? Because at the moment, the only thing is the body that has the color of red and what I would like to do right now is, in fact, closed the objects. Because, like I said, the only thing we needed here is Galab. Global styles on home page. That's it. Everything else will be rendered within the actual homepage, so we're not going to use any more objects were done. Now, we do need to obviously add more styling within the global starts. On first and foremost four, probably most of the projects, you would want some funds. So just to show that honestly, we can do that also, within the global styles. As we're working with cell components, why don't we, right? Google fonts within the Google Farms. We're gonna be looking for the funds and let's go with Lehto here. So this is gonna be my first selection on. I will gonna customize this a little bit, You say? Not just regular role. So gonna go with bold then? You know what? I was gonna minimize this. And why don't we take a look at the slant, so I don't need the later here. He's gonna delete this on. Why don't we take a look together for some kind off? Ah, slanted flaunt. Let's say I will go with this one. So I'm gonna select this one. I will not going to customize this anymore. I think this is more than enough. So we have both of them. So we have later and we have the other one, and I will just gonna go with import. So where we can obviously add this to our indexation email. But we can also importance. So why don't we do the import way? So let me select net. I real gonna head over back to my global's And within the global is what we would want. First and foremost, we would want to importance. Of course. Now we have imported the fonts weaken. Save that, Mr. Nothing is gonna change at the moment because we would still need to set up what would be the fonts in the body on the way we can do. That is obviously one of the ways that we can do. That is just by setting fund family on, we're gonna head over here, and we're gonna grew up this later. Now, don't close this window right now, because in the next video we, in fact going to start working on our helper functions. So this is gonna be very useful if in fact, you're just gonna be able to copy and paste. At the moment. I'm just showing you how we would technically hard court this. But like I said, next video we're going to start taking a good use of the fact that since we're using style components, we in fact can have multiple helper functions. For the moment, let's say that I notice obviously we're having this type of form now just to check that for sure, we do this kind of fund with me also copy and paste the 2nd 1 the actual slanted one and let's see what that everything is working. And sure enough, the Fondren are slanted. So I do know that both of them have bean imported successfully. Ondas Faras Global's styles go Usually what you do is you get over margins, padding, sandbox sizing. You could also use some kind of reset, But I'm just gonna go with the very basic ones of margin zero batting zero. So there's no default margins of patterns from the actual browser. And then I'm gonna go with box sizing a border bucks. And the reason why I'm doing that is because in this case, if I'm gonna be adding the padding, my actual element will not going to grow. In fact, the padding will be applied to the inner off that particular element. Otherwise, you feel create an element, let's say 200 by 200 pixels. And if you don't have the boxes in border box, then if you're gonna add some kind of patting 20 then this will be applied to the actual element and will in fact be bigger. So it will not anymore be 200 by 200. That would be the simple explanation. Then, as far as bodies concerned, what we would want Well, we could go with simple foreign size. I'm going to say let's 100% just in case. I wouldn't want to change that later. Then why don't we set up more hard coded styles that we were gonna fix in next video? Now, first and foremost, we're gonna set up the color. So what would be the color off de text? And in my case, I will gonna go with the black one. So hashtag 2 to 2, then background, why don't we do for the whole project off hashtag f f f which will mean obviously, that the background will be white. By the way, If you don't believe me that this is happening, why don't we do a little? And then obviously our whole project will be a little, but we do want it white. And you know what? I think I could set up some global styles as faras the heading ones on legislating ones. Actually, headings on paragraphs are concerned. And here's my explanation off why I'm doing this. Even though we're using, of course, tell components that doesn't mean that you need to avoid global starts. Now. Global stars are helpful not say that I would want all my headings to be displayed certain way Now there's no reason for me to keep creating styled components and then keep adding the same stops. Now you could technically set up the styled component, let's say, just for one heading. But that's also a bit of a lower kill, in my opinion. So instead of what I like to do, is four headings, four paragraphs, um, some kind of things that are usually all throughout the document. You just set up the global styles. Now let's say for my heading ones I would want formed size. I would go, let's say, with a three R three, not our Diem's. But we're gonna go with three m's, then line height will gonna do. I don't know. Ah, we could do 1.2 1.2 on. Why don't we had also write it with a margin in the bottom margin? Bottom on that one would be had on 0.5 years. 0.5 e. Ems. Now let's say that and let's see what I'm gonna have. So this will be my heading one on. What I would like to do right now is in fact, copy and paste that, because how would want to set up the same things or same properties a little bit different values for rest of the headings as well as the paragraph again, this will make our life easier because we're not going to care much about the heading ones or headings in general that are being displayed. So we're doing this once on, then we're done. So it's competent President. So 12345 This should do it. This should be six. And then we will also going to set up the paragraph. So four heading one. What we would want. Well, we were going to change the font size from three rd EMS. So let's say to a line, Height will be none. So we can just get out of line height altogether. Margin bottom. Why don't we say, like, 0.75? Okay, that will be My global starts were heading to then as far as hitting threes concerned, I could deal 1.5 gm's so it's deleted them. Not three and 1.5 line height. Why don't we do one and margin bottom will be also one and then heading four. Starting from heading four, I would want also add font weight bold so margin bottom alot uh, that is necessary. However, we have also found weight and we're gonna send this equal too bold. Don't let me copy and praise that because I would want to re used for rest of them as well . So far, we bowled front Wakeboard. Let's say that now. Obviously, in this case, this is adding to heading one, but we're going to change that. As for a society is concerned for heading four, I was gonna say 1.2 e ems on then line height will be again something like this. So we have 1.2. I think we can just stick with 1.2 in heading four and then margin bottom would be, I don't know, 1.25 1.25 then we have five and 65 Onda six. And I know that these global stars are a little bit annoying in the beginning, but we just need to have them because this will going to serve the purpose at the end. Okay, so we have heading five, adding five will be wanting EMS. Ah, what else? We're gonna have funds weight, bald. Ah, line height. We can just get rid of it maybe and say no wine hunt whatsoever. Um, large in bottom, I don't know what can go. Maybe with 1.5 1.5. Fun way Bold. Now heading six. We're only gonna have phone size off one A EMS and the and front weight Bold. I could just get rid of all these guys. I want e ems. Like so on. Last thing that I would want to add is the paragraph. So I'm gonna say line height for the paragraph will be 1.5 1.5. Then on we can just go with simple 1.5, and then what else would also would want? Well, why don't we also set up some margins? Se margin for the progress would be zero top zero. Right on, then was gonna go with 1.5 and, like so on. We're gonna save that on you know what? Since I would want only the bottom ones going like this. Okay, so these are gonna be my global style. So starting from next video, we're gonna start exploring why we would want to change this in a sense of why would want these values to be dynamic 39. 7 styled hotel helper functions: excellent. We have our global styles, and everything is hard to goto extremely nicely. However, if we're looking at are finished project on at the moment, we still have defense so they can stay. But if I'm gonna look a finished project, I will gonna notice that bunch of things are repeating. So let's say I will going to use fonts for, Let's say, one kind of heading. And then for different kind of title, I would want to use a different fund the same we're gonna go for, let's say, the main color primary color. Then I have the main white that I'm gonna be using. And there's also going to be, let's say, gray one, the letter spacing, and I could go on and on and on and on. Essentially, what I'm saying is that there's gonna be a bunch of CSS properties this first and foremost will gonna have similar values or where I would want to change those values. Now there's multiple ways that we can do that in regular area. So let's say even though I'm still within, create global styles, I could set up the CSS variables, by the way, in most cases, again, you set up the global stars within the abscesses and this is where you would set up the global variables as faras CSS variables are concerned. How are we? Could still, technically, due to CSS variables within our global stuff. Now, we're not gonna do that. We were going to use our helper functions, But just to give you an idea, let's say that we're gonna be targeting Wrote on for the road. What I would want is to set up CSS variable Now this syntax four to see if there's variable would be like So where I have the name what's called this color and then I'm going to give some kind of value. In my case, I'm just gonna give it a read. And if I want to use that value, the syntax would be following. So I need to write var and then the variable name. So let's say in my case, I'm gonna go with color, and sure enough, what happens? My text right now is red. Now the reason for that because I'm using the variable, so this would be regardless of whether you're using the style components or not. This is one way how you can do it. But since we are using the style components, we have even more options because not only weaken set up here variables on please understand that these are tagged him religions and we already covered how we can access these variables. And that was with the dollar sign and then a curly braces. So not only we could set up the colors that were using within this create global style, but also all throughout our document, because we were going to use start components for the styling, we will be able to access the functions as well. Now, this will obviously gonna make a little bit more sense as we're going to be progressing with our helper functions. Because of the moment, we're just gonna build two of them and I keep calling them functions. Some of them are will be just a variable. But since there's gonna be a lot of them who are beginning functions, that's why I'm calling them helper functions now why? We would want to use the helper functions because not only were gonna be able to access the variable like we just did within the road, we will be able to control the variable, so we will be able to control our see assess, depending on what kind of changes world one and again, this will gonna make a little bit more sense as we're start doing it. But I just want to give you a general idea. So instead of hard coding here in the color hashtag to to to my ground hashtag ff I'm gonna head over to the styles On first and foremost, I'm going to create a variable, and I'm going to say export. So I'm going to right away export this and this will be named exporting. By the way, all of them will be named exports. And I'm going to say All right, so there will be a variable. The name will be set color. Now, this variable will be, in fact, an object on on that object. I'm just gonna create key value pairs. So the properties on their values, so the 1st 1 will be primary color. Now, this primary color is the color that you'll see all over the document. So there's Brown Gold one. And I'm just going to say that since this is a job script, we need to be careful. So it's like this needs to be a string hashtag a f. Then we have nine A on let's say 70. So that's gonna be my primary core. And why don't we create a main white color main white and then that will be against string hashtag f f f That will be my white one. Then we can go with Main Black which will be again string hash tag to To to And then last but not least, we're gonna go with or you know what, Not last there's gonna be two of them. Main gray. No, that main grave will be again. String hashtag e c e c e c And now this would be a last one, but actually you can add as many colors as you would like within this object. Let's call this light gray and again String hashtag have seven of seven on F seven, so these would be the colors. Now we can do the same thing with the funds, right? So it's a export, Const On set and not colors not color, but set fund Now for the set fund, I will gonna have again key value pairs. I'm gonna call one to be main fund on Florida's when I'm going to use the phone family off later. So let me grab all this exhaust. I'm gonna cut it out here. I'm gonna head over back to the styles. I we're gonna sell Chris. So there were gonna be a string on within the string. We're gonna have this phone family on. Let's do the same thing with slanted. So there are gonna be two properties, one main, the other ones landed and then depending whether we want to use the main Maurice landed one . That's where we're gonna be making our changes. So let's cut this out as well. I'm gonna head over back to styles. And no, that's not what I wanted to do. Copy and paste that this will be the slighted. And since both of them are being exported right now, when we can do is head over to the global stops and let's start importing them. Since they are named exports, we obviously need to import them as well as named exports. On the way we access them, we're gonna right. Okay, so I'm looking for set color and set fun. So both of the variables that I have. And now I need to look for that styles. Now, where's the styles located? Well, we are in the global styles, so we do need to leave that folder on. Then we need to look for nostalgia areas. And now, instead of setting this to hashtag to to To when I'm going to say is all right. So since I can access the variable again, this is very, very important notice Tag temple a literal so I can access the variable and I can say OK, so I do have my variable by the name of set color and there is a property off. What? Well, I had a primary color, but I'm gonna be looking for a main black. This will be my car on the same thing I could do with the background. I can say OK, so I'm gonna be looking for set color Now this will be main and white And last but not least, what would be different? So fonds family and you know it's for fun. Family. We can skip a little bit because within the styles noticed that I'm grabbing the whole thing. Now, this is really up to you you can just get the value if you want. Or you can set up the whole farm phone family, not just the sure that this is gonna work. Why don't we start with this length and one to set fund? Or you know what we do already have a slanted We might as well go with the main one. And now let's see whether this is gonna work. And sure enough, Yeah, my phone right now is in fact not slanted. The reason for that is, of course, because I'm getting this main funds for my stuff. And again, the reason why you would want to do that because this will allow you to keep all your styles, your helper functions within one file, and then you could move obviously to just five to a different project. Now the same thing we're gonna happen with these global's because the global's will be the component that we are reusing all throughout the document. So let's say this component, the header one that has this massive image, the hero one, we can obviously we use it in a different page. We can reuse it in different components. We can reuse it in different sections. We can you re use it in a different project. I could go on and on or not Now the whole idea is very simple. So you would have this styles Js you could move into different project. You can just change the properties that you're gonna have here for the different project or property values. Let's be more clear and then your whole project will be effective. So this way I will be accessing all throughout the project this color, this color discolor disco. And then if I want to change something, I just need to change that in one place. That is the whole idea. You want to change the phones, you can change it in one place. You don't need to jump all throughout your project and look for whenever you use that instance off the font with that particular let's save how you All right, that is the whole point off why we're doing this styles Js and why we would start with Globalstar's where we getting these styles. Knaus forest forms exclusively are involved. We do need to remember that they do need to be imported. So just because you're setting them up within your style doesn't mean that they were gonna work. You do need to make sure that they're important. But this will do it for the global starts. We will not use it. There's plenty of work that we're gonna still do within the styles just because this is where we're gonna be setting up our functions. So we're not done by any stretch. But this is a very, very strong start. Then we have our home where we have at the moment the header which obviously we will use for importing rest of the sections that we're gonna be creating within homepage. But why don't we take a look at where we would get the idea off using these helper functions? 40. 8 styled hotel polished js: this idea about helper functions is not unique. Or obviously, I didn't come up with it. Now, as you're looking at styled components, there's many additional libraries that you can work with and one of them is polished. Now, if we're gonna head over to get up, where is the report? And we're gonna scroll down a bit and then we're gonna head over to the Polish documentation. What? You'll notice that they will gonna have bunch of these mixing or I like to just call them helper functions. We're basically you import to our obviously installed this library and then you can use them. So let's say four to clear fix, right? So you would just enter whatever values you're gonna want for clear fix. And what this is gonna do is this is gonna add these properties right away. So let's say clear both content display and so on and so forth. And as you can see, they have bunch of them know. Obviously, in our case, we're not going to be creating as many functions. There is no necessity for us, but we're gonna create out of no, 10 of them whatever we're using a lot so let's say background images, the way they works, we get that function, of course. And then we passed in the properties on whatever values who were gonna be getting. So let's say background images, then we're passing in what kind of image is gonna be displayed? And then also we're gonna pass the linear creating, so that would be the idea. Now we're gonna be creating our own functions because I like to make them more custom on. In some cases, I think they take it a little bit over the top Where have a bunch of things that we don't need? However, this would be the general idea. And if you don't like the helper functions that I'm setting up, of course you can come up with your own or you can honestly install this library on, go through their documentation. So you know what is each and every function doing, Or maybe not each and every function. Just find a function that you're looking for or a mixing, and then just use this option instead 41. 9 styled hotel hero component: Now that we know where we got an idea for helper functions or the mix ins, why don't we finally start working on our first component, meaning the component that will gonna be rendered nicely, just like in our final project. On that, we're gonna be this massive hero where at this moment will just gonna be worrying about the image so the banner will be separate. So we're gonna have a massive hero component with the background image, and then we're gonna set up this banner within that component. Okay, so let's start working. Will gonna keep the styles still as a tab here because in next, really gonna set up some functions for hero. But I would like to head over right now to the global's within the global's. We're going to get our hero. I'm gonna call this here O. J s. Now, in this case, we don't need to get any kind of react component. This will be purely any styled component I'm gonna say import styled from, And then we're gonna be looking for styled components. Now let's name this hero so hero, and then this will be obviously equal to styled. And then I would say that we were going to use a header. So had her tag. And then within the style, components with intact intellectuals, we're gonna have their styles. But before we do that, why don't we export it? Explore default. I'm going to call this hero and let's imported where? Well, we will gonna head over to the home where we have the header because, like I said, this header will be rendered within our home page. So this is we're gonna have our whole set up. So if you think about the header header will contain both hero on this massive banner and then there's gonna be another section that will entail this about section and so on and so forth. Now that would be the difference again. But since the hero, I maybe would want to use it somewhere else. I don't want to create as one component where I have the image as well as, let's say, but maybe I would want to play something else within that hero. That's the reason why we're creating this as a separate component. So let's write import within the header and call this of course hero from And now let's look for the global's on then, within this DIV, why don't we do it like this? Then we're gonna create that this is gonna be hero. And then, obviously, later on, we're gonna set up also the matter bought for the time being. This should do it. Now I can, In this case, this is complaining that would in the header Js can resolve Global's. Now, of course, I can't resolve it because for some reason I keep on skipping, adding the actual file them I keep assuming that I'm just gonna get that. Okay, so at the moment this is complaining that this is not working a hero because I haven't saved that. So let's say that. And now we have a totally blank screen. So why don't we change that? And let's just start very simply by mean height 100 view. It's on just to let you know, in this video, we'll just gonna set up a regular CSS. And then in the next video, we're gonna work on our helper functions because I think in this case, this will allow you to see why you would want to use them in the first place. So why don't we go very simply by background and let's say red just so you can see that something will be rendered on a screen on Once I said it, obviously, this is gonna be the massive hero. The way we're gonna work with the hero is very simple. So what I'm saying here with this property I'm saying, regardless of whatever is going to be within this hero component, I would want the height to be 100 viewers. Now, obviously, this is C assess. This is nothing to do with stealth components. So for any kind of HTML element, if you're gonna have this property, this is just gonna make sure that this component will always gonna be 100 viewers. So as you can see, the moment I start scrolling noticed, this is where the rest of the home page starts. That's the whole purpose for this. And we're using view height values here because this reflects the percentage of this of the screen. So for the height, we have you height and then let's say for the view with, we would have a view with like so, So if I would want some kind of men with, I could use something like this. Now, you don't need to use this with just with men. You can obviously use it just with height or just with with. It's totally up to you. But I like to use these view with or view heights because that reflects the actual screen. So that way, I don't need to think about it. Okay, Pixels. How much is big souls? How much is this? So this way. I know. Okay, this is 100% height off the screen. That's it. That's the only thing we need to worry about. Now, we also have the bag room that at the moment this is red. That's probably is not what we would want. And since this is a styled component, there is multiple ways how we can do that. So let's start with a very, very basic one. So where we have the images right now, within images, we have home BCG. So what I could do over here, as I can say, OK, so important. Now I'm gonna import that image. I can name this whatever I would like. So home. I am G prom. And now let's keep looking for our images folder than within the not three dots than within the images folder we're gonna set up Ah, home. I'll let me have forward slash home BCG j peg lie. So So now we have the image And why don't we create first of all your URL on Let's say that are so This is the property that we need to use. So for the background instead of color, we're going to use home image and one let's see whether everything works. Okay, So I saved that. At the moment, nothing is being displayed, which is weird. And the reason for that is because obviously, since I am within attack temper literal, I do need to use the variable. Of course. Right. So this is the first lesson that we need to again. Remember that whatever we want, something dynamic this we're gonna have to be included like So now let's say that. And sure enough, what we're having is a massive image. So this is already a awesome start. Now there's multiple things that I would like to add, but first and foremost, what I would want for this hero component is every time I'm rendering this component, in fact, I would want to set up. What kind of image is being rendered? Correct. So that way this is again dynamic. So I'm not setting this up as just Okay, So this isn't gonna be my component, and this is the only image that will gonna be rendered. So what we could do instead is weaken obviously use, you guessed it props. So what I can do here is, instead of Gehring, simple image can say I'm still gonna be accessing off course the variable. But I'm gonna be accessing the variable within the props. I'm gonna say, Get me props and then I'm going to say I am G. However, I'm also would want to take care of the simple fact that if that image is not being added, there is some default one. So that's the reason why import this home image. So I couldn't say like, this room image. So if there is no property on that component on the hero component, then we're gonna be rendering this image. Now let's head over back to the header on for the hero What I would want in this case just to show that this obviously works important. Ah, let's go for about I m g. This will be again in the images. Someone say images folder, then within the images we have about BCG Jay Pek And since we have more prop right now set up so I am G prop, we can say OK, so image for this hero component will be equal to about I am dream. Know what? Say that on Let's see what's gonna happen. So at the moment, nothing is being rendered because I haven't saved it, of course. But as you can see, right now, I have two different images. So I do have my about one. Of course, if I'm passing this, but if I'm gonna head over back to the header on, let's say get her of it like someone saved that now we're going to get our homepage. So we have our logic where if we're not gonna pass any kind of image, at least there will gonna be some default one. So that's the whole thinking behind this. Now, in my case, I will gonna pass here the image I would say image on. We can just go with at the moment about we're gonna change it later on about image And why don't we add rest of the stuff that we would want for this hero component? Basically, rest of the CSS on bunch of these things are in fact, about the images because, as you can see, right now, we have two images side by side. Then we have some more a petition. So what I would want right now is place the image in the center, make sure that it covers everything and again, this is just pure CSS. And I'm not going to spend tons of time other than these are just properties that were adding for background image. And then let's do it fixed and no repeat. Now, fixed is just gonna make sure that we have that parallax effect. If we're gonna go to the finished project, noticed how the text is moving faster on the images, in fact setting fixing it up. That's what were added and no repetition obviously made sure that we're not repeating that image. So now we have our awesome background image. Now there's a few more properties that I would want as far as this banner is concerned. So forties hero components what I would want all the Children were gonna be passed within this component, I would want to place them within the center on the way we can do that is simply by a flex box. So can say display flex line items. Items on let's a center on. So this would actually align its vertical in center, justify content center. That would be, in fact, horizontally. Now, at the moment, we don't see anything. But if I'm gonna head over back to the header on, let's say within this hero I'm gonna pass some kind of heading one. So let's get our hero. First of all, on debts, add some kind of heading one just so it's a little bit bigger on Let's say hello world. Now again, we obviously we're gonna change that in a second, but he's noticed that this will be in a center. That's the whole idea. So whatever Children I'm gonna be passing within this hero component will be in center. And now we have a awesome hasam dynamic component, which again we can reuse all throughout our application. At the moment, we're just displaying this within header. But since this is not tied to anything, this is just sitting in the global's. He had a different page. Different section, different project. Whatever use it. I mean, nothing is stopping you Now there's a few things that are missing here that I think would make this component much better. But at least we have the bare bones for hero components that 42. 10 styled hotel setFlex setBackground: as we're looking at our hero component, everything is awesome. But what said that we would want to add little but more values within the background so I could say linear Gray didn't just so have some morally Grady. And now we do know that we do need to out here this comma. Otherwise this obviously we're gonna break. And then we would need to pass here to colors. So let's say I'm gonna go with RGB A. That's the one I usually prefer because that gives me to have the capacity. We do need to have two colors here. So the top one on the bottom one since obviously we haven't set up the direction here and I'm just gonna go with I don't know, black one. So let's go with zero 00 on, let's say 0.5 and then also 00 0.5. Okay, those will be our two colors. On what? You'll notice that right now we have a linear grade on. Basically, this is an overlay that we're having. You can probably see it clear as I'm looking at a bigger browser window, but there's also something else that I'm noticing. There's a bunch of properties here on a lot of cases I would want through used. There's a lot of cases where I want to play something in the center with the flex box, okay? And then each and every time I need to write split flex line item center, just for content center. And then again, next time, next time, next time or the same would go for the background, you know? Yeah, you We could use obviously this hero component. That was the whole purpose way we did it. But let's say I would just want to use this property somewhere else. Where again? I would want to get some kind of image that I'm let's say passing from the props or something like that. So I would want to instead create some kind of helper functions. And that way this will going to speed up my work for, So why don't we go ahead and why don't we start working on it on this case? I will gonna head over to the styles and write off duty. Said fonts. Why don't we start working with the Flex marks? So I'm gonna create a function Const I'm gonna call this set flecks on. Now this function will be funky. Now, the reason why I'm saying this will be funky because we'll pass in the object now within the object we're gonna pass whether that's X direction or why direction on going to say, OK, so we would want to have some kind of return since obviously this will be a function. And now what we would want to return. Well, I would want to return all these three properties that I have here and values will be changing depending on what I'm passing there. So how this is gonna work? Well, im gonna say OK, so return and then let's right. Obviously we're gonna be returning template literal because I want to access the variables . I will going to say that this always will gonna be display flex. Then what else I would want? Well, I could add a line items that is the property. And now we're gonna said this equal to a variable on this variable will be why, since a line items is responsible for vertical placement as well as I can access here the X so that I would be justify content some say justify content and we're gonna go with ex soaking. Let me access to variable I will gonna say X And now it's gonna happen is I can get dysfunction And instead of again typing all three of them, I can say something like this where instead of display Flex, I will going to import it se import important. Now I'm gonna call the set said Flex Now from and again we need to look for our styles. Now let's see what this is gonna be. This is not gonna be the global's. This will be in fact, in the styles. Now we did our import. I will going to get rid of all three of them on. Let's just say that we were gonna be passing here in a variable. Of course, we do need to access it. So set flex. And now let's decide what we would want to pass in. So, like I said, this was the case where we just placed its centre and centre. So why don't we test it out? So center on center, On the moment I saved, nothing should break on. If nothing breaks, that means that everything is working. However, in this case, As you can see, something is not working because half center on center. So let's see what we're gonna be within the set. Flex. Now, I do have disconnect a line items. And of course, I have an issue here because this is not equal. There should be a colon. Now, let's just that out one more time. It is still not working. Okay, So justify content. That should be one A line. Items should be the 2nd 1 And then yes, So we have obviously X and y. Now the reason if we're passing here, the object, we obviously need to do the same thing as we're running the function. So the lesson here is if there's an object we also need to pass the object here on the way this is gonna work is we need to set some kind of values. So the 1st 1 will gonna be X. Of course, on the 2nd 1 will be. Why now, the way we're going to do that, we're gonna say OK, so 40 x, I'm gonna place it in the center on. This needs to be a strength on the same thing we're going to do with why say, Why will be in the center the moment we say that this time now everything is working because the hello world is in fact in the center. But let's say I would want X to be in the beginning. So what I can say not flex center. But we can say flex start, that's it in our text should be all the way and left inside. You want it end? Can do end unsavory here. Now you can see how much more flexible this is, then instead, off again rewriting all the properties. Now there's also a upgraded version to this because at the moment I'm passing in the X on that I'm passing in the UAE. But what do you think is gonna happen if I'm not gonna pass anything within this function? So let's go back to set flux on. Let's say that I forgot who had anything here. So let's save that. And of course, we have a big fat ever because we are looking for that object. Now when we conduced here is work with a default props or default parameters that you have in jobs. So how this is gonna work? Well, I'm going to say OK, so I'm expecting the object. The object will gonna have key value pairs. 1st 1 will be ex. The 2nd 1 will be why? But if I don't pass anything in, just say that this will be just an empty object. Right? So this should already fix our first issue. Now let's save styles now. We don't have there, but nothing is being rendered. Now, we can also do the same thing with the next and why. So let's say in most cases, what I would want is I would want to always place it in the center. I'm gonna say X four center on y for center again. These are just default parameters that you can have within the job script to center center . And now what happens? Well, now the function is just working because these are my default mints. Now, if I'm gonna be overriding this, I can just say OK, you know, for why I would always also would want a flex start. So you say Why, Lex, start on. Check this one out. Now the text will gonna be on top. Okay, That's the whole point. Why? We would want to work with these helper functions again in general. Yeah, You should come up with some kind of base value. Meaning in most cases set flex To tell you honestly, you will be using something like this Work center in center center wise interacts and you just don't want to deal with display Flex line items center Justify content center. Just get this function and just set it up. Just say OK still set me flex center and that's it. And I don't want to worry about anything else Moment. We say that Yep, our content will be in the center Now you can probably guess that we can do bunch of things similar right here with the background because it's also linear, Grady, in that I'm repeating than the color than the props, then the default one. There has to be an easier way where if I want to re use this for the bag room in most cases , bunch of things you're going to be retyping because you're gonna be using the same properties with same power so we can do is right after deflects. Why don't we set up? Said background export Uh const set Bagram And now we should be already experts with a default parameters that we can pass. So we're gonna charge a little bit ahead in this days. So I'm gonna say, OK, so this will be obviously set background. Now what? I'm going to return? Well, first and foremost, why don't we head over back here within hero and let just grab Aled this? Since this will be a return Now, the way we were going to set it up, this obviously will gonna be more dynamic. But at this point, why don't we just set up? Okay, so let me cut this out. Now, we could also get her of the background. And you know what? Actually, copy and paste it incorrectly. Let's grab the whole background here. So let's get this out. Then we're gonna head over back styles, and first and foremost legis return again. This will be within temple, literally. All right, so now we have our background set up, and then you already guessed that that we were gonna pass some kind of variables here. Otherwise, this who is not gonna make sense now, the way this is gonna work is very simply so. I'm gonna say there's going to be do arguments that we're gonna be passing it first will be an image, and the 2nd 1 will be a color. Now, I also also, since I'm passing here this object I do need to use these default parameters for the object . Otherwise, again, there's gonna be a big fat there. So I'm gonna set up this default parameter right away. And I also would want to do the same thing Ford image and for the color, not for the image. I decided that I could just set up the some kind of image that I'm getting from online. So that way I don't need to get some default image for each and every project, so I can just say it excels. Look for some kind of pretty image that I would want. Let's say this one, but I think it's too dark. When we look for hotels in this case hotels. Let's find it where it is, some kind of default one something that we could always display. Let's say if the image is not being rendered. So let's say this one now, In this case, what I would want is image address on the way We're going to do that, I will gonna head over back, and I'm gonna set this image as a default value to that. Actually, you are l that I'm getting for that image. Okay, Understand? And then for the color, what I would want against some kind of default value. Let's go with RGB A and I'm just gonna come up with the black one with zero capacity or I'm sorry with full transparency. So 000 okay. And zero. Now, this pretty much is not gonna show up because this capacity value is zero. But at least now we have some default value. So if we're not a passage, this will be rendered Now, obviously, we do also need to set up the return because the moment this is not dynamic, we're setting up some kind of props here that don't make sense on We would want to fix that . Now, the way we're gonna fix that, this let's say first will be color. So I'm going to say I'm gonna be shooting for the color that I'm passing here. So the color that we're gonna be passed in the function that we're gonna be my first color on this will gonna be my second car, so I can say, OK, so these will be my two colors the next I need to deal with this girl and in this guy's this will not gonna be props. This, in fact, will be my image, the image that we're passing here. Okay, now let's say that this will be my set background again. We removed all the big stuff from the hero on. What we can do here is we can just use set flex more, not set flex a reset background. Now let's around that function. Let's say set background. This obviously will gonna be our function set background And let's just first test it out If we don't pass anything here If everything is gonna be working and sure enough, what do you see here? Well, I believe that is the same image, right? Same image that we already got. So that would work basically has our default one. So if we don't pass anything here as long as actually you're connected to Internet, you would get that image now alternate live early. Of course, you can head over here import image and then passed the image within here, Let's say or write. So you would have either I'm getting the image past as a argument in the function. Or remember like we did before, where were just saying Okay, so for the hero there was a or operator, and then we're entering that image now. Obviously, we would want to have a better set up where we can still pass it as a prop, because at the moment we're just rendering them basic one on the way we're gonna do that here is gonna be very, very simple. So what we're gonna say, OK, so we were gonna be getting the props again. Some say props on down this case, I will gonna run my set background said background. And since I know that the background is gonna be looking 40 image argument, I'm gonna set my props image like so on. If I'm not gonna pass anything here, then obviously I'm just going to render my set background. Otherwise, that will gonna be getting this image. Now let's test it out. How this is gonna work whether everything is gonna be rendered. And once I had my semicolons, Of course, everything is working fine now, so That was the buck that we had. I just didn't have the semicolon. Now this would be a image. Correct. Now, this should obviously be the image that we had already with about So why don't we cut this out from the hero? So we're gonna get her of the home One we don't need it anymore. As default we already had in the styles and back in the header. Why don't we get our home image? Because that is the one that I wanted actually to render. So let me pass home. I'm energy. As you can see, this will be the image that I'm using. If again, I'm not passing anything here. Notice now I'm getting my default one now. Obviously, Dad was the set up. And also, let's test it out the color. Just to show you that this is gonna be working now, anarchist, we're not gonna be passing this color. But this is something you will do often if you're using with backgrounds. So we might as well set up that color there. Now the other prop waas color name Correct. And then let's just passing rgb a onda What color I would want. I don't know what can say again. 0.5 on. Let's test it out now so you can see that I'm having my linear grading now. That would be the set up for both of them for the second background as well as for the flex . That's the way how we can actually create functions. And that way, once we have created these functions all throughout this project. Next project different sections, different pages again. You can use them, and you don't need to go back again to riding properties and values, properties and values. You have your functions. You should eventually obviously remember what are your passing? Or you can always double check. You can say OK, so said flex ahead X. Why, okay, then I had said background again. I did have a default one. But these are the properties and values that I was actually affecting by that, and overall, it will going to speed up your work for with a style component 43. 11 styled hotel banner component basics: awesome. We have our header component. We have also our hero component as well as we did. Sit up. What? 1234 helper functions people. Awesome. Now our next challenge will be quite a big one on. I can close the pixels right now because we were gonna be dealing with this bad boy with a banner. And as you can see, there's multiple things in a banner as well as the animation. So this will be quite lengthy. So don't get this courage. We're also gonna check it out how we can export a bit differently if we have styled components and you'll see in a second what I mean by that. All right, Now let's head over back to our document. Of course, this is going to be are beginning and then we're gonna head over to our folder. The folder name will be Global's in this case, because again, I'm gonna plans that batter in the global's because let's say I would want to re use it somewhere in my document or other project. I'm going to say new file banner Js. Now this one will be a react component. So again, I'm going to use my snippets library, and I'm going to say that I would want a new functional component on you Guessed it. I will gonna call this batter. I would want to right away import the CSS helper function from styles, components as well as the key frames. Because remember when we talked about the animations we needed to use the key frames. And as you can see, we will going to use a little bit of animation. So why don't we right away, important from And also we obviously need styled, by the way, anyway, So styled CSS on. Then let's say key frames as well key frames. This will be my important out. This will obviously be from start components. Then what else I would want? Well, I would want also to have the set color my function as well as we're gonna set up a few other functions later on. So why don't we write the import now? At the moment, like I said, we're going to start very simply by sect color on. Then this will be obviously from our styles. So it's navigate there now, not global's, but in fact, from the styles this will be a said color on first and foremost. Why don't we check it out? What would be the Are there syntax how we can export its because of the moment we know already. Okay, so we can have the react component on We are sleek and sit up here. He styled Capone. So let's say we have a band on within the banner. We will gonna be passing some kind of title and the reason why we would want to set up this is a problem because we were want to change it Let's say on the home page we're gonna pass Welcome to the beach, Walk Resort And then on the about page about us and so on and so forth. So what I'm gonna say is I'm gonna right away the structure of the title that I'm gonna be passing within this actual component on. Then what? Well, we do know that I can use like a const. Benner rapper will be equal to style on. Let's say we're going to call this div, meaning we're going to use the HTML element of Dave. And then instead of returning this Div, I could say then a rapper, of course, I would need to also set up the closing tag. Been a rapper and then within the band rapper we can have the hitting one like so, um, I'm not creating a tag. So it's a heading one on within this heading one, we're gonna have our title, so its right title on everything is working awesome. We could maybe also maybe add right away color, right? Okay. At the moment, nothing is being rendered. But if we're gonna head over back to the header, remember, this is where we got our hero on. Instead, we're gonna say import banner from And now again, we need to look in the global's. So we need to leave the folder and within the global's, we should have the banner Js and instead off getting one We were gonna be rendering banner and then for the title That's a hello world. All right, so it's closed that on. Let's see what's gonna happen. And we should have the hello world, which is red because obviously we are rendering right now. The banner. However, there is a difference in tax that we can also use. So what's happening here? Remember when we were extending the component instead of passing the div, we did something like this where we said Okay, so we're gonna grab some kind of styled component and we'll just gonna pass it here and we're gonna change them properties Now what we can do the same way as we're working with a react component also pass it within the Prentice's so I can say banner here and instead off exporting the banner, we will be exporting the banner rapper banner rapper And that way I can remove it. I can remove the styled component from the react component. So let's say you don't like this kind of syntax. You're like, OK, I'm creating one component that I'm creating Styled component. It's kind of annoying. Let's say you don't want to do that. What you can do is use styled, then passing the component that you would want to apply styles too, and then exported Styled component. However, you do need to be careful why I'm saying that. Well, person foremost, let me select both of them on just delete them and now gonna create a dip. Now, the moment I'm going to save it, the hello world will not gonna be having any kind of styles. Okay, we will going to be successfully passing title, but there's be no styles applied. Know the reason for that is because not only you need to get whatever props you would want to display here. You also need to have a proper off class name. So by the name of class name that you are being passing from the react component. So you do you need to come up with a name, Let's say class name and not some random name. This needs to be actually class name. Then you also set up here to prop by the name of class name Syria basically adding the class and then you're adding like so, No, I obviously didn't come up with this Intacs myself If we were gonna head over to a style components again, documentations noticed if we're gonna scroll a little bit up. This is where we looked at how we can extend styles. So we have our styled component, and then we just have a regular button. And if you want tomato button, we pass in the style component. And if we scroll a bit down, you will notice something interesting that you can style any components. And again the way you would do that is you will have your react component. Then you do need to pass this prop, then set up the problem by the name of class name. So these two obviously need to match, and then you can start like so. So instead of styled link, right, So we're passing styled and link. And by the way, later on, we're also gonna explore how we can shorten, even listen, tax. And again, I don't wanna skip ahead just to show you that this would be one type of syntax. And then obviously we'll gonna be sitting up later on a shorter one. Where were just using the fact that we're working with export default. All right, now let's figure out what else would want within this component. Since we now understand, weaken right away styled our react component. Well, we will have to pass a few more props within this component. So we start with the class name. We have the class name that's all done. Then we have a title now. Title will also have. Then also I would want a text. Then let's say we're gonna have some Children because what's gonna happen is later on. I would want to pass the button and again, I won't. Don't want to style this button within my better. I want to create a button because I would want to reuse that button later on all throughout my project. So that's the reason why we'll also gonna be rendering Children. So we have class name, text title, Children. And then also, why don't we do greeting? So these are going to be the props that will be passing it Now, why don't we, right away, set up everything that we're gonna be rendering? So there will gonna be a heading one within that heading, one will gonna have few things first and foremost. We're gonna have this greeting now. Greeting will be this Welcome to. And then we have the span with a name. Or let's say, in our case, that's will be titled. So let's at a spare an element span element, and we're gonna have to set up this title within the span. So it's camping face that that will be our heading one, and then right after it, we're gonna have a div with a class of info. So we're gonna set this one up and within this info will gonna pass or text like So this is the text that were passing in the text prop that will be in the paragraph. So can say text. And then right after that, we're gonna have our Children. So right after the paragraph will be whatever Children were be rendering the moment. Not gonna be a lot of them, but in general eventually, we obviously we're going to set that up. Now, In this case, I would want to head over back to my header because this is where that banner will be displayed. So let's say within the header, we do have our header. Now, I'm not going to use this. Hello, world. In fact, we're gonna change that. We're gonna start, Let's say with a greeting, I agree eating than for greeting. I would 11 Well, I would want welcome Teoh, then tied a little gonna be the name that it will be beach walk or resort. And last but not least, we have our text. So it's a text on here. I would just want to use some kind of Laura MIPs. Um so I could say I don't know, Laura. Um, hopefully this is gonna work. So why don't we go with, like, let's say 15. Um, that didn't work. Laura. Um, let's try it again on Yeah, I know. I have my text. So it's cut this out and we're gonna pass it within our text problem. So let's set this up on what we have will have. Welcome to beach Walk Resort on this house. There will be a text we will going to change bunch of CSS as we go. Of course, this is not going to be our final look, But for time being, we have our general set up for our banner Js component. 44. 12 styled hotel banner component basic css: so far, so good. We have the bare bones of our banner component and I think at this point we can start adding to see assess within our style component. Like I said before, there will be multiple functions helper function that we're gonna be creating. However again, why don't we do the simple way first, where we just add the CSS and see the reasoning of why we would want to come up with those helper functions in the first place? Let's start very simply by adding background now, By the way, if you would want to have some kind of color that would be transparent in your colors in style CSS you can obviously do that. In my case, I will just gonna heart coated. Just remember, you have access to the variable, of course, and you can add more properties with values. In my case, I will just gonna hard code is for this particular one where I'm going to say rgb a rgb a and I would want background 00 zero on Why don't we go with like, let's say, 0.7. This will be my background for my batter. Well, let me say that on. They should work at some point once I said it. And yes, I do have my background now. Next. Why don't we add text in the center text align center on, then. That's right. That's and there. And you have. Now the whole text will be in the center. And also, why don't we had a little bit of padding? So for the batting, I'm going to say I don't know. I would want 60 pixels at the bottom on 32 pixels left and right. And here I'm gonna add the comment where I'm going to say that eventually there will gonna be our helper function by the name offset room. So that way, it's gonna be easy for me to find it where I'm looking for. No, I also would want to have a letter spacing. So for the time being, I can say OK, letter spacing on what would be the letter spacing? I don't know. Go. Maybe with three pixels. Pass it in on. This should eventually honestly happen. So once we say with Yes, we do have our letter spacing, but here also, we're gonna have a set, a letter spacing function that we're gonna set up in the next video. All right, now, what else? Well, we would want probably a color, so I'm going to say for all of them we can use out there Variable Now set color on. I'm just gonna go with the main white one. I would say that on the whole text should be white. Okay, now, here we have a heading one. Remember that was being rendered were greeting as well as for the title on, since I can say Okay, so what I would want for it heading one. So text transform and will be, I don't know, capitalize on. Then let's see what's gonna happen also, why don't we do fond size again? At the moment, we're gonna ride a hard coded way with 48 pixels. But again, we're going to do the same thing like we did before, where I'm gonna say, OK, so eventually there will be a set room. So these are just placeholders where I know that I'm gonna be passing this function as well as for the color I would want Obviously my heading want to be the primary color. You can say color aan den. I don't know. We also need to use set color. It's the color. And then we're looking here For what? Well, we have our primary color. Correct. That was set up in our object once I saved that. Eventually, once we save noticed our whole heading one will be in this primary cause that's the cool thing where we can use this all throughout the document later on. You want to change this color, just change it in one place. And everywhere where you have used their primary color, that will be the change that you created. Okay, now, this will be a color. Now for the span. I would want to be main white. So since I can use the nesting within style component noticed, I have the heading one and I have the span. No need to create unnecessary classes. I can just say color and then I can say set colors, main white. And yep, that should do it at the moment. This obviously is not, said colors, though it is set color, and I would want to have a smaller with for my paragraph. So outside the heading one, I'm going to be selecting the paragraph. I'm going to say with will be, I don't know, 85% and then margin will be zero auto because I would want to always place it in the center . Okay, Now, this will be my with for my paragraph on what else is missing. Well, we could also maybe add media Query right, So we can say, OK, so we would want to have media query for different screen size. So it's a media. And remember that whenever we were working with South components men with and yes, I can hear hand that in next video we're obviously gonna be setting up the function that we already covered for key frames or for media query, but for time being, just let's write it this way. Okay. So mean with like so And we're gonna set this up to, let's say, 768 pixels. So starting from 7 68 I would want the with off the his magnificent banner to be, in fact, 70 view with, and I also would want to have a border. Now let's write that border once a border will be six pick cells solid on. Now let's go for the primary color. It's a color on not color set color said Color. What's dot primary color? I believe that was the proper value. And last but not least at the media query off minimum 768 pixels. I would also want to add a URL for the paragraph. So you say here paragraph and that will be with, ah, bit smaller. So 75% instead. And last but not least eventually we're gonna be adding these animations because if you notice for the finished project the moment I refresh now, this is just gonna take a while. But no, it is this animation. So eventually, after the query, just make sure you don't place it within the media query. Now you can place it before, but I'm gonna place it after because that would be a separate video. I will also gonna have, say, heading one and then just adhere animation because you'll see later on what's happening as well as 40 info. Now, where is my info? That is a div who is both of them with a Children and within this paragraph. Okay, so let's call this info on also gonna say so many may shut So let's say that let's see how this is gonna look on the bigger screen without any animations without any kind of helper functions. And as you can see, everything is being rendered nicely. It's not like CSS is not working or anything like that. But in next video, we're gonna cover how we can make this again more dynamic on a more better for our work for . 45. 13 styled banner component helper functions: All right, all right. I know you cannot wait. How to make the our CSS more dynamic. So before we head over to our styles, where obviously we're gonna do that, I will gonna add one more common because I forgot to do that here. So said border will be also another helper function that we're gonna use. So why don't we head over to a styles and see how we can create said room? Now, what would set ram do? Well, I'm passing here 60 pixels on. I'm honestly passing here. 32 pixels on. This is gonna be the case. Let's say you're getting these values from Is the or in general. You just want to set up your values in pixels. How are it's obviously a bit better if we do this in ram. So if we convert us to r e m values now, we can obviously do that by heart coating. I could calculate I could be like, ok, 60 pixels home, and he Ramses that so I can add it with the Rams. You can probably get some kind of tool that we're gonna give you an answer and so on and so forth or you can set up a function we can head over back to the styles on we can, right after said background say OK, so there were gonna be function. I'm gonna call this. Ah, South Rim set Haram on. In this case, I will gonna pass a variable so the argument will be number and the default one will be 16 . So I'm gonna say, by default, I'm gonna be passing here 16 pixels. Now, if we're gonna pass any kind of value, obviously that value will be rendered within the function where it will be used within a function. But if you're not gonna pass any kind of number, this will be 16. And what we would want to return. Well, I could say OK, so return. Then let's use a tag temple A literal Let's access the argument that's being passed in number. I will going to divide this by 16. So, like, so I'm going to say by 16. So since I'm trying to get more e m values, correct. So I we're gonna pass whatever value I have for the pixels. This will be divided by 16 on. We'll just gonna add that these will be our e m values. So that the same way, if we don't pass anything within this function than the default one will be 16. Couldn't divide this by 16 and we're gonna get one room. That's how it's gonna work. Now let's say that on back within the batter I'm gonna head over to the top. Let's say set Ram will be our function on instead of passing 60 pixels, I'm just gonna pass whatever values I have within the set room on. As you noticed, I right away, out of the rooms. So in this case, you don't need to pass here as a pixel. So let's say for 60 I could just say set, Ram, this will be 60 on. I purposely didn't set it up where I have to pass pixels, so I know that I'm passing here. The pixels that would be for time, bottom and left and right. This will be sacked around and then obviously working with a 32 pixels the moment we saved that, if are saying nothing breaks, I know that everything is working fine. You want to see actually this in action? I can Honestly, I'd like 300 on. This is what we see. We have a massive, massive banner because we added a big padding Top bottom. Right now, I'm gonna go back to my 60 pixels on. Now we have our 60 pixels. Now, let's find more places where we have said room. I already concede here for the font size. So I'm just gonna get a 48 pixels on and said instead, we're gonna use set room going to say, OK, so we're gonna pass 48 pixels and we're still going to get our size. All right, Now, let's say that and yet that should do it for set room. Next, we have a letter spacing. This is gonna be probably very straightforward, even more straightforward. So let's say Export, Const. Set set letter spacing, and we're going to set up some kind of base value. So I'm going to say, if I don't pass any kind of value within my function, this will be a default value by the value of two. So again, this will be two pixels eventually and what I would want to return. Well, I would want to return the whole property letter spacing. Then I'm going to use my number, of course SE number on if you want. You can obviously set up some kind of calculation for rooms. But I think for the letter spacing, we can get away with just simple pixels. Let's say that we're gonna head over back to the banner. We were gonna get that particular function set Letter spacing on. We will going to get her out of it right now. Here. The comment on why don't we, right away, access that function. So the function name was set letters basing on. Do we want to pass in anything or not? Well, why don't we pass? I don't know. Three pixels just so we can see how said that this is bigger than two, which would be the basic one. Now I can get rid of this. Let's say that on Let's add against a massive value just so we can see that it's working. Yes, it is. And we're gonna go back to our three pixels. After that. We have the border for the border. Obviously we have three values, so it's gonna be a little bit more in our helper function. So let's say export const On what and we said like this one would say Sit border and again we would want to pass the object in this case, since there's multiple properties that we would want effect. And again I'm going to use right away the default parameters. So I'm going to say I'm gonna pass with now. We're by default will be two pixels. Then I also would want to have property of style on what I'm saying here. I'm just repeating all the properties that we had for the border short, kind property. So with ah, style and obviously color. So let's say with two pixels style by default will be solid and last one color. Why don't we go first with the black one? That will gonna be our default one. And again. Since we're passing in the object, we also need to make sure that we're passing this default object. Otherwise, this will break if we're not entering any kind of property. And then in this case, we're going to return the whole thing. The property with the value and analysts say border. Uh, why don't we go with with that is our obviously argument did were passing in then we also have style style on last but not least, we have ourselves a good old color. I will save that. We will gonna head over back to the banner and we're gonna find where is our border. And of course, now we can redo it. Now I can say that we would want to change it a little bit. Let's say the name was said bore, but I do need to importance. Of course. All right. This isn't gonna work. Border. Then let's scroll over, um, Ford of time being. Let's not pass anything in on. Let's get out of the previous one as well. And then obviously we're gonna redo it. At the moment we have our border as a black to a pixel border. So we could might as well go ahead and have the proper values so anywhere throughout the document. If you want to reuse this sub or you can always do that, you can say OK, so for my border, I would want with of, let's say, six pixels, then color I would want I don't know, said colors again. The primary color set colors, primary color. Unless the state out what we're gonna have. Mom, I separate. It is complaining because I keep on using set colors. And even though this is in fact the color now this sets up with the boar. But we do have our media and in order to save ourselves a time. And since we already wrote it once in the editorial and if you didn't watch the tutorial and if you're confused about what we're gonna do with media, please head over back to tutorial because I don't want to repeat everything that we did. So I will gonna cheat a little bit where I'm gonna go with stealth components. And in fact, I'm going to use their media query function. Some say media Queary, let's find out where it is media templates on. I'm in fact going to reuse this, so I'm just gonna add a little bit different values. But I'm not going to ride this from the scratch because I don't see the point. We already did that throughout the tutorial. So I'm going to save this. Let's say that within these styles, and then the name here will be sizes. So I'm gonna leave that How are I'm going to add one more value and I'm going to say large , so that would be four very, very large screens on the breaking point would be 1200 pixels like so And I also would want to change the max with the men with someone says, starting from that type of screen size, I'm gonna leave the e EMS. I don't really care about that. And what I would like to obviously export is this media. So we need to an export export media now media will be exported. On the size will be tablet, so media dot tablet with safe sizes on. In this case, it says, Okay, so CSS is not defined now, this is the case where we do need to import the CSS again from styled components. So import, and then this will be in the curly braces from and we're looking for styled components. And now everything should work. Because remember, we were using the CSS helper function in this guy's on again. If you didn't follow tutorial, please check out the tutorial videos that I have on this and I'm gonna head over back to the banner in this case, find where I have my imports. I'm gonna add one more where I'm having the media. Let's scroll over and let's train this around a little bit. So we're gonna have to access the variable. Very well. Gonna be media and then starting from the tablet. And remember, the syntax was just setting up. Here are tag Templar rituals on. What I would want to do right now is grab everything that was within my media query. So it's cut this out. Let's get rid off our current media query. We don't need it. They should do it. Now, I still have something that I don't think is needed because this obviously will gonna be. Yeah, that's gonna be my media query. So have one extra. Okay, we have our media queries set up. Why don't we test it out? All right, so this is gonna look, and I can see already the border is working, so my media queer is also correct. But just to test it out more when we say 100 and then we're gonna see that, you know? Of course, the paragraph is no spending on a percent. So we know that our media queries working. So the last thing that we would want to deal with the banner is the animation 46. 14 banner animation: before we start typing away our cold for the animation, let's actually see what is happening. So the way I set up the animation is that the heading one is in fact moved 200%. Bottom has allows the opacity zero and then once the animation is complete of the heading one, we're gonna be all the way. I looked up with a opacity off. One on the opposite would be for this info, def. Basically, what I did is I moved them down, and then as the animation is happening, then the capacity is changing and they're being moved back up. That's the only thing that's happening on as faras. The key frames are concerned. Why don't we take a look at the animation just to give you a hint again? So we needed to get key frames from the stealth components, and then we have again we can set up the percentages we can use from to, and we should use the CSS helper function if we would want to reuse this animation somewhere else, and this is exactly what we're gonna do now. There's a couple of ways how we can do that. I could definitely set up twice the code. Since I have two things that are gonna be animated or in my case, I will gonna show you first of all, how we can do with heading one. And then we're gonna create again a function. Now, this function will not going to be a helper function. In fact, we're just gonna set up dysfunction right here within the banner. But just to give you an idea, obviously, how this is gonna work, All right, Now, let's start very easy by getting our key friends, which we already imported. Second, just call this const. On Imation. Now, this will be equal to my key frames. Import that. I do need to sit up honestly. Template literal. Then, like I said, starting from 0% on in this case, I am talking about heading one. We're going to start with a anyone I'm gonna say, OK, so opacity will be zero. So it will be hidden. Basically, you're not gonna be able to see it. A pass city will be zero. Then I will gonna translate it. Why direction so vertically? Ah, let's say 100%. So it will be translated down. Transform on I think if I want to translate it down yeah, I just need to use 100%. So transform. Let's say trends late. And like I said, we were gonna be working my direction. And then let's 100% so that we're going to be our starting point, then transformed anyway form. That should be the property name. Let's copy and praise that. Let's say two more times and 100% capacity will be one, and then we'll not gonna be translating this at all. So this will be zero and let's say in the middle in the middle point, we're gonna move this a bit up. So instead of 100% I want to say, let's say negative 10%. So it will gonna have a bit of a bounce now for the rapacity with 0.5 now we can save our animation. We can head over a member or heading one on weaken simply. Right. Okay, so there will be animation short can property. We're gonna right. Okay. What kind of an emission? Honestly, we can access this animation and we can say three seconds. He's in and not let's save that. And now notice how my text is jumping. Now, if you want to add obviously more break points, you can do that. There is nobody stopping in, but this is not 100%. This is 10%. There shouldn't be a small bones bounce up and then goes down. Like I said, for the info, remember, Dad was the text, as was the button that will eventually be there. I would want to do the same thing, only the opposite. So initially the text, we'll be up. And then it's gonna be moving down so I could technically copy and pasted and let's say, create animation number one. But I just find it a bit easier if I said this up as a function where I can just again past these values and then reuse that function. One for the info on the same one for heading one. So let's call my function, Const Ah, fade in. Now this function will gonna have three arguments to start. So starting point then you can call this middle. I just call this point and then obviously the endpoint. Now this will be my function. So what? My function will be returning well, my function will In fact, get a first and foremost have this animation variable. So let's cut this out. But just make sure that you have both of the Tag Temple. Literally. Let's pass it in as well as from the whole function. I would want to return now since I would want toe access right now, this variable that has the key frames, I do need to again use the CSS helper function. Otherwise this is not gonna work. So you say we will going to return the sea assess back template literal. And in this case, why don't we set it up? Like so where we were gonna have our animation then let's say three seconds and by the way , we can right away set up animation. So again, as you can see, we're just returning the property with the value, So animation will be our property and the value will be animation variable that we just created on top. Then let's add the same thing with three seconds he's in and out. So what we can do instead right now is head over to heading one on. Instead of having this property we can use thief are fading function where I'm going to say OK, so I will gonna have fade in. That is obviously my function name. And now I just need to pass wherever values I would like or here So for my fated what We're gonna be the values. Well, I could say 100% so it will be moved 100% down at the middle point. It will be negative 10% on at the end. This will be zero If you want to set up more values, of course. So you can control within the three seconds or reason and out you can do that. I think we have covered this enough where I could just show you how this would work in a very basic way. And then later on, you can do it yourself. Like I said, this would be the opposite. So I'm gonna go with negative 100% than positive will be. Then on the last one will be zero. So let's say zero on zero. And once we set up everything and once we tested out, you noticed that both of them are exactly the same, so there's no change now. The reason for that is because they haven't added the values. Remember, we just set up to function, but I'm returning exactly everything the same. So instead of just having 100% negative 10 as well. Zero this is we're gonna be passing in the values. So I'm gonna say that four to start This is I was looking to me my start point. And since this is stacked template literal, it was just a start. That obviously will be. The argument that I'm passing than the middle one or the middle one were gonna save point because that is my variable name. Mostly if you chose something else that is really up to you. And last one is what will we have? The end one, right. So what's right? And on now you can see that our animation is working again. The easy way would be probably copying, pasting and creating two of them, if that's what you want to do. I just decided to make it a little bit more flexible where we also have the function and that way I can control I can just pass in whatever values I would like. In that way, I'm gonna be getting my results 47. 15 primary button: there was nice and easy. We have our animation and the last thing that is missing in our banner is the But our again , the button will be reused on throughout the project. So what I would like to do is set up a separate component where in fact, I'm gonna have to buttons. So I'm gonna have these big buttons, and later on, we're gonna create the smaller ones. And as you can see, this is going to be very simple where everything will going to be inherited from the big button. The only thing we're gonna change is in fact batting. All right, let's start working on that. Then, within the global's wedding, we created you file call these buttons Js within the button. Jess, we don't care about the banner. I'm sorry. What? That I react. So we're gonna write import import we're gonna be importing styled. Of course, from styled come opponents like so And then once we import the styled, we're gonna right away set up t button. So let's say export const on. I'm gonna call this primary Bt and so primary button we're gonna use styled on. We're gonna set this up as a button later on. In fact, in the next video, I'm going to show you how we can use as prop. So even though this will be a button, this is gonna be very, very cool. Future we have a style components where in fact, we can start anything we would want This way and again, I'm skipping a bit of a head, but I'm just going to show you that in next video, I also would want to set up some kind off functions. Of course, the helper functions that we have been working so hard on. So I'm going to say import, Then what are going to be the functions? Well, set color. Then I'm gonna set Ram. Ah also set letter spacing, then set transition, which we haven't created yet. So when we work on the phones first on at the very end, we're gonna work, would set transition on This will be from of course, their styles from on we need to look for the folder. Then this case, this is gonna be in the same folder on our style should be here. Correct. So I'm just gonna look for this folder and yet this is gonna be My style's. Okay. So once we have everything imported, we are exporting the button. Of course, on that is working now what we would want. I don't know. Why don't we go with display on? We're gonna call this in line block for the moment. And just so we can see that our import is correct, we can have that ground on, then dollar sign. And let's say Seth color will be primary core for our button. And again just to test it out before we run tons of code. We were gonna head over back to the banner on within the banner. We still want to render the button. Now, honestly, in the banner, we're not gonna be rendering the button. We just see that we were gonna have a Children here so we can close the banner for now and then, in fact, within the header where we have the banner, this is we're gonna be rendering her button. So it's a import. Then call this primary bt and of course, And then from where? Well, we need to look for the global's and then within the global's, we're gonna have our primary button or buttons and then within the buttons, we're gonna have our primary button. Now the Bonner obviously needs to render its Children, so we need to place this button within the banner. So let's call this primary Bt n Now it's right. Something within the button And let's see what I wrote in the final project that won't read more. It was in fact, have you details. OK, so it's a view details on Let's see whether everything is being actually rendered and I see my little button here, so why don't we start working on it? Why don't we start adding the styles first and foremost? We got our background Now that is working out what? And we set up also the color for the color. We're going to use that color again. Main white, Then text transform capitalized trans form form on organized this capitalize and then we also conduce maybe font size, fun size and for the font size, we already have our set remem remember to function that we had. So let's use a dream and I'm just gonna say for the font size the pixels will be hitting. I said that the now I always leave my pixels are being here. Then why don't we set up the fonts on? We can obviously have two options. At the moment we have made our slanted. I will gonna go with the main. Remember, the trance functions are set Fonts on or set fund said font. Iving said font. And we're gonna go with the main one. Let's see. Now this is going to set up and it's saying, OK, so we didn't get fonts. Of course, because again, I'm exporting Font Uh, I'm sorry. I'm exporting importing. In fact, said Fonds instead of set fun, then we were gonna have a little bit of padding. And when I say a little bit, were in fact gonna add much of patting. So instead, we're gonna write set, Graham, and let's say top bottom will be 17 and left and right, 36. So for the big button, this is gonna be our padding set Room 36. And like I said later on, we're gonna be sitting up are smaller button. These are the values that we're gonna be changing now. At the moment, I didn't mess up a little bit here. I didn't need so many of them some of my clothes. The 1st 1 here and now I should have my padding and save that. And yes, now I have a bigger button. Then I can use my set border. Remember, that was something that we created. And by the way, we should importance Also so set border and we have right now are helper function for the border. Why don't we just passing the color so color? Ah, set colors on primary color. Okay. And now you can see how easy it is once we have all these functions. Now we do need to add a politician, Mark, Of course, on it. Also again, I keep on adding colors. So maybe this is the case where I should have changed this to set colors because I keep on adding colors, not color. I also would want to do a little bit of letter spacing. So say, let's set letter spacing. And this will be just a function. We're not gonna pass anything in. Or if you want, you can Honestly, let's add break. If this is your deal and then as I'm hovering, I would want to change the color. Now, I'm gonna do this. Obviously, with transition, but we haven't set up their function yet. Helper function. How are we do know that if I'm using the n percent now, I'm selecting the actual component the styled component that I have So I can say OK, so styled component. As I'm hovering over, I would want the background to be transparent. And I also would want to change the color Ford is I have said color, of course, or set color on primary call letter will be my value. And then last thing we would want obviously maybe a text decoration on because, like I said, we were gonna be working also with Linklater on thanks Decoration operation on done not text. The line takes decoration will be none. And then as I'm hovering notice, I am having my effect where the background is actually turning transparent and the color is in fact, primary car. However, that change is not happening over time. And for that I would want to set up another helper function. So we're gonna head again, go ahead and head over to a transition. So let's call this set transition So right after the object, it's a export. Const set transition on what would be the value as well as we're working with transition. We have properties. So what property would be affected? How long it would take on how the transition would take place. So again, we're going to do the same thing. Since we have the object, we were gonna have three arguments as well as their will gonna be a default parameter right away as an object. And like I said, three values property we'll be by default, equal to all. So again, the only thing we're doing is we're setting right away default properties. Then we're gonna have the time property more argument, and that will be equal by default to zero point three seconds. And last but not least, we're working with timing. And for the timing, would business aided by default? He's in and out. There were gonna be our default timing. On what else? Well, I think everything is in fact set up. So now we just need to work with return on. What? I would like to return his return. Then why don't we work with transition? This is what I'm gonna be returning on. Like I said, I'm gonna go work with the property for Ah, purty And then I'm gonna say time, time, and then let's add maybe timing, timing. So this is the third argument that we're passing. Just so obviously showed that we could art coated If you don't like, set up this kind of function, the only thing you need to do again transition transition and then we're looking forward toa properties that we're gonna be affected on if some of you don't know the transition basically is or essentially is a change over time. So as I'm hovering at the moment, everything is happening instantly. But I want this change to happen over time so I can say all properties will be affected 0.3 seconds on how the transition we're gonna take place. Let's say linear. So it's gonna happen right now as I'm hovering, This will happen, not right away. So if I'm going to say, let's say two seconds, you'll probably gonna be able to see it better and say that and now notice how long the transition is taking place. But we already have our help. Her function so set transition on. Now let's use it on again just to show that this is working. We do need to access, of course, our variable or our function. So set transition. And then why don't we pass in the timing now? Normally, I'm just gonna leave it the way it is. I'm gonna leave it the default one. But just because I want to show you that housely, this is working. Why don't we say that we would want to pass in time. And let's say time will be two seconds. Now let's add a semi colon and let's see whether, as I'm hovering on at the moment, nothing is happening. Okay, That is interesting. Whether we had over back to the styles. So we have time. 0.3 seconds. That should be the default one. So why don't we just it out? First of all, without any kind of values, maybe we'll notice where is the mistake to begin with? Let's set upset transition. Hopefully the naming is correct and hopefully exported. So export Kant's said transition. Okay, so within the button also do have set transition. Yes, it should work now. It's just it out on again. It's not working. Okay, so there has to be some kind of air somewhere. Okay, so let's find out where. So styles I am I returning everything correctly, have the transition. I have a property time on timing, so that should look well. But maybe why don't we add right away, spaces? Because that could also affect why this is not working. So let's see. No, this is still or you know what? No, it is working. Why don't we see? Okay, so let's head over back. Let's maybe for transition right now. Proper time Time. Two seconds on. Let's see. It should work right now on. Yes. Now it obviously takes two seconds, And this is how we know that we need to be very careful. So if we're going to be making such a small mistake right now, just so it's pretty small mistake on and this could be something that we can all do, but it will be right away affecting how our function is gonna be working. So whenever you're setting up to function, always always test it out first. So that way you're not going to get any kind of surprises. So let's say here, I'm gonna go back to 0.3 on this should be working right away by default, right? So now this is gonna be my 0.3. Now, last thing I would want is setting up the margins. And that's one thing that I do like to do with the props, because at the moment, what's happening is obviously my button is sitting here right in the center, and all this is working really fine. But what I would like to do is obviously have the props. And that way I can affect that much. Now, the reason why I want to do it with the props or the reason why I like to do it with the props because they rise If I'm gonna heart code something this and then you want to place this button, let's say somewhere else you'll be having a hard time because if you will have some kind of default margin than you will have to override it and so on and so forth. So instead what I chose to do in this case, I'm going to say props. I'm gonna be getting some kind of Peru romps. And then depending on what kind of prop I'm gonna get, I will go on display. So we know that for margin padding, we can have four values. So the 1st 1 to stop so I can say there will gonna be a prop by the name Off T. And if it's not there, we can use again a more operator. And I'm just gonna pass here. Zero on this way. I'm going to set up for all of them. So I'm going to say, All right, so there were gonna be props off, right? And that also will be default zero. So nothing is past moving. Just gonna have zero. Then after that, we're gonna be having another props. Ah, left and again, It's not there. Were using more operator zero on. You know what? We should have bottom first bottom. And now the last one will be like So where we have props on left again, Let's go with a 01 Now, this will be my return, and at the moment, this will be complaining. Okay, Now, that is not our issue, because we just need to sit up here proper thurn. So I'm saying margin and now I'm gonna place the Templar literal here at the end. And now this should fix my issue. That was my Bugno. I will gonna add here. Obviously the ah quotation might not Quotation Mark, I We're gonna out, of course, here. The closing one, as was the semicolon. Let's save that now. This will be my margin. And if we're gonna head over, let's say to a primary button that we have. And if I would want to add margin, I could just say t on. In my case, I'm gonna pass. I don't know. One rum's no notice what's gonna happen? Well, we're gonna have right away margin. So that's way how I like to set up my margins. So that way, using the props, I can pray much, move them around, however I would like, but by default, all of them are going to be zero. So that way, if you add this button somewhere where you don't want any margins, there will be no default margins 48. 16 as prop: I also would like to show you a very, very cool feature that comes with stuffed components where even though we did set up this as a button on, in fact, we styled it as a button. We could, for example, have this on be rendered as link or any kind of other HTML moment. So the way this is gonna work, if we're gonna head over again, back to the documentation we noticed that we can use this as problem on. Let's say we have the def. But then when we rendering, we just have this as prop and we set it up. What kind of HTML element this will be. So in our case, instead of having a button not honest with this button, Of course, we're not going anywhere. We're not having a U. R l, of course, or a trip or anything like that. By the way, you know what I would want to add? Also cursor pointer so cursor pointer that would be just signed known. So why don't we copy and paste or button that we have? So it's company based and let's test it out. So if I would want to render this as a Lincoln. By the way, why don't we remove this patting render margin at the moment? Just so there are both exactly the same. Let's use our as prop. We're going to set it up that we would want to render html element link on. Why don't we had right away h rough on for our your l We can maybe use HDP. And then, let's say Google So two forwards last year's W W Google the calm just so we can see whether we're gonna be able to navigate on. Yep. What I see here is two buttons were one of them, in fact, is a link on We can always tested out by, in fact, inspecting the page. So this is gonna be my details. This is just gonna be a simple button. But this in fact will be like, because the moment I'm going to click on it, where do you think we're going? Well, I think we're going to our A trip which waas Google. And if you still don't believe me, like I said, we can just inspect this and you'll see that what we're rendering is one is the button on the 2nd 1 his link, which I think is a very, very cool feature. And that's the reason why I will gonna come and this up just so you can have it for your own reference. I will gonna leave for now. Obviously this to be button. But just so you know, you can obviously always have it as a Linkous. Well, now, let me add, Maybe still this stop patting on four that were going to say, I don't known can one rum's and we're good to go so we can start working on our next section. 49. 17 Section and Title Components: excellent. We have our button, but we also know that we can render it as a link. So why don't we start working on our next section in the project? And next section will be about section on what's interesting about this section. We're going to create two more global components that we can reuse throughout this project or any other project that we would want. So 1st 1 will be container for each and every section where we're gonna be able to, let's say, change the background If you would want as well as just had some basic patterns on the 2nd 1 will be titled, which could be text online left by default war. We can align it in the center. So let's start working on that. I will gonna head over back to my folder within the folder I would want to create not a new page. So still gonna be working within the home. But within the home folder off the components will create a new section. I'm gonna call this about Js now. I will going to use thesis index right now for the react component. Of course. The arrow function, of course. And then this will be my about on Why don't we write some dumb text here? Low from about section. Now, What I would like to do right now is head over to my home. Um, not only we're gonna be rendering header We're also gonna be rendering about I will gonna select two, uh, cursors on we're gonna write about And we can also render it here. So this will be my about section. Like I said at the moment, we just have a dump Tex next within the about I would want to create. Like I said, these two components and maybe not within the about, but we're gonna render them in the about section and they will be 21 will be section. So let's start with Section J. As in this case, we don't care about the react component. So I'm just gonna work with styled from styled components. How are we do need to use these cell per function set ramps or import said Ram from, And I would just need to look for our style so that that that that and then we have obviously styles. Then once we have all this set up, we were gonna create our section. So let's say section then. This is equal to styled section, since this is styled component. And why don't we use for the padding or Ram? So set, Ram? In this case, we can write 64. So I'm gonna set this 64 pixel stop bottom padding as well as left and right will be zero. And also, we can add maybe a background now for the background. I would want to use the problem. So depending what kind of problem gonna add for the color that will be the background for my section. As you can see, this will be default white One on this will be the gray one on. We're gonna head over back here, I'm gonna say, Set the ram. Okay, background. Now we're gonna be targeting off course are props and for the problem going to say if there is a prop by the name of color, then this should be the color for the back now has been at least we do need to export its so export default on. Let's call this a section and now within our about, I would want to render that something to say import import. Ah, we're gonna call this section from And now we need to go to the global's on within the global's. We should have that component by the name of the section. And now everything that will be within the about will be wrapped in that section so I can select maybe these two the lead them on just right that I would want to render the section instead. And at the moment we see just way more padding because this is what we had it. However you want to add the background color, you can just say OK, so my background color will be Let's say right on the money. You'll say that, of course. Now you're section. We're gonna have a color by the name of Red to your background. All right, Now, like I said, I would still want to have the title. That's something else I would want so I can save the section for now. Then we're gonna head over back to my global's. We're gonna create a new one. I'm gonna call this title Js within the title. This will be, in fact, a reactive component. So again we can do the same thing react component like So now this is just going to take a little bit of time. Or I can get probably suggestions back and what else I would want. Well, in this case, why don't we had our and say import style does well from, um styled components. Okay. Um okay. We also would want probably to render it right away by the default, because I haven't showed you that. Remember, we did set up that the component was extending the actual rack component. So why don't we take a look at how we can export it by default? A styled component that is styling the react opponent. Hopefully understand what I mean. So I have this style. It's amusing style components to style this react component. And previously I just said Okay, so I would want to have title rapper that will be styling the title. Let's say and then that was exported. Now, in this case, we're gonna do very simple for the default export. Just right, Styled. And then we will gonna be grabbing the title, and then we're gonna set up them plate, literal. That's all we have to do on in this case. I can just set up whatever styling I have for the style. But again, in this case, I do need to pass here toe, Remember class name that was necessary. Also, I would want to pass title prop That will be a text that will be rendered and the last one will be center. So if I would want to let's say said this up in the centre. I'm just gonna add this problem. If the proper will not be there, then it will not be in the center. All right, now, in this case, why don't we do very simply by saying that this will be hearing three. But we do need to have that class name that will be obviously equal to our last name. Then we can close the hearing three move over here like so and then we would want to render obviously the title. The title will be the probably tour passing in. Why don't we first tested out by passing the title and then we're going to see how this is gonna work. So our title we're gonna say about us. Let's save our title. For now, we're gonna head over back to about Js then not only the section, but again We're gonna select to cursors two cursors on. Then we're gonna delete that. I'm gonna write that this will be our title. So within the section for the moment will also gonna render title And what I would want for the title is some kind of prop that will be rendered now again, The name was what the name was actually title itself. So, Marie title about us and let's see whether this is gonna work on Yes, I do have the heading three so I can build this title That way we can always see what is happening. All right. Ah, We also would want some functions that we're getting. Honestly, as our helper functions, Some say import, I'm gonna be looking for cetera em set fund said font, and then set letter spacing set letter spacing like so this will be from our style. So that that that that that that on, we're gonna beginning this room stuff on The last thing that we want is within the tactical a literal. Why don't we set up what we would want for this title to be Now we can start very easy for size found size. And for that let's using and set Ram said dram. And we're gonna go with let's say 30 six pixels. You say that as you can see, our text gets bigger. Now, we can also use maybe text transform, transform on for that we're gonna say OK, so track text transform. I will be kept allies on. Yeah, is getting me text the line and this will be capitalized. You can also set up maybe more spacing set letter, letter spacing. We're gonna add maybe five pixels. So this will be a bigger spacing. And we can also may be set up the fonts when we have a set fund. So said fund helper function on We're gonna be, in fact, looking for slanted just so we can look at other funds family as well. And yes, this is our time now. Ah, we also are missing the text the line because at the moment, obviously, this is on the left hand side and by the way, at the end for this section, this will also going to be on right hand side. But we want to cover how we can have this in the center on before that, We're going to say very simply, that we were gonna be looking for that prop off center. So concise text, um, line and then even that prop will be on our component. So crops, perhaps center in this case, weaken Do a tannery operator. If that prop is on our component, then place textile in center. If it's not, then by default, this will be left. Now let's say that and we contest it out in the about notice. We have the title from Ghana, this prop. Where do you see our title is? Well, this is in a sector Like I said in the about section were not in fact going to use that. So now we do have our components that we wanted Teoh Global ones on. Now we can actually finish the about section altogether. 50. 18 about section: So let's take a quick look of what we're gonna be building. So there will gonna be obviously the section that we already created. Then there's gonna be two column layout on. Obviously, once we're going to get to the smaller screen, that is gonna be one column layout, But the moon we're going to get to the bigger screen. There will be image as well as we were gonna have. Here are text with the title with some kind of paragraph on the button. And in this particular section, we should already see the benefits off all the hard work that we did. Basically, how we can use our helper functions in our advantage. Now, we were gonna have to start with a bunch of imports because we do need to get an image. We need to get our helper functions. We do need to get her primary button. So let's not waste our time on Let's start doing that. So I'm gonna be looking for about I am Jade. This will be in the images folder. So let's seen on Global's, but images on down within the images, we're gonna have a about BCG J peg. That's gonna be the name of our image. Then from the styles out once set Ram, Oprah functions that border, and I'm just gonna call them functions. Helper functions too much for me to say those set colors or color. And I said letter spacing as well as we want to use a bid off Media Query. So we're gonna import media on all this will be nicely imported from the DOT and then we're looking obviously for the styles. So not global's, but styles a file that should be your name now, once we have the imports. Also, let's not forget about primary, so import import primary Bt an from and this will be from the global's on buttons course. Right, So Global's buttons and see that should import everything. If everything is correct, it This was buttons and now let's start rendering what we would want. So we have our section awesome for now, the title. We'll stay the way it is, but the whole section will gonna wrap around The about center now about center will be responsible for it is greed layer. So this section is just responsible for the padding and for the background on the way we're going to do that. We're gonna call this about center and you already have guested that we also need a styled component because that's the one thing I did in fact Ah, Import. So it's right, first of all, about center, But it we're gonna complain that we cannot find both center. So maybe right after primary button with Red import. Ah, styled from styled components. Like so on. This will be my import. Hopefully this we're gonna work. And then what I would want within the about center. Well, first of all, I would want to create it when one say, Okay, so const about center is equal to styled. Styled on, we're gonna be saying Dave, and then we have tagged template literal. Now, the moment there will be no styles, I would just say about center on. Then let's move this guy. So it's moving down. We're gonna have our title, and then there's gonna be two column layout. So our first column will be about I am G. That will be the name of the class for our Dev. Then within a day, we would want to render the image now for damage. We're gonna be simply using the source. Ah, source will be about I am J that we just imported also what? And we use out attribute and then this will be about us. And if everything is correct, the image will be massive. Now let's save that. And yes, we do have are massive image which we will gonna fix shortly anyway, that will be the image. And then we could said the second column will be the title paragraph on. Then we're gonna have our primary button. So let's create our about, ah, info. And then within the about info on we actually skipped in for four, but within the about in for what we would want. Well, we could place the title here with me. Moved title up. We could also set up the paragraph. Now paragraph, let's say we're gonna have Laura. I'm 30. So 30 words and right after the paragraph weaken do the primary button. So primary button, then within the button, we're gonna be rendering at, and I'll read more. So read more on set up the primary primary button. Okay, I would say that. Let's see Well, when have again we'll have our message image and now we can start working on our styling. So first and foremost, we were going to say for both of the columns that we're gonna have so about I am g as well as, ah, that so class about inform both of them will gonna have some padding. So I'm gonna say padding and padding would be with set room so you can use set or AM function. That's past 30 pixels. Both of them should have 30 pixels around. That's number one. OK, so far, so good. What else you would want after that? Well, 40 about image. We would want to set up the border as well as proper with. So since I can use the nesting here, I mean, we could technically just set up a image tag, meaning we could select image tag. But why don't we show again that we can do the nest things that we're looking for about image and then for the image we would want to have the with off what's 100%? Then display block to get rid of the annoying margin that we have by default, um, display block. And then we also can use a set border, remember are finished project. We're gonna have this border, and we already have that said border function. So for the set border, whether we add with and just to show you how cool, where is the fact? Well, first of all, we need to pass it here as an object. But we could say with now that is actually our property. But we can use this set room. In this case, that's our helper function used within our second offer function. How cool is that? No, let's adhere six pixels that this will be obviously the with. And then we also have a color property, and that will be set colors. Um, primary color could maybe do it this way and let's see whether we're gonna have that on at the moment again. I keep using set colors and actually set color. And yes, this is our image and what we would want. Well, maybe for the paragraph that we have, we're gonna add a bit of letter spacing. So it's right about info, then paragraph. So again, we're doing nesting here, and we're going to use our helper function. So let's call this, I don't know, set letter spacing. And that should do it like three. I think my default was too. Now let me just quickly double check. So then, wasn't my default? I will gonna head over back to styles and set transition is not what I'm looking for. I'm looking for set letter spacing. And yes, the default was too. So now we're adding three. So far, so good. Let's head over back to a ball Js. And now we would want to set up some kind off with here. So what we're having right now is our slee, our def. But we would probably want to have some kind of with as far as our columns are concerned. Now, the way we're gonna do that, we're gonna circus. So with will be 90 view with person for most, and then for the margin, we're gonna say, margin zero auto. And now let's see what we're gonna have on a bigger screen size. So I'm gonna head over to a bigger screen. I noticed this is gonna be our look. So we have 90 view with on. We have placed everything in center. All right, now, starting from the desktop starting from the media queer of this stuff. We would want to have a Gridley. Now we do know that we already have our function, Of course. So let me get it. Media call this this stop and starting from the desktop, what kind of styles would want? Well, I'm gonna set up right now. My template literal is And let's start righting so first and foremost 40 about center, I would want to have it 100% view it warms a review with. However, I also would want to set it up where the max with is, in fact, 1170 pixels. So, Max with and by the way again, if you want, you can use set room. I'm just gonna right here, 1170 pixels. And the reason for that, because laying around on a different section, I would want to show you something. Math related a bit. So that's the reason why I'm keeping This is pixels. So now this, make sure that it's never bigger than that. And now we're gonna be setting up our great basically. So what I'm going to say here is all right, So about center will be display grid, so it will be displayed as grade. And of course, we have grid template columns. That is very important property. And for that we have one fraction in one fraction. Now, fraction units basically give you a column loud because what they're saying is one fraction would be one part of the available space. So let's say if I have one fraction and one fraction when I'm saying all right, so there were gonna be two column layout. I'm gonna have 1/3 1 No, this was gonna happen. So now they're all gonna be three count layer. But we don't have here as 1/3 calm because there's nothing in there on. The reason for that is because we have on Lee to Children. One will be about image, and the 2nd 1 is about info. So or fractional units. Make sure we have our grid way out where basically we have comes. We organized, of course, look a little bit more complicated Example later on in the next section. But this would be the most basic one we could set up here, obviously, with pick cells with rpm's, we would say OK, so the first column would be under No. 400 pixels, and the 2nd 1 would be 20 rpm's. But with fractions, What happens again, you're dividing units off what are available. So let's say you have two columns and you're saying, OK, each of you should take up one unit off the space. All right? Now, we can also do grid gap columns or grid column Gap. There will be spacing between the columns on. I'm just gonna set this up. As to Williams now, we obviously have her set that we would want so set Marie EMS on. Let's say to our names would be about 32. We can do it this way. Now we have a little bit more gap in between. And then what's gonna happen is as your screen size is gonna change, you would want probably placed the image in center. So what you're gonna say is that the image should be aligned center still still within our desktop, we could be like, OK, so I'm vault image. We could do a line center online himself because the paragraph will be bigger on specific screen sizes. So we're gonna align it in the center, so this is always gonna be in the center compared to the info and then 40 about in for what we would want for the paragraph. Well, the with should be maybe smaller. So you can say like, Okay, so paragraph and then with, I don't know, 80% something like this. 80%. Now let's say that that should work out. And one thing, one last thing that's bothering me that I don't see here the margin, even though we did set up this in the global stars. So let's head over back to Globalstar's. And yes, of course, for the paragraph I did at 1.5. But this should be either. TMZ terrariums Now that we have a everything should be working out much better. Now let's test it out. This is our recording on this is our two column land. In order to see this better, I will gonna minimize this. And now let's see how this will be responsive. So, like I said, for this screen size, the images smaller. So I want to place that image in the center. As for us, the about info is concerned, and now let's make it smaller. Now we're gonna get to less than this stuff seriously, this is smaller. This is the reason why, starting from that stop, we had a two calmly and then this is just gonna be one calmly out. Okay? Hopefully everything worked up for you as well. And now we can proceed and start working on our next section. 51. 19 rooms component setup: All right, styled Component Warriors. We are almost almost done. We just have one more section left, which would be the room section. We're gonna have three cards, we the room. And as we're hovering, we can see the price of the room as well as the button within the card where this will be a smaller button as well as you can probably notice a little shadow effect as I'm hovering over the card. Now, I would like to spend this video basically preparing for this section. Meaning we were going to go over what kind of data we have. We're gonna create a smaller buttons, we're gonna create the components and then in next video, this is where the work we're gonna start, where we're going to start by working in the actual room section, and then we're gonna work with each and every room. By the way, each and every room component probably will be the most extensive one. Because, as you can see, it has quite a few features. All right, now, I would want to close a bunch of tabs on the top because I have a CD above this. I get really annoyed by watching it, all the tabs. And now let's start from the very, very scratch. Where Why don't we make smaller button because of the moment? Noticed? We have the massive button and everything is working really well. But I probably wouldn't want to shove that button in that card. It will probably make most of the size off the card on. We already know how we can extend using styled component. So let's say like this export, then we're going to do const. Of course. And then name would be at a no small Bt in. And then we're gonna use styled, since obviously this is already imported. And then we know that if you would extend the styled component, we just need to write styles component we would want to extend. So in our case, that obviously would be primary button primary B TN on. Then we do need to have the template literal. So far, so good. And like I said, the only thing we're gonna change is the padding. So let me find where is that bad boy? All right, so here it is. So at the moment, we have padding of 17 and 36 so Why don't we do this way? We have padding. Then we're going to use that room again. Said through him, and I'm going to say it's gonna be only nine pixels bottom as well as left and rights at the room. I don't know what could go with 12 now that we're sure we're gonna make my button smaller. All right, now we will gonna save this on at the moment. We're not gonna be able to see it anywhere. Later on, we're gonna move it to the button, so we will gonna be able to say by the end of the video. But why don't we shift our focus to our data? Because one of the things so we would need to do this section is by in fact, getting this data is noticed. We have different prices for them. We have different images for them. Also the naming. Andi. Well, the info is not the same because they used a Lauren, but in general, you obviously would have different info. All right, Now, as far as the pictures are concerned, you should have everything within the images that we already originally got from the set of files. So we have room number one. Room number two on the room number three. All right, Now, what about the data? So if I'm gonna head over back again to the set of files, notice you're gonna have this room data or rooms? Data Js. So what I would like to do right now is copy this bad boy. So it's a copy. We're gonna head over back, and we're gonna go to the source, then within the source on Let me maybe on that, that is not gonna zoom in properly. But what I'm looking here is I would want to go to a component and then within the components within the home, one always gonna copy and paste that. So I will have my about. I will have my header as well as I'm gonna have my room's date. And why don't we head over back and let's check it out? What we do have in that rooms data folder or not folder but to file. So what I did is I imported from the images. Room number one. Rule number two. Room number three. Now, this is the case. If you have a different folder structure meaning if you have your components somewhere else . Obviously, this is not gonna work, so you need to change the path for each and every image. Now, in my case, I know that images is sitting Nothing home, Nothing components. But in fact, this is sitting in images. So I'm leaving the home. I'm leaving the components, and then I find images. And then obviously the image name would be right. So for all of them would be room number 12 or three. But make sure your bath is correct. All right, that would be the first thing. And the second thing you notice that I'm just exporting default. Second name this. However, I would please on a I have three rooms. That's all it is with I d. Because if we're gonna be rendering lists in react, we will gonna have to have a key prop. That's the reason for the city than for the image. I'm obviously referencing the variable that I have from my import. And then I have a name. Like I said, Laura, um, Ipsum info and then just the price is a bit changing, so that's all there is to it. And now we have our rooms. So why don't we create two more components on at the moment? Will just gonna add some dummy there so still within the home folder, I'm gonna create two new files. So the 1st 1 will be rooms Js like so And now why don't we create a new file by the name off room on? We're gonna call this a room Js. So one is the rooms in the other one is room, so that would be the single room at the moment in a single room. I'm just going to create a file or the component with a function based components from reacting. That's what I wanted. And why don't we? Right away import are small button just so we can check it out that it's actually working. Now we do need to use the named imports so small, BT again. And now we just need to head over to the buttons. So this will be global's. I don't need to go. You have do need humbles what I'm talking about. So I need global's. For some reason, I was thinking that I'm looking already for the images on within the global's. What do I have a First of all, this is with a smaller letter and then within the global's I should have my buttons. Correct. So this small buttons should be from those buttons. So instead of saying hello from room, I'm just going to render the button. And if everything is gonna work out asleep, this button should be shown. So let's go with small Bt n now within the button legis right? Maybe hello from room or religious. Say hello. That's gonna be shorter. So we have our room and now I'm gonna do exactly the same thing within the rooms Js. Apart from I would want to create a class based component. Some will say that this will be arm sorry Made it functional components. RCC with extension would be class based component. And why don't we right away import that single room So I'm gonna say room that will be in the same folder, Of course. So I just need to go room on, then this will be my file on within the Dev at the moment again. Will not gonna Carrie about anything else on We'll just say render me please room at the moment. We're not gonna be able to see anything. And the reason is very simple because rooms is not being rendered anywhere in her document . So we remember that not within the images, but we have our home Js. So our homepage So we're right after the about. What I'm gonna do is I'm just gonna again cup in place that then I'm going to select two cursors once. Delete that. Let's right the rooms. And right after the about we're gonna be dealing Were the rooms on Let's say that on. Let's see what's gonna happen. I should have Yep, This is my tiny, tiny hello button and now we know that we have of working section. So we just need to obviously data as well as we know that we have are smaller button cause , known as this would be the minger button. But we have successfully copy and pasted all the styles that we have or you can be very fancy and say that we extended them and then we just add a deep adding that was smaller. So once we have hold this data now we can finally start working on our rooms component as well as the actual room component 52. 20 rooms component: All right, guys, we do have are set up for robes component. So have think this would be an awesome time to start working on this component. We already rendering rooms within the home. So bye bye. Home. Then we will Probably going to keep the room tab open his mind as well. No big deal. This is gonna be our next component. And then button also we're not gonna need I will gonna close the sidebar. And since we have created so many global components already, we might as well can start reusing them. So we are importing the room. But we will then the use a bit off styled as well stone component, that is. And then we're gonna say from And of course, now we're looking for style components and then we start, we get section, we will gonna get the title on, we're gonna get the rooms now. Rooms is obviously the data where we have all the data, both rooms. So it's very simply by import title from and this will be the global's, and then, of course, were looking for the title. Then we're gonna copy and paste that and here I'm gonna say section. All right, we have our title. We have our section. And then what else we would want? I think we could go with rooms like I said, import rooms. Now, this will be the data. This should be exactly in the same folder. Remember? We copied and pasted and it's sitting side by side, So I'm just gonna go with rooms. Ah, Hyphen data Js. Well, we don't need to add Js, but this is our data. This will be a class based component. Now it's really cool about class based components. We can set up the state within the state. That is just gonna be one property by the name of rooms. And we're gonna set this equal. Teoh, you guessed it. The rooms that we just got from our data. All right, Now, what would be within the render is, obviously, at the moment, we're just rendering this one lonely button. All right, so why don't think fix that? We do have our section that will be for all the pad ings and everything. And we also have our awesome feature death within the section. Remember, we have a color problem, So why don't I also get my helper functions from let's say styles. So is there also import? I would do set color a media then set Ram and all this will be from our styles. So from and we're leaving two folders and we should eventually come to this styles. And now within the caller This is where I'm gonna pass my color that I have for the light Grey, Remember, in the very very beginning when you were sending up styles, we set up that color, somebody used that color and this will be equal to our light Grey. Then we're gonna have the title title for the title. We have the title prop by the name You wanna name this name or something? If you don't like the fact that the properties, the exactly the same name as the component Of course you can do that. And I'm gonna call this our rooms and I would want to place it in the center. Remember, we also have the center prop. If the proper is there, then obviously this will be in the center. And last but not least, we're gonna have the room center. So rooms center that we haven't obviously created yet but we will using the stuff component . So I'm gonna say const rooms center equal to styled on. Then this will be live And then within the Dev again, We're just gonna add some styles later on. Let's just start very simply by saying with ah four, this particular Dev will be 90 view with We were always gonna place it in the center margin zero auto nicely sitting in the center. Know what else I would want? Yeah, I'm later on. We'll just gonna work with the media. Okay, Now what do you see over here? I see my rooms on. At the moment, everything is sitting nicely. The center on this is not major in This is margin. In fact, margin on let's take a look at the bigger screen size. This is gonna be a recording on This is our room. And as you can see, this is sitting in the center as well as we have the color. So now that we have created these components, we can finally reuse them nicely. Where you want a different color. You can get a different color. You want to place them in a century, can place them in the center on what would be next. My idea would be very simple where I have my room center on. By the way, this is all that. I'm gonna be collapsing with my four matter. But I mean, I like the four matter, but I guess this is one of the annoying things were always collapses the Dave or the element. And why don't we head over here and then within the room center? What I would like to do is loop over this array because obviously what we're having right now is this room's data here. Remember, we imported it, We had the array. And now this is equal to our rooms. Property within the state on this would be very simple, where obviously I would want to access JavaScript. And I'm going to say this dot then state within the state, there will gonna be rooms prop and I would use a map method. Since this is in Ray and out one to loop over this array, creating you array. How are each and every item in the say will be wrapped in my room component. So all the day I will gonna be transformed into this room component, and then we'll go on display. Now, since I know that with math, I'm using the callback function. I could just pass here. A Solero function on this is just gonna be my argument where each and every item in this array will be referenced as a room. Right. So you can call this obviously orange. You can call this. I don't know. Peter doesn't really matter. How long does your just right here that there's gonna be an argument? Now we will. Gonna set up a return. I'm going to say that I'm returning as, um well, being throwing. Like I said, each and every item will be wrapped in a room component. Then we do need to have the key, because if we're rendering the list, reactor's gonna be complaining. If we don't have the key, prop key prop should be unique. And within the room, each and every room has the i d. As well as we're gonna pass the prop for the room component, which we haven't set it up right now. Again, this is just one lonely button sitting there, but eventually was going to be passing this prop and the value of this problem will be equal to each and every item that we have a non Marie. Hopefully this makes sense. I mean, if you have worked with react, this should be very, very familiar. Because I believe you have done this thousands of times. And what do you see here? I have three buttons. Now, if I have three items in the rain and if I have three buttons I already comptel that everything is working on, I'm being successful. No. Ah, before we go, I would want to set up some media queries as faras the responsive layout is concerned. We will look at two options with the grid. So first, when we're gonna be using the media queries, well, just gonna again said them side by side. Now, at the moment, you probably be like, Well, why are we doing that? I mean, we're just have three buttons, but I believe with a first way of doing that, this is just gonna make sense. If we just here's the simple grid. I'm gonna show you how to do it with media queries. Then we're gonna build up each and every room component. Basically, we're gonna build the component and then we're gonna be rendering the cards and then we're gonna come back and I'm gonna show you a short cut. How you can do that would see it says great again. This really has very little do with style components. Meaning the media query obviously has everything to do with style components. But I'm gonna show you two ways how we can do it with the grid. Because the tell you honestly ive you're using CSS grid. You can actually avoid using media queries altogether, not maybe 100% on each and every example. But there's a nice shortcut that just requires a little bit off wrapping your mind around it. But there is a shortcut, So I just want to show you that. So first we're gonna do the long way with the media queries, and then we're gonna look at the shortcut. Of course. Now what a media queries. What do I need? Well, we already know. We need media. We need Of course, we're gonna start with the tablet. That's gonna be my smallest size. And what kind of layout out want within a tablet? Well, or sorry. Not yeah, tablet here. So not phone, but starting from the tablet. Well, I would want a two column Lance I'm going to say display grid. Then I can use again. Greed template comes because this will be the property that pretty much is always responsible for the column layout. Now, again, I'm gonna be using fractions You could technically use wherever you would like or here. But I'm going to say that I would want to use fractions. So grid then played columns on. We're gonna go with one fraction and one fraction. Now, I would also want to set up Grid column Gap Grid column. Gap call. Um, Gap, let's go here on. Of course, this is a mistake because that not played but time plate, like so and for the gap we can use. Probably set room and we can use, like, 32 pixels. So why don't we axis at Haram on Let's go 32 pixels. This is just gonna be the gap in between the columns, that would be starting from the tablet. Remember, we have those sizes. So if I'm going to go to the bigger screen size now, we're gonna have to calmly because this obviously would be starting from the tablet. Also, I would want to set up a desktop now for this. Stop. This will be interesting where I would want to set up that with to be 1100 70 pixels. Remember, this is exactly what we did with an about section on. At the moment, you can see that this oneness spanning actually outside. So what I'm gonna do is I'm gonna say OK, so next one up after the tablet would be ah or what? Well, I believe that was by the name off their stop. So starting from the desktop, I don't care about these properties. So these ones Brady much. We're going to stay exactly the same. But what I would like to do over here is changed the actual with for my def for the room center. So, again, be careful. We're not touching anything here within the grid, grid layout will stay exactly the same. So it's do with on red. You with on Let's do Max with will be 11 seven de pixels. All right, now, this is gonna be my with, So let's see and say that I am at the moment. This doesn't look very pretty. That's not probably what I wanted. So, media desktop with on now I have a max with Okay, All right. Now what else is missing at the moment, I think I need to go with a media large where I have a three column layout. So right after this again, let's like that. It's like, Juan, let's select 2nd 1 and we're gonna copy and paste that, and then we'll have a large now for the large. I will gonna change this one. Say that starting from the large screen, the layout will be a bit different where I'm gonna get my columns so the gap will be exactly the same. But forties columns The layout will be using the function. We have an option of using a repeat function on for repeat function. We can pass the argument off how many times you would want to repeat and what we would want to repeat. So in our case, what would be the width of that particular comb? And since I'm using one fraction one fraction, and by the way, you could right here just one fraction, one fraction, one fraction so three fractions. But this would be a shortcut if you say if let's say you have eight of them, right? So you can write. Repeat three times on Get me three fractions. Now, let's save that on again. This should be our look right now. And you know what? I actually understand why this is spanning outside, and that's the reason because we added the padding, Remember? For this bad boy for the actual bad boy off the image for all of them, we did add some patterns inside. Remember when we were working with about image? We added this padding of 1.75 That's the reason why there actually are nothing the same line. But if you're gonna check it out, the bigger one noticed that. Obviously, this one has the max with off 11. 70 something, right? And I can see it actually on a screen as well. The small numbers off 11. 70. And if we're gonna head over to next section, I can also tell, right? So that would be my section. But if I'm just dealing with my div, my Dave also is gonna be a 1 70 So I know that all of them are exactly the same. The difference, though in this case would be that we are adding this pattern you over here on may be the case would be that Why don't we head over here to a bigger screen size someone's we're changing it on may be Just get her of that batting. Because that way, maybe they were gonna look exactly the same because at the moment, everything is done within the rooms. So the only thing I would want to change is like I said, I would want to head over back to about in the notice that starting from what we had some kind of with Yeah, we're saying, OK, some starting from this stop this is gonna be do with. So why don't we, starting from the desktop also get rid of this batting because this was really nice on the smaller screens, but we'll just gonna set it up here that there will be no padding. So again, somewhere within that stop, you can do it whatever we would want. So I'm just gonna start with that and I'm gonna set this set Ram to zero, cause I do want them side by side. And now I can see that both of them are sprouting exactly the same. Okay, because board a bigger screen size again. If you don't like here that there is no pattern right now, this is really up to you. You can change that on. Maybe in this case, you would also want to maybe place that text in the center. So why don't we do that as well? Remember, we were using this. Ah, self alignment when we said okay, so align self something center on in this case, why don't we do the same thing with a, um, info So you can say comma about on. We're going to go with info. This should place it also in the center and housely these guys also saying in center again , this is really more about see assess on DNA. Not as much about styled components, of course. But now let's check it out. What we're gonna have here, I'm gonna minimize this on. If I'm gonna make this smaller course, this will be responsive. Now, this is gonna go to the bigger screen size on this is gonna be the look now for the small stream again. Please understand. We're still using the plantings here, and I'm not going to change anything within my layout, in the rooms. But now we're ready to go and start working on that one particular room, so that would be displayed nicely on eventually. This will gonna look like this. All right? 53. 21 single room component: excellent. We have successfully arrived to our last component, the room component on. By the time we're done with this component, our application should look like this where each and every component will be a card. Now, as you notice, if I'm hovering over this card, I'm getting the shadow on. What I would like to do is set up again a helper function, not just to show you what would be the easiest way we're gonna go with box shadow generator . That's gonna be the website that I'm looking for on. If you had over there, you'll notice that the only thing he really need to do is just copy lines of code. Honestly, Here you can set it up so you can change it. Let's say this would be horizontal Inc thang vertical time blow radius, and you can play around with these and then you'll just gonna be getting lines of code. Now I'm gonna do very simply where I'm just gonna copy that. Then I will head over back to my style's. So where do we have styles right here on? Why don't we set up a new one so somewhere again? Doesn't really matter where I'm just going to say export, and I'm gonna name this set shadow. This will be, though, on export. I need to use Const. Uh, object. And then within the object, we're just gonna have three properties. 1st 1 will be light. Then we're gonna go for dark on Let's go with dark cast store darker or whatever you would like on. Let's start very simply by having this as a string and I'm just gonna copy and paste it, I'm going to say All right, so this will be my box shadow again. There's obviously more sophisticated ways how we conducive that. But I'm just gonna copy and paste them and change the values here. So I'm going to say for the darker one instead of 10 I'm gonna go with let's say, six on six, Mike. So and then you can already imagine that for the lightest one was gonna go with, I don't know, three and three, something like that. So, with mentally, Dad, this will be properly here. And then why don't we change this around? We're gonna say OK, so we're looking for three, then This should be three and yeah, now say that and Now we do have this function and basically what's gonna happen or an object and basically, what's gonna happen that as we're gonna be hovering, we're gonna be switching from what's a light, the dark? Or we can switch from light to darkest on so on and so forth. So that should do it actually for the styles. So now we should have our helper functions. And, as always, let's start with that imports when you say import and we would want to import first of all style because we're going to use it for styling from and we're gonna go with styled components. Then I also would want to import all my helper functions import and let's go would set the ram Ah, set letter spacing. Ah, set transition set a color set a shadow. She, uh, doh. And then I said border that border all the helper functions that I would want from and then that dot that and then they still I was like in a Venus styles. Okay, these will be my imports. And last but not least, I also would want to get prop types because we were gonna be passing here, obviously, props within this room. So why don't we set it up right away? Import on then the name would be propped types. And this will obviously gonna be from the prop types package from react again. Nothing to do with stealth components. Everything has to do with react. Then within the room. Like I said, I would want you to show you that with technically, if we're using this style component, we don't need to be in need to rename this. So I could say that this will be, let's say, not a death but an article and within the article, I would want right away to style this react component Arctic Oh, using the style components So react component styled with styled component I'm previously we looked at how we can renamed it and then actually used the extended way. However, there is even a shorter way. Now The way this will gonna work is very simply since we're using export default, we don't even need to name this so we can say instead, styled on then we're looking for obviously the component and that's it. And now this will be exported. Like I said previously, remember, we still needed to name it and then extended and then export that name style component. In this case, we can just keep all this together and say OK, still style this, But But remember, we do need to use that class name prop. We need to pass class name. And then for the article. Also, this will be class name, All right, that otherwise, this obviously is not gonna work. Now, once we have passed these two down, Uh, I'm not gonna style anything right at this moment, because I would want to show you what is actually happening. So what? We're getting back, because remember, within the rooms, we passed that room prop. So why don't we just council large it and see that everything is working? Fine. So console log on. We're gonna call this room. All right? Now, let's say that and we'll gonna head over back now. We don't need this anymore on this is obviously no recording. So if I'm gonna go to inspect and in the council, I should have three objects. The reason why I have three objects. Well, it's very simple. This is each and every room that we're passing now. That's all orders. So Now that I have access to it, I can see that I have i d which, by the way, we're not gonna need image info Price on title. So these are the four props that were looking for and we already know since we are experts on working with react that we can just do a simple de structuring and say const on In this case, I'm gonna go with an image image. So get the image out of that room, get title out of the room, get in for property out of the room on get price out of the room. So I'm going to say the structuring from the room. What I also would want to do right away is set up a default again. Parameters. Remember, we used them extensively in the styles. So I'm gonna do exactly the same thing here. I'm going to save the image is not there. Then give me at least an empty string. Now again, you could set up some kind of base image are so you can still do that. You can probably import. Let's say from the about, And you can set this up if you would want to know, in my case, I'm just gonna leave this an empty string and I'm going to say title also, if it's not there, just have it as an empty string than the same with an info on for the price. Let's say if the price is not there, this will be zero, all right. And also, before we really, really deep dive into see assess, why don't we set up to prop types? Because prop types are nice way off, actually checking whether the properties there. So let's say in the situation person foremost, I would want to render it. Otherwise, you're not gonna be able to see it, so we will gonna deal with proper ties. But why don't we set up first the html r. J sex that we were gonna be rendering? Let's start with an image container. So there will gonna be a day of with the class off image container. And the reason for that container is because there will gonna be an image image source on warehouse, the accessing right now, the property of image that we're getting from here ALTs will be I don't know what could be old. Ah, room, single room single room. Then let's close the image like so. And then also, there's gonna be a price. No. Like I said, the reason for that is when I'm gonna be hovering over it. Noticed the price we're gonna be showing up, and we're gonna set this up with CSS. But just to give you an understanding, there's gonna be a container that will wrap around both of them. That's the only thing that's happening right now. Now, for this case, we're gonna say price on class name will be price, and then we will gonna be rendering that price. So dollar sign not at the dollar sign. And we're gonna be rendering the price. So this will be my dear. Now, next, I would want to have a day of with class of room in four. And within this day, if there will be the small button as well as heading for with a title, okay? And then ah, paragraph with a property off info. So title and info will be rendered here. Obviously, obviously the images are massive. Okay, so we're gonna work on that. Don't worry. But just to show you that if we let's say, had over back to the rooms. What's good? Over two rooms Data. The moment if I'm gonna come and this out would say for the 1st 1 So we're not getting the price. I will gonna get my zero, of course, and let's see where it is. So we have three massive images and I am getting this price of zero even though eventually there's gonna be 1 25 Correct. So my default values, they're working. So the default values that we did set up a room, remember when we said them up? OK, so if the actual property is not there, let's say that equal to zero. So default parameters, How are I would want to check that I wouldn't want to be like, OK, so if the proper is not there, please react. Let me know little highs. It's kind of, you know, I'm trying to render it and it's not happening. And the way we can do that is with the propped up so we can say Rome. Now, in this case, Ah, the syntax would be opposite where we do need Teoh, use the small cap letter. So we're gonna say per up types will be equal to an object. And then since I'm already passing this in an object because remember, room is an object, that's the whole point where we are restructuring right here. Now, in this case, I will gonna use prop types that shape. So I was gonna say, OK, not there, by the way. So I deleted everything. That's not what I wanted to do. But let's close the sidebar. Let's head over back to the prop types. So for the room component, the prop is there by the name of room. Now that is still in object. So we can use prop types like so then we say docked shape, and then the syntax would be like this. Where are so this will be a method, and then within the method, then we name the properties that are in there. We have the image prop types we're gonna say String on, we're gonna use right away is required just to make sure that actually, we're getting some kind of warnings. If it's not there, let's copy and paste it. Let's say four more times on here are just gonna change these values. The 2nd 1 will be titled now this will be obviously still a string title info. Also, we're gonna be a string now. The last one will be a price, so price. But price will not be a string. It will be a number. And now, notice something interesting. What's gonna happen in a consul? Someone I had over there. And remember, our price for the first room is not there. So if I do inspect, I should have a big, massive error on off course I do. So it's saying. Well, warning prop room price is room that's required, but its value is undefined. All right, now, why don't we head over back on? Why don't we have to fix this? What? It would say Let's say 1 25 is of course there. And now everything should be working. So in this case, I do need to adhere to calm. Then there will be no era on Yeah. Then we just have some simple warnings that we haven't used are functions yet on. That's it, guys. Now it's just gonna be a straightforward CSS. That's all There is gonna be there, and we'll just gonna have some Sprinkles off styled components, inform off our helper functions and that's it. But this will be a very, very straightforward road. So let's start, first of all, for the background for the whole car that we have. And I'm just gonna use my against that color. So said color and we were going to go with Main White. So this will be the color off my background now. It's kind of hard to see, of course, because this is gray and that is white. And by the way, this at the moment. Still, those images are massive, but you'll be able to see it obviously, on the finished project on. Once I have the background, I would want to have margin, then for the margin we're gonna use set to ram people. And we're going to say top bottom 32 left and right zero like So now these will be margins basically in between, So they're not stacked one on top of each other. And now we're deep diving into our container because that's we're gonna be your first thing . And by the way, and it's not Conine should be container here. Apologize. This is what I would like to start first because, like I said on the finished project. It will look like this. Whereas I'm hovering, I'm gonna have some CSS effects to the actual background to the actually imagine, actually also the price. And I don't know why I keep saying actually all the time, but I guess I really like that work, right? And why don't we start by image container dot I am G container. What I would want for this container. Well, I would first want to set up the background to be black because as I'm hovering, I'm going to change the opacity of the image. In that way, we're gonna be able to see that back background so we can do background for that container will be against set color color. Let's go with main black people on this will be main black. I also would want position to be a relative. Now, the reason for that, because we're going to use position absolute for that price because I want to put that price exactly in the center. That's gonna before the image container. Now it's started working with an image, but again, we connects this because we already within the image container so I can say OK within the image container. Get me that particular image and let's set up the with. So it's not spanning all the cross 3000 screens. Then we can do this play block on the last one. I would want to set up the transition because as I'm hovering, I would want Teoh have the opacity. As I'm going to be hovering over this container, there's gonna be a passively change for the image. That's the reason that I would want to happen This change over time. So I we're gonna use set transition on that way. This will have our smooth transition on. This is exactly what I'm gonna do right now, since we know that I can actually target the container again. Since I'm sitting within these curly braces. Aiken, target that particular container I can say, OK, if I'm hovering over this container, the image within that container should have different opacity. So I'm going to say opacity will be 0.5, and now you'll see exactly what's gonna happen. So as I'm hovering notice So this is getting darker now. We still have this black line here. That is obviously the price that is still located there. So next one outside these curly braces, so place them within the container, but not within the image, please. Okay. We were gonna target the price. Say Okay. So that price since data is always lead the class name on the class name is year, like so on for the press name, I will gonna use position. Absolute. And this is the case where you could definitely say OK, so why we're not setting up to function here, And we could we could set up the helper function, but I just don't find them quite useful as much because do you have four values here? And then there's gonna be cases where you want four. Then there's gonna be cases where you want to. So I kind of concede that then, yes, I have seen out obviously, options where people do that. So it's not like it's, you know, mind bending or anything like that. But in my guess, I don't know. I just don't really see the actual return there. Now, I know that you could look at my helper functions to say the same thing Where well, your helper functions don't make much sense either. Yeah. Yeah. You could say that I mean, innocent that they make sense to be, but maybe not to you, but you could set up absolute, especially what we're gonna be doing by placing this in the center. I could definitely see that. But again, for this project, I just chose not to do it. Please understand that we have worried done this way too many terms. So you would just need to basically get these properties and values on doing the same thing like we did with Flex. Okay, Now, in this case, I'm gonna say top will be 50% sold, won a place in the center, then left also will be 50%. Now, we're gonna set this up, like so, how are noticed? This is not exactly in the center because we would also need to move it off 50% from its own with on from its own height. That's the reason why we're gonna use transform form. And that will be translate on now instead of translating like we did with animations willing to say, minus 50% on minus 50%. So 50% up and 50% left. And now obviously, this is sitting in the center Why don't we also had some coloring? Now the color will be the name White. So set color, main white color. Let's say that. Let's see what we're gonna have. Yep. This is not main White, so I don't know what happened. So said color main White. Okay, well, this is not working with me. Figure out color said color. Okay. Interesting. Let me keep on going. And honestly, I'm gonna come back to this. So I have the color of why don't we go with letter spacing set letters? Pacing. Now, in this case, this will gonna be a function. Of course. Now, in this case, it is. Okay, so no letter spacing function. Okay, interesting people. What just happened? So we have letter spacing is not defined. Line 50 on and yeah, this, for some reason, is not accessing it. Set letter spacing with me. Make sure that I actually spelled it correctly. Yeah, this obviously should be with a capital letter. Now, I do have my letter spacing, but I would want to probably at a different value. Just say I don't know five on the reason why this is not working. Because this is a capital letter. Yeah, usually capital letters are killer for me because I like to add them. But then there's cases and times when I actually forget about them. All right? So far in size will be with cetera. Um, so again, let's use set, Bram. Now, in this case, we're gonna say what will 22. So we can go with this kind of size. So this will be bigger then also, why don't we add some padding? So going to say set Ram powering? I don't know. We can go with 10 on dykan go with I don't know. Set ram off, Let's say 33. So to bigger patterns No, why don't we also create some space in between? And I'd say that and now we should have the padding. We don't see the right now because we haven't added the border yet. So let's go with border on for the border. Why don't we right away? Go would set border instead. And that will be in this case color. So I just wanna change the color for the board with on the type who stayed the same. So said color main white. All right, now let's say that this will be our sleep are massive, massive price on then the only thing that's missing is the opacity. So I would want to change this capacity for the particle, er, place something to say. Opacity will be zero, so it will be hidden by default. But then again, we're gonna set up the hover effect. But I would want to use that transition just that we have again changed over time transition. Let's save that. This will be my transition. And now again, Still within the same curly braces where we have the image container, I would want to say as I'm hovering over image container, I would want to show the price will say price on. We'll have capacity. Oh, past city off. Let's say one group now what's gonna happen the moment we're gonna However, it this is when the price we're gonna show up. That's the only thing we're doing on. Yeah, why don't we continue? We have room in full. So right outside. Obviously this curly brace from saying room info and what we would want for the room info, we could set up some padding here. We're just gonna go very basic where we were gonna go with zero, and then I'm gonna go 16 bad things to left. 16 patting to the right and 16 planning to the bottom. I do already have my set room so I can say set Graham on. Remember, that was our default one. So we don't need to add anything. So what I can do here is just copying pays that. So the only one that's not getting any padding is obviously the top. Because this is basically gonna be from set it up from are heading for On what else? What else? What else? Well, we could go with text transform or you know what? There's actually a better way. I'm looking right now that in my final product, I do have margin or ity set up for heading four. So I could just do it like this. This is probably gonna be faster, so I'm just gonna delayed it. There's going to be right now batting all around or it should be at least all around. So batting and then we have set room. This should be the default one. And then what? For Rooming? For some reason, I'm not targeting. Yeah, because I didn't add proper class. So room in four should be like this. And now we have padding all around. And then right after the room in four, we're gonna be targeting within the room. And for this heading four. Some say heading four. Then text transform will be capitalized. So I'm gonna capitalize Text for heading for then. I wouldn't want to use any kind of margins. Margins. Women stay exactly the same, but we were gonna have a little bit off set letter spacing on. That will be just the default one. I believe it was to correct. And then what else? Well, we have our paragraph. The last one will be just paragraph where again we're going to use said letter spacing. So said letter spacing. By the way, if we would want to really, we could just move this set letter spacing and added to the room info that also would be a option. And last but not least, for the whole card. Because remember, as I'm hovering over this card noticed again, this box shutter was happening. So what I can do is for the whole card. So outside of any curly braces, so within the tag temple a literal. So now we're again talking about the whole card altogether. We wouldn't want to set up some kind off shadow. So set shadow and let's go with the light one. So that will be our basic one. Remember that Will return the box shadow noticed. Now we have a nice box shadow. I would want that change again to happen over time so we can say set transition, right. This will be our function. And now, last but not least, we're just gonna have our effect. So I'm going to say OK, so as I'm hovering over the card, why don't we actually at a different buck shadow so a little bit darker again? You can go with the dark test, but I'm just gonna go with dark. And now let's check it out on a bigger screen size, cause I think this will be better and check this out. So as I'm hovering, nothing is happening. Okay, so that's weird. Let's see the car, the buckshot. I was there, But I'm not getting anything. And the reason for that is very simple, because should be m percent, not a dollar saying my apologies, people on now everything is happening now. Of course, we are getting our box shadow and everything is working. Well now, last but not least, now I know. I know I promised this before, but in the next video, we're gonna check it out. How we can work with the grid. So, basically, what would be the shortcut? Ford agreed. 54. 22 css grid shortcut: like promised. I would like to show you how we can actually speed this up by not using the media queries. Basically, how we can set up TCS is grade without the media queries. Our Before we do that, there is one thing that I noticed where in fact, we probably should change the screen size. We're going to 100% with the moment at certain screen size. Notice that pretty much we're taking the whole screen now the fix will be very simple where , instead of the desktop going to say for the large one and by the way again, you would basically copy and paste it here within large. But since we were gonna be getting rid of these ones at least just to show this example, that's why I'm just gonna create a new one with a large Now I would also want to do that the same within the about. Remember again we were setting up for desktop, but we can just say large. Okay, that's the only thing that's going to change at the moment. So now let's notice everything should be better. We have our small layout than this will be all responsive on. The only thing that's missing is my promise. Shortcut for two CSS. Great. So how this is gonna work? Well, I'm just gonna close the vote for now, then, like I said, I don't need both of these actual media queries. So I'm gonna close the sidebar. We will going to cut the large one out, because we will. Still going to keep the larger Because, remember, large one doesn't deal. I would see it says Great. This is just for the with off this particular container. So what we can do here is just copy them or common them out. This is really up to you. How are you? Do like to do it if you just want common them. If you want to delete them, do how are you? Would please. And the short It would be very simple. No, I'm going to write this one out, and then we're gonna go property and property, and I'm gonna explain it because I think that way it will be a little bit easier. So let's start with CSS grid. So display greed would be the 1st 1 All right, so we're gonna set this up, then we're gonna go with grid grade template warms. Now that is a very, very important property. How are in this case? We're gonna go with the repeat, so the same function. And instead of one fraction or two fractions or whatever, we're gonna go with auto fit and then min max function again. Now the Min Max function will be 360 pixels. And again, I will obviously can explain everything that's happening. But let me just write it out as well as we would want. Grid Ah, column Gap column Gap We're gonna go with I don't know, 45. So let's do it here. Set Ram on and we will Just gonna go with 45 now, what's gonna happen here? Let me save that on. Let's see if I'm going to go right now to the bigger screen. Say nothing should change. Now. What happened here? What happened? Most particularly more particularly in this one line of code, because this line of code is doing the magic and maybe not the property since we already looked at the property. But this for sure is magic. Now what we're doing here is we're using the Rippey and I will going to cover off it because the opposite would be auto fill in a second. So let's just cool down our horses on this one. And in fact, let's look at the min max. So the second argument we're passing is a min Max now with in the mid max were again are passing two arguments. The 1st 1 is what would be the minimum, and I said this one up minimum to be 360 pixels. So regardless of the screen size, we're just gonna be large medium tablet this stop, whatever the minimum size of discard it was showing should be 360 pixels. No smaller than that. Now the max one will be one fraction. Well, that basically means one unit that we already compared to. So that way we don't need to repeat. We don't need to say OK, so for this screen size, the tablet screen says, go with to calm lamb because what's automatically going to happen? Ive there is more room for, let's say, two cards. Then two cars will be displayed. Unless, of course, one of the cards is less than 360 pixels. Then we're going to start new line on me, Show you how this is gonna work. So we have three cards on. Obviously, the way this works is because what is the max that we're using? We're using 1170 pixels. So if we do a bit of a math, let me come and this out so we can't actually see that. But we have 1170 pixels now. What I'm saying here with this grid column Gap is what more 45 pixels And what column? Gaps. I have one on number two, Of course. Right. So that is what that is. 90 90 So we can subtract 90 and then what's gonna happen? Well, we're gonna have 1080 now. Three times, 300 sixties. How much? I can give you a hand. This is 10 80. That's the reason if I'm gonna have one more, let's say pixel to my gaps. Notice on Li. Two of them fit right now because what I'm saying is get me a bigger gap, so there's no way we can fit three columns, 360 pixels. Even if we go with our minimum one in there. Plus this gap. So that would be a nice shortcut. Whenever you're working basically with a grid now, like I told you, I would want to show you also the other option where we have auto fit and order feel now with auto fill. What's gonna happen is that if there is not going to be enough rooms, there will still gonna be a calm. Because at the moment, if I'm just gonna go with auto fill, you'll notice the divisional difference. And you might be saying, Well, I could use the auto feel And yes, technically, you could if all the columns will gonna be filling out the spaces. However, if I'm gonna go to the rooms data and do do something like this, where now is gonna have only two comes because, remember, we only have as many columns as we have our rooms. So let's save that and let's see what we're gonna have with auto feel. Um Yep. This should be right now, too. No notice here. We still have this column. Even though we don't have data, and with auto off it, that wouldn't be the case. So now you see that I have the order feel But if we can change this toe or a fit, we will have again to calmly because we are saying the card shouldn't be less than 360 pickles. But it could grow as big as we want because we're saying we just want one unit. Remember, we're still years. The same unit one here. We just said, whatever the screen size Well, obviously starting from the tablet, whatever it is, just make it two units. Greens are so each and every card we're gonna be taking one year on. This is exactly the same thing that we're saying here. Try to fit more than 360. Picks also never go below 360 pixels. And if you can fit two cards with 360 pixels awesome. If there's more space, just make them bigger and bigger and bigger. But with auto fill, what's gonna happen? It we're gonna check. Okay, so I have two cards that 360 pixels. It obviously fits. So I could fit this empty column here as well. That would be the difference. That's why I'm using auto fit. And I were obviously using three of them like so so let me say that. Let's go back to rooms. This will be fit. Now, I do need to have to come here. Otherwise this is not gonna work on. Yeah, we're gonna save that. And this would be the shortcut where you don't need to use the media query. Now, I know in the beginning, it might be a bit of a mind bender, because you're like, looking at it. Okay, so we have one function than we're using the second function. But if you're gonna practice a little bit with it, trust me, this is not that difficult. And, as always, you can still use the media queries. It's not. It's not the end of the world that technically, this would be a one liner that can save you. How many lines of code? All right, now this should do it for the project guys. Hopefully you enjoyed it on. I'll see your next project.