Bootstrap a React App With Footer, Header, and CSS Variables

[00:00 - 04:34] First steps and basic application layout. First let's inspect our future application and see what components it will have. The biggest component is the root app component that contains all the other components of our application. Inside of it, there are two more simple components, footer and logo. Those components sometimes are called dump. They're not connected to anything like third party libraries or store management. Their main goal is to render the logo and the copyright on the screen. There are also more complex components like keyboard, instrument selector and key. We will wrap those components into adapters to use either browser API or sound font. So our app will have footer, logo, keyboard with individual keys, the instrument selector and on top of all those components it will also have a bunch of adapters to communicate with different APIs. With that in mind, let's move on and generate our application. Npx, create, react app, template, typescript and name of our app react piano. cd to react piano and open it in the code editor. Open SRC, up TSX. Here we can remove all the inverts and the application layout. Instead we'll now return div that is going to be our container. Inside of it we 'll have the logo, the main block and the footer. Let's define the footer component. We'll store all our components in the components folder. Let's create it, new folder, components. Each component will have its own folder that will contain the component code, styles for it and a special file index.ts that will help us isolate the modules. So inside of the components we create another folder called footer and then inside of this folder we create footer TSX, new file, footer TSX. This component will also need the styles, new file, footer, module, CSS. Now inside of the component we 'll be able to import them. Impert, styles from footer, module, CSS. Expert, the component, expert, const, footer is a function. Here we first calculate the current year, const, current year equals new date, get, full year. And we return the layout, return footer with the link ref equals HTTPS, new line, dot seal, add a line break and then display the current year. All right, now we can specify the styles for the footer, class name equals styles footer. We'll define the footer as a class in the footer module CSS later. Go to footer module CSS and define a footer class height equals var footer height. This is a CSS variable. We'll define it in the index CSS root. And here we define two variables, footer height, 60 pixels and logo height, eight rem, go back to footer module CSS and continue with the styles padding, five pixels, text, align, center and line height, 1.4 elements. Now inside of the footer folder, let's create a new file index dot TS and there we'll just re-expert everything from the footer. Doing this will allow us to avoid the applications in the import paths. So we won't have to write import folder from components footer footer, which is a totalg and instead we'll be able to just import footer from components footer, which is much nicer. Expert everything from footer, go to up TSX and import footer from components footer. Now let's define the logo component. Inside of the components folder, create new folder logo, create the logo TSX and logo module CSS. Inside of the logo TSX import styles from logo module CSS, expert const logo component. It will be a header H1 with class name styles logo. Inside of it we'll have three spans span role, mg, area, label, metal and emoji. And then here we'll render the metal hand emoji. We can copy it because we'll need two two other emojis, one with a piano and one with the notes. Update the descriptions, musical, keyboard, emoji and musical notes emoji. We'll wrap every emoji into a span with role image attribute. It will help screen readers to correctly parse the content of our app. Then we can go to the styles and define the logo class. It will have font size 5 rem text align center line height. We take from the variable logo height same with the height attribute margin 0 and padding top 30 pixels.

[04:35 - 06:09] Create index TS index TS expert everything from logo go to up TSX and import the logo component from the components logo. Now let's define the global styles for our application. Go to index CSS and add the following block. It will switch the sizing model to border box. It will help us calculate element geometry more easily. Then create a new file app module CSS and they're define a class for the app element app mean height 100 VH. Also define the content class content offset calc var footer height plus var logo height. Here we defined an offset variable and this class content will ensure that the footer component will replace at the bottom of the page and the logo component will be at the top. So let's set the mean height calc 100 VH minus var offset display flex justify content center and align items also center. Go back to up TSX import styles from up module CSS set the outer div style class name to styles up and the inner main block class name to styles content. Let's also remake the way we expert our app instead of default. Let's use the named expert expert function up and then in the index TSX we import it as a named import. Now we can remove app CSS file test and logo. Let's try to launch the app.

[06:10 - 06:16] You should see the logo and the footer for now the main block is empty but we 'll fix it in the next