Basic application layout

[00:00 - 00:10] Basic application layout. At this point we want to create a basic application layout with header, footer, and main content blocks. Let's start with the center component. It is a styled component that only does one thing.

[00:11 - 01:23] Aligns itself at the center of the page. As we want to use the styled components, install this package and types for it. Yarn add, styled, components, types, styled, components. After it's done, create a new folder, call it components, and inside of it create a new folder, center, and there create a new file, style, TS, import styled from styled components, and define the center block, expert const , center. It's going to be a styled div with max width 1000 pixels padding, 0 and 20 pixels margin, or define the media query for a smaller screen, media max width, that means that on the screens with width that is smaller than 800 pixels, we're going to set max width of our central element to 520 pixels and padding to 0, 15 pixels. Inside of the center folder, create a new file index, dot TS, and there we export everything from the style, expert everything from style.

[01:24 - 02:07] Now let's define the header component. Inside of the components, create a new folder, header, and there create a file header TSX. This component, expert const header , is going to return a container that will wrap the center component that is going to render a logo that will contain a link with ref leading to the root page that will contain the a element or link anchor saying what's next. The container and the logo will be defined in the header styles. Let's create the file for them, style TS, import styled from styled components, expert const container.

[02:08 - 02:36] It's going to be a styled header. You can copy the styles for it from the attached example. Define the logo, expert const logo, the logo is going to be styled, h1 element, and in the styles, we're going to adjust the font size and family and specify the styles for the link that's going to be inside of the logo. Go to header, import the container, and the logo, create an index file, and re-expert everything from the header, expert everything from header.

[02:37 - 02:51] If you look at the component again, you will see the link coming from the next link module. The link component enables client-side transition between routes of our application, basically between pages. Look at the structure of the link component that we've used here.

[02:52 - 03:42] There is a link where we provide the ref attribute or prop, and then inside of it, we use a regular anchor or a element to wrap the link contents. Link requires exactly one element to be passed as a child. When we are unable to pass an a element for some reason, we can use other elements or components and force the link component to pass the aircraft prop further. This will be useful later when we use styled links, for example, for the postcards. Now let's define the footer component. As with other components, create a new folder, call it footer. Inside of it, create the styles, style, TS. This component will also use a container. In this case, it's going to be based on the footer element. It needs to have text-allion center, some border top, 15 pixel padding , and 50 pixels height.

[03:43 - 04:47] Create a new file for the footer, footer, TSX. Here we import the center from the center module and the container from the styles. Define and export the footer component, export const, footer. Here we need to calculate the current year, const, current year. It's a new date that we use to get the full year. Return a container that drops a center element, inside of which we have an a element with ref. You can use whatever URL you like. I'm going to use hddps new line.co. That's going to say new line. Co and then the current year. Create an index, re-expert everything from footer and we are done. If we look at the footer component, you can see that we use an a element instead of the link component. That's because link is only used for navigation between the application routes. And if you try to use it for the links to external resources like here, when we get to another site, it will throw an error.