Styled components in React JS with TypeScript

we need to create a react js application with typescript for illustrating the usage of the style components step one is to generate the project files with create react app and then install the dependencies that we will use step 2 is to clean up a little bit step 3 is to set up the global styles to be configured throughout the entire application step 4 is the navbar components and the last step is the footer components both using the styled components so let's get started i am going to create react app the name of the app is going to be styled components demo and we will use the typescript template all right we are getting our files styled components is indeed very useful to expedite the developments and to make it easier to maintain the code you will not need to keep those huge css files anymore uh everything is more condensed packed the components will carry uh will contain their own styles okay we are ready um we can see the generated files over here let's create already i mean let's add already the necessary dependencies so i'm going to yarn add styled components since we are using type scripts we will also add the types for the styled components as a dev dependency let's types styled components all right so let's start now the second step which is the clean up unnecessary files generated by the create react app let's start with the public folder here i am going to delete um the two logo images and the manifest.json i could as well delete the favicon in the robots.txt but well in the index.html file i am going to remove everything from the meta tag meta description tag up to the title okay and i will write anything here on the title i'll also remove these comments okay the public folder is done let's move to the source folder here i'm going to delete basically everything except the app that tsx and the index dot tsx and maybe this inv file okay let's do delete the others perfect i have my three files over here in the source folder on the index.tsx let's remove the third line importing the index.css and let's remove everything regarding the service worker we will not be using it right next file is the app dot tsx for this file here basically we will remove everything except the first and the last lines because we are going to configure it as react components i mean react functional components okay all right now we are ready to configure the global styles the step number three and we will do so by creating a folder called styles and inside of it a file called global.ts right um in the global.ts file we will import from the styled components create global style all right export default create global style and then choose backticks because we are using template literals which is pretty cool so we can just put our global css here i will reset some rules so margin zero padding zero outline zero you can add pretty much anything you want here um okay let's add some margin 0 to the roots div okay all right also in the global styles we are going to define a background image this background image will be in the html tag i have a snippet here that i use for centering the image in the page okay we need now to download our image let's choose real quick a nice image um let's uh pick a landscape orientation which is a nice image i like this one okay let's download this image and save it to the source folder i am actually going to create another folder named assets and there i will save the image named as background.jpg okay cool i haven't i have my image there in the assets folder inside the source so i could as well as import it now let's call it background image and let's import it from the assets folder right so here you can see already that it identified so we are done with our global configuration uh of the styles i'm curious to see how it looks so let's just yarn start funny what is it okay here it is um all right now um i think we should move to the app let's just type in h1 here hello okay it's working ah nice so what we are going to do here first off first off um we will need to include the global style that we have just created so we import the global style from stylus global okay looks good um well we need now to create our two components so let's create um another folder here called components inside the components folder i will create another folder called navbar and inside the knife the navbar folder i will create a file called index dot tsx all right also in the navbar folder in the same level of the index i will create a file named stylus dot dsx goods so for my index.tsx we can start by importing react and let's write a component of type reactive c export defaults navbar okay export default nav bar here um okay and let's configure the wait what's wrong okay much better uh so um yes let's take a look on these styles on the styles i'm going to start by importing these styles from styles components imports okay and um what we're gonna do we are going to export host container we are going to create a container that will actually render a div right and for now let's leave it like that for now we're going to import it already here imports container from styles so this is going to be the skeleton of our components they will always um be accompanied of their styles by their styles we can as well copy this and duplicate okay so we have enough bar enough bar copy and we're going to remove the nav bar copy filter so i have my navbar component with the index and the stylus and i have my footer with the index and the stylus i have to rename here okay so let's start by the by this component over here the container um i can already edits here although there's no styles but let's add the container the container will so let's just decide real quick what them what we're gonna do we're gonna add the container then we're going to add some a logo right here and then um i'm gonna put it already logo then you're gonna try the menu with the menu items okay so logo and menu we don't have that yet let's just create it this is the navbar that's the nav bar so let's create the logo in the menu logo menu you'll see that the errors are gone um so for the logo for the container let's start by display flex here i can just put my my css so basically what's going to do what's going to happen is that uh here instead of container will actually have a div so for the low one for the menu is the same you see div if i wanted to the logo to be a span for example i just put it here when it renders here it would be a spam okay so the container is going to be a flex display flex and justify content space between [Music] align items center heights you know 70 pixels maybe and color let's put it where is our background image um oh yeah i haven't i included it but i'm not using it so let's um let's set it over here go to style okay our background's there and our this we don't need however we what we can add here is already the nav bar and the filter because we already created them so to the app that's dsx let's add now let's import the nav bar from components mouth bar and let's import the footer as well and let's just add the navbar and the filter to the app.dsx okay so there in our components on the index um i think we can add our logo to start with okay for the menu we actually need some menu items menu item let's add a couple of pages about and contacts so let's add the menu item and let's create a new item here okay um well for the logo what is this as an exported member menu item menu item menu item yeah sometimes uh you can have a little issue it's a bit slow well i can see now my header there just for you to to actually visualize it i'm going to add a background color so this is my first component the header um the logo needs to be a bit bigger let's make the logo a bit bigger maybe also some margin 30 pixels okay ends font size 1.5 and let's have pixel zoom 1.3 okay um now let's style the menu and for that those guys over here i am going actually to start putting these backgrounds over here look that's the menu it needs to be also maybe display flex and justify contents like send okay and finally the menu item i'm going to put some margin 30 pixels as well good and different size one let's get rid of the gray background ah good we have finished so this is our first component the nav bar is concluded okay let's move to the second component now which is the footer so for the footer what can we can we add here maybe the container already and then filter navigation we don't have those things yet and we are going to create a few food with those styles so footer nav item just to follow and then we are going to add terms and conditions page and maybe uh [Music] i don't know a privacy or whatever just for the example okay um now let's import that from the footer i mean from the styles the footer nav and the filter nav item okay great you can see there are errors here because they are not created yet let's create them let's create them [Music] right yeah right okay um [Music] let's let's style it so here i want i would have fixed a fixed footer right let's set um a height fifth let's set 70 same as the other one you can change it later it's not goods in the color the same f1 f1 f1 okay my apologies and a width of a hundred percent okay let's take a look backgrounds color gray just to see voila that's my footer um yeah this should go to the end as well so the footer nav let's do the same thing basically we are going to display flex and justify contents to the ends okay great now the last one we are going to add some margin on the top and a margin here between the um the items um so margin 30 pixels to the top 30 pixels to the right zero zero and um let's take a look yeah font size one em perfect let's get rid of the backgrounds alright okay so um we are finished as you can see our components are here we have configured then the global styles resetting some css properties and adding the background image we have then created the two components navbar and footer they have the component code but also these styles packed into the same things the same place the same package if you will so this is a much better way at least i found a much better and productive way to to style your components much easier to to maintain alright that's it you

Channel: dthlabs

Views: 4,073

Keywords: React JS, TypeScript, Styled components, Front-end

Id: yb4sYus8_V0

Length: 26min 31sec (1591 seconds)

Published: Sat Sep 26 2020