React Masterclass - For people who want to work in big firms or create complex front-ends. | Alex Matei | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

React Masterclass - For people who want to work in big firms or create complex front-ends.

teacher avatar Alex Matei

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

35 Lessons (14h 8m)
    • 1. Introduction

      6:58
    • 2. Understanding React - Vanilla JS vs React

      8:14
    • 3. Understanding React - State and Props

      10:10
    • 4. Understanding React - Nodejs

      47:15
    • 5. Env Setup & Libraries - Generating the app & Migrating to Typescript

      7:07
    • 6. Env Setup & Libraries - Adding Dev Libraries

      10:42
    • 7. Env Setup & Libraries - Folder Structure

      5:57
    • 8. Dev Setup - Atomic Pattern

      3:51
    • 9. Dev Setup - SCSS & BEM

      33:28
    • 10. Dev Setup - .env & GIT

      8:58
    • 11. Routing the app

      15:48
    • 12. Layout - Interface

      27:47
    • 13. Layout - Navigation

      45:50
    • 14. Layout - Footer & Icons

      35:06
    • 15. How the Web Works

      8:44
    • 16. Page 1 - About Me Page

      24:41
    • 17. Page 1 - About Me Modal

      28:50
    • 18. Page 2 - Blog Page

      52:26
    • 19. Page 2 - Axios

      31:53
    • 20. Page 2 - Twitter API

      10:31
    • 21. Page 2 - Rendering Data

      36:31
    • 22. Page 2 - Blog Post

      82:00
    • 23. Page 3 - Contact Page

      56:49
    • 24. Additional - Loading Bars

      24:53
    • 25. Additional - Catching Errors

      33:01
    • 26. Admin - Authentication Theory

      11:02
    • 27. Admin - Login Page

      27:44
    • 28. Admin - Axios-Token Configuration

      8:11
    • 29. Admin - React Context

      30:14
    • 30. Admin - Router Generator

      18:29
    • 31. Admin - Add Post Page

      53:30
    • 32. Admin - Edit Post

      28:25
    • 33. Individual Work - Switching Languages

      6:11
    • 34. Building the app

      4:35
    • 35. React Work Experience

      2:12
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

97

Students

--

Projects

About This Class

Hi, I am Alex and this is React Masterclass.

If you want to write react apps like pros do, like people in big corporations, not just writing code for the sake of writing code, if you want to master react or if you never tried react but want to learn it then you're in the right place.

We will structure the app we are going to build as if it's a corporate project with all the tools, practices, and features for building a serious user interface. Why am I so convinced that it's the right place? That's because I will tackle react, and explain it to you in simple ways but I'm not going to give you just everything in a nutshell, no no... we are going to go deep into every aspect of React so after you finish this course you'll have a good understanding of how to build react application that you can apply for a job or an internship, although I would say that an internship will not give you more information compared to what this masterclass has to offer.

Also, we will build a relatively small personal website so after you finish you will have a personal website that you can put out there and people can visit.

I made this course as complete as I could but I did not overload it with repetitive information but I try to give you everything you need to know in order to build with react as a professionals do.

This course is for everyone, If you are experienced at React, you will learn new things for sure, but if you’re new to react, then you have a lot to learn, and here you have everything you need to know, from the fundamentals, the inner workings to how to make a production frontend that has everything.

This masterclass has everything you need to know to work as a react engineer in a company. Oh, and by the way, at the end of the course I will tell you how is it to work in a company as a react engineer.

Quick note. This masterclass assumes you already know javascript at least at a basic level. The ideal is if you have built a website with HTML, CSS and Javascript before

Ok, now, let me show briefly the roadmap ahead. You can look at them like chapters. A chapter may or may not have more than one lesson.

  • We are going to understand react, how does it work so you will have a good foundation before going further.
  • We'll create the environment setup, by that I mean the code editor, I will explain to you everything you need to know about it and we will also install all the fundamental libraries that you need to have in your application. The same libraries that most of the companies use in developing react applications, like Eslint, Husky and Prettier.
  • Then we will create the main project structure with Atomic Design Pattern and we will create the base Scss files that we will need to develop our app further and we'll discuss typescript because this app will not be built with javascript but with typescript.
  • We will create a router for our app so that each page has a route in the browser.
  • We will create the layout base with the navigation to go from one page to another. 
  • We will talk about how the web works, the websites, front-end and backend, we'll discuss API's and requests.
  • We will create the first page of the website. The "about me" page.
  • Then we'll create the second page which is Blog. This page will also have an admin view so the admin can edit, delete and create posts.
  • We will create the Contact page, which will collect data from a form and send it to the backend.
  • After all the pages are done we will add to them error catching in case the backend gives errors and we will use loading bars to show when the content hasn't arrived from the backend.
  • Next, we will create user authentification and verification with axios, cookies and react context.
  • We will go over creating two languages for our interface, so you can switch between them.
  • After we have done it all we will deploy our application and we will wrap everything up.
  • Lastly, I will tell you how is it to work in a company as a react engineer so you can have a reference point.

So, for those of you who will start the course - good luck and I hope you have the best educational experience.

Meet Your Teacher

Teacher Profile Image

Alex Matei

Teacher

Hi, I'm Alex, an analytical but creative person. I started to program and design when I was young by pure coincidence ( I was mainly driven by curiosity :) ). Fell in love with programming & design and I have improved my skills day by day. I have worked for several companies as a Designer and as a Software Engineer, moreover, I have also been a Freelancer. In addition to this, I studied Informatics at college because that's what I was passionate about and now I am grateful to pass on what I have learned over these years.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction: Hi guys and welcome to react masterclass. If you wanted to create a React applications like pros do, like people in B-Corporations, not just writing code for the sake of writing code. If you want to master react, or if you've never tried react. But once you learned, then you're in the right place. We will charge on the upper we are going to build as if it's a corporate project with all the tools, practices, and features for building a serious user interface. This course we'll talk called React and explaining to you in simple ways. But I'm not going to give you everything in a nutshell. Now. Now we are going to go deep into every aspect of react. So after you finish this course, you will have such a good understanding of how to build applications that you can apply for a job or an internship. Although I will say that an internship will not give you more information compared to what this masterclass has to offer. Also, we will build a relatively small personal website. So after you finish, you will have a personal website that you can put it out there. And people can visit amid this course as concrete as I could, but not to overload it with repetitive information, but also to give you everything you need to know in order to build with React like professionals do. Now, I have to admit there are many teachers on the Internet that explain the workings of react pretty well and that have well-structured courses. But most of them lack critical information that you need. I say that because I know the problems I faced when I started, I had so many questions about how things worked and how to do this or that. And each course I took thought mean the same thing, different thing in a completely different fashion. So I was confused. So this is the course I wanted to have when I started. I will go through everything from basic to advanced. This course is for everyone. If you are experienced a three-act, you, we're learning new things for sharp. If you are new to react, the New have a lot to learn. In here. You have everything you need to know from the fundamentals to the inner workings to how to make a production frontend that has everything. And just to give you an overview, we will do a lot of things. We will upload the files. We will create the admin side of a website. You can add detail, the content the website shows. We will do user authentication and the login. You understand a CSS framework like PSS and SSS methodologies like bam, you will learn what is atomic pattern in y to organize your application based on this methodology, we are going to get our tweets from our Twitter profiles. We will work with an API that I build. So we can practice working with a back-end and a database to get data from it. We will also discuss about package managers like npm MDR1. We will use React Context for global state management that is an alternative to redox. I will teach you how to use good to work with multiple people at the same project. We will configure our project for the best development experience. And on top of that, I will explain how things work in a theoretical manner and width code so that you understand it in full. So you see before going further, you must understand that this is a very broad and in-depth course. So it can even take it as a challenge. And before starting, I should warn you that if you are a new to react, it's going to be either lot to digest. But believe me, it's worth it. And I need your full commitment. Oh, and by the way, at the end of the course, I will tell you how is it to work in a company as he react engineer week North, this masterclass assumes that you already know JavaScript at a basic level. The ideal is if you have built websites with HTML, CSS, and JavaScript before. Okay, now let me show you briefly the roadmap ahead. You can look at them like chapters. Chapter may or may not have more than one lesson. So first and foremost, we are going to understand react. How does it work? So you will have a good foundation before going further. Then we will create the environment setup. By that I mean the code editor. I will explain to you everything you need to know about it. And we will also install all the fundamentals libraries that you need to have in your application. The same libraries that most of companies use in developing React applications like ES lint, Husky and prettier. And then we will create the main project structure with atomic design pattern. And we will create the basic a CSS files we will need in order to develop our app further. And we will discuss about TypeScript because this apple will not be built within JavaScript, but with TypeScript, we will create a router for our app so that each page has a route in the browser. We will create the layout and base with the navigation to go from one page to another. Then I'm going to explain to you how the web works. The websites front-end and back-end, we will discuss about APIs and requests. We will create the first page of the website, the about me page. Then we will create in second page, which is the blog page. This page, you will also have an admin view. So the admin can edit, delete, or create posts. After this, we will create the contact page, which will collect data from a form and send it to a backend. After all the pages are done, we will add to them error catching in case the back-end gives errors. And we will also use loading bars to show when the content hasn't arrived from the backend. Next, we will create a user authentication and verification with axes, cookies, and react contexts. We will go over creating two languages for our interface. So you can switch between them. After we have done it all, we will build our application and we will wrap everything up. And lastly, I will tell you how is it to work in a company as a React engineer, silica have a reference point. So without any further ado, get ready guys, because it's going to be quite a Jordan. And for those of you who are up for the challenge, I will see you in the first lesson. Good luck guys. 2. Understanding React - Vanilla JS vs React: All right, so before we start, I have to note that you should have at least a basic level, often JavaScript or if you don't know, if you know an, an under language visual field things out. Html and CSS is also required. Basic CSS and HTML that AP tests that meat medium level. You might have a hard time understanding the concepts if you don't have the foundations. But if you're really confident in yourself, go ahead. You can take it as a challenge. I will try to make things as simple as possible. So React is referred to as a framework, but it's actually a library that helps you, helps people build front-end faster. People, use it in our framework ways for that. So I often hear people refer to it as a framework, but it's actually our library. So let's first see how you would be at our website old school with HTML, CSS, and JavaScript. And then we will add to react. So you will understand how it feeds and why it's so, why it's so effective. So in a classical, classical way of developing a website, you would have an HTML file that represents the page you want to code. And then you would have the JavaScript that attaches to it so it can work with what its content. I have here an example of a, of a div blog that has a class called L. And after that, we use the standard JavaScript come on, document.getElementById class name. You should be familiar with that. And we specify the class. And now the DV is inevitable. I basically, now what you can do, you can do whatever you want with it. And I and I worked, my name is Alex. Alright, just basic stuff. You can use the Ukrainian state of white now JavaScript, but in essence is the same thing with the jQuery. You use the right Codename, fewer lines, generally more intuitive. Now, imagine you build our whole platform with a bunch of things that appear and disappear. Dennett dynamically, with this approach, it's hard, not impossible of course, but hard and time-consuming. You would literally have a bunch of files with long, long, long JavaScript code that is hard or it's hard to understand them. Especially if you do, if you did not build the project yourself, but you are asked to improve it. My recommendation is that if you have a small with a small website or a website that does not have much dynamic content here and there, like a simple landing page, you can go with the classical approach. But, but for everything that is north that you need a better approach. And he wrecked combs and saves that they are Act has a different approach for building user interfaces. I'm interested to make you understand the, what Truax beings brings to the table, why anyone uses it. And you got to understand that if you have a good grasp of the fundamentals, ideas, and concepts, then you will understand the details just like that. Let me just show you, show you this drawing. You can have a better understanding. Alright? Alright, so first of all, or act consists of only one page and just the one HTML. But you will never have more. These pages used to show anything that we want. And what we want to show is managed by ranked from the JavaScript files. The HTML file that holds all our app is called index.HTML. The always will be called the lag data. If you change it, the app will break. It looks like that we have here is just a div with the id called the root. And that's it. No more, no less. Then you have the most important JavaScript file, which is our entry point. This is where our upstarts. This is the file that is imported into index.HTML and puts, puts into the root d over there content of what we wanted to show. This file is called index.js x. And it has within it a function called the render, which is the standard function imported from the react reactor dome. Remember, practice our library that we hypothetically installed so we can import things from it. The first thing are, the first argument that this function receives is a reactor 1, which I will show you in a second what that means. And the second argument is the HTML element that we want to insert our React component into. So this is the elements from index, index HTML. Remember, show what the render function is just to introduce within this HTML file. This React components which are, which I'll show you in a second what that means. Now. What direct on polities? Here comes a difference between classical Java and JavaScript in the React, a direct component is a function that returns HTML code. So just let me repeat that. Erupt component is a function that returns HTML code. It has an extension called JSX when you write with JavaScript and the ASX, TSX when you write with TypeScript. And JSX is just the same JavaScript dot, dot js. But it's a more defined by the bioreactor so that it can support everything reactor needs. You know, like functions, tuning plain JavaScript, which is a regular JavaScript, cannot do. See we have about me pitch. Then this page is a component. Just let me zoom in a bit. Okay, it looks like this. Now we can hypothetically have another page which is, for example, contact page. That's also a component. The whole act is based on components. I want boring to hear a component there, and that's what the user sees. The pigeon of the body is also a component. And we can have a component for everything. All follow like a list of photos for big forms with lots of inputs and a solid components are just, are just pieces of HTML that are somewhat independent. It's JavaScript and donate them. I think a good idea. And managing behind all of this that we can import components within each other. So the Navbar component can be imported into our body page so that we can go on it. We should saw that when we go on it too, we would have a navbar on that page. I don't know why I wrote this to life. All right, So basically this quote goes into the about JSX when the whole thing is compiled. So that means that we can have components within components within components. If you haven't understood yet, just bear with me, I promise it will make sense in the following videos. This is the general concept of React. You can call it an overview, a holistic view from the top. In the next videos, I will show you the next two pieces that make up React framework, which is state and props. See you then. 3. Understanding React - State and Props: Hi, In this lesson we are going to get state and props. This, you are the elements that make up react what it is. I'm, I'm going to explain to you these two with its own function components. And in the next lesson, we're going to do the same thing on an actual direct project from scratch. So we know that, we know by now that direct components are functions that are donated to them. Well, now here the state comes in. You can find the main explanations on the Internet of all cities, but most of them are not. What do I say it really clear and I, in my opinion. So state is a variable in your function that holds all the metadata. We'll be changed over time, such as lists, list of photos, values of inputs or forms and so on. Direct component the re-renders itself when you change any value in state. So say you have a value called the name in-state. We see your name and your name is shown on the screen right. Now when you change the value of name from, from state 2, for example, your pet's name. The component will have hearing from the top to bottom again. And so after that, you will see, you will not see your name on the screen, but your pet snake. So let's look at a real example. So again, you can have a better understand. Let's see, we have a react component called the navbar JSX. It's a navbar. Hypothetically, it sits somewhere in our folder directory and it returns these HTML. Now that's, that's pretty static. It doesn't change much. Now when we add state, you can look at the picture on the right. So before explaining how we added state, do you need to know that there are two ways of declaring components. The first one is by, by function and the second one is by class component. People use both of them. But I've seen so many applications written entirely with the functional components are classes were used awfully often before, but since the early so fact hooks in 2018, I think function components become more and more used. I will not get into their books subject because it's not relevant right now. But essentially React Hooks are a set of methods that give the ability to react components to help state, and a bunch of other things that functions could not, could undo before. So the whole purpose is to make what clearer, cleaner, and better. So you've seen that, that this fundament component can have a state variable. It could not do that before you recruit in 2018. Warning class one points could have had state, so that's an improvement right there. Now let's look at this example. So this fashion component is discount bond, but we state now we have got a variable called title. Within our outer function component in we can do whatever we want with it. And we can put it in the HTML as being, that is being written this way. So with curly brackets and with their variable within a USE often these curly brackets, what it essentially does is to give us the ability to write JavaScript code right, between HTML lines. We can do a console log for example here. Anyway, we'll go over these, those later in the course. So the component is being rendered. Html is being shown to the screen end instead of curly brackets and verbal, you will see on the screen written DC's title. Now below this title, you will see on the screen a button as well into component I wrote with the onclick attribute, an inline function that calls the setItem function. This set iter function changes the value from title, the variable that we have above our state. And we sent as a parameter to this function a new title. More exactly, I wrote. This is the second type. Now on the screen. Now would one on browser, of course, I would press on this button and the value of, of, of, of tightrope would change instantly. And as I told you before, because we win state changes, the theory renders itself and the whole thing we would see on the screen instantly I knew title instead of the older one. I hope you caught that. If not, just bear with me to the next lesson where I will write actual code. That does this and you will see, you will see this in practice. Now let's look at the same thing, but for a class component juice, just for the sake of knowing here US state doesn't exist it and by the way, you say it is what I called earlier a hook. So here are used, it doesn't exist. The boots, you can specify state this week with a variable called state. And you have within it an object, and here you hold all your values that you need. You just write the variable state, then that's it. In this object, you can have oldest states that you need the 14 title, for example, one for the name, one for date to 14, at least whatever. It all, it all stays in the same object called as I had totally cold state. Whereas enough in the function compliant above, you need to use date for each different state value. You need a new component. Okay, So for stating classes, you wouldn't refer to it as this dot state dot cyto. Compared to just title in the function, functional component. You say title here, the hill the same, the same variable. This dot state, dot title is the, is the state because it's our class and we refer to it as this dot state because it's across any you would change what the object continues by calling this dot set state, which is a Stanton rect function. It is in your component because we extended it from a component, which is another class that gives us the m basically in enriches our component to it functionality. But anyway, we're going to stick to the front function components. Good. Let's now talk about props. But remember I told you that we can use components within components within components. So just like a regular HTML tags, well, probes are the way that a ballroom component, apparent component since the data to a child components. So I have a half here and example, supposedly we have the rectum point and that is going to be our about page. We didn't eat. We have a Navbar component whose called the lies here. And another file in and not direct component. And the about page component is a parent for the Navbar component because it contains it. And then Navbar component is a child for the About page. Okay. Now say About page is show to the screen in the browser. We want that in eats navbar to be written the paging. So we can send to the Navbar component a value that we want. And we do that by specifying the prompts. A prop is a value sent to this component. So we specify the prop called title and the value we want to send. So are you all here title. And as I wrote about me, so the navbar components get, gets this, this value with probes in a variable called title. Then in the Navbar component, we have to retrieve this information. We do that by writing here in the argument props. And this object will hold all our props. Now, to write to the screen the title the company received. We just write props dot, dot title Angola. When, when this component is rendered to your screen. Instead of curly brackets M and proper title, there'll be just use the value that we send to props. So it will be overwritten about me here. Now, don't worry if you can't see the connections yet. In the next lesson, we're going to talk about NodeJS in the environment in which we build with an locked in there our make a simple app that shows exactly how they react to works and how state and props work together. 4. Understanding React - Nodejs: Hi, and welcome to the Node.JS lesson. In this lesson where I'm going to talk about NodeJS. And we will integrate everything together, state and props. So you will see everything we talked about in action. So we have to start with NodeJS. Nodejs is what is called a runtime environment. That means such that. So you can see the logo. It's what makes your computer run JavaScript in Europe called editor. So JavaScript is only understood by the browser because it's a language that had been built for the browser. So you can't, you can't run it like any other language in your code editor. So it goes like this. Say you make a request to google.com. Google responds back and sends you a sensor, HTML, CSS, and JavaScript that are needed for the website to work. And your, what your browser sees that it has received dot js files and says like, hey, I can read this and read them inside them and executes it. Only browsers could do that and have NodeJS comes into play. They thought JavaScript can do everything that other languages can. Why not make it so that you can build with the JavaScript whatever we want outside of the browser, like, like any other language and NodeJS was worth. Seemed notice is I is a environment that gives you the ability to run and compile JavaScript in your computer. You can build front-ends, backends and anything in-between with JavaScript. With the help of Node.JS. This looks like an ocean with projects, let's say it has some differences than the regular JavaScript, like in a regular JSC you would import are the GIS files in your current js file with the require function. But in Node.JS, you do do that with import. It's only thought that big the infest, but just let it react also, also runs in Node.JS Aldo you can write, you can write react with DDL script tags in your HTML file, but not use, not use Node.JS completely. But no one does that. So now let's go ahead and install NodeJS, react and create a small app just to show you how everything we talked about works together. Let's go on Google and type NodeJS. As a type story, you can download it will be at two ways. You can download it as a, as a usual app for your operating system like Windows or Mac OS. And you can install it via the package manager. Yeah. There there are different operating systems you choose yours. For me, I have macOS, so I would I would install it with curl and then brew install not for Windows. It's almost the same, which seems or scoop. And it should be, it should install it without any problems. Okay. Now next we're going to need Create React app. Let's install it and then we'll talk what, what it does. You will usually use it to it AMPS. So what it does, basically it generates you a default React up so that you, you, you should not, you would not create each file on your own because that's just paid. Let's go in our code editor and use this command to curate our hour Up glute. And let's go ahead and go into desktop. And we can write x up in peaks. Abx comes with NodeJS, so you should install firstly NodeJS. And NodeJS he has MPM, which is another package manager and it has a bigs with it. So you can, after you install NodeJS, You can use the Create React app, C-like quit director up. And then we will specify its name. We will say taste. It will probably take a was installed, I think a one to two means depending on the internet. So I'm going to pause until it's done. All right, it has been installed. Let's, let's now just jumping right into our folder. It's on desktop. It distracted, it's okay. Open the folder in here shouldn't be our our React app generated by crater that up. So let me walk you through each file, what of what had been generated so Q0, so you can understand everything. So the most important file here is packaged JSON file. A run or js app has this file. Basically, whatever you build an app folder that has this file is a NodeJS app, whether it's a racked up Express app or anything in between. It has been generated by a creditor act up, but you can choose to create every file from scratch. You would start with with a command line command, command in terminal called NodeJS in it, and that will generate you a package JSON and JS would understand that these folder is supposed to be a NodeJS up. So it's the starting file for your NodeJS app which is React, which we use React for this app. Now what it contains, it contains a list of configurations, commands, and list of libraries that you, your app will use. Those the name package.json. So we'll look, let's look at each line. The first one is the name of the app that we specified. We can change this name to anything that we want. The second line is the version of the app. It's also we can specify any, any version that we want. Next, privates should be set to true. Only when you build a library that, that is going to be published, then private should be false, and then Dependencies. Dependencies are the least of libraries that you will use in your app where there's your advocate, all the libraries that's from NPM or not. So the library, the library, these are basically out there on the Internet. And to install them, we use NPM or Yarn, which are package managers. So if you don't know what a package manager is, it's basically a, a wizard that basically seats in your CLI, in your terminal N and pose the package from the Internet and D installs it in your app. And just for the lack of a better example. So the libraries are basically out there on the internet thing to install them with MPM Marianne which had to pick IT manager, managers. Npm comes pre-installed with NodeJS and BM finds libraries on its archive and installs it in your app. So for example, we want use library that helps us work with dates. Let's, let's let me show you an example. So we wouldn't use a library that works with the, So we will not use the standard new date object that JavaScript gives us, but we want to use a library that makes it easier and more convenient for us. It's all, for example, we want to install the library, the Jess. So, so what you look for is the MPM website. It has all these libraries within each are HIV and we can install it, installed them from it. So it says we can install it with npm I, DDGS. What npm install? It's the same thing. So let's copy this, go in our app. Open the terminal here. Here. So we suppose is supposedly once installed these DJs up, they just library that we're going to use. We would, we would write a dangerous what npm install digits. They both work fine. If you installed for the first time NodeJS new computer, you might not have the yarn installed. So you can go ahead and Google and search how you install the yarn. It's a bit faster then MPM, but the, they both work just fine. Just for the sake of the example, we're going to use npm, I guess. So what it does is go, it goes on the internet, it entrenches this library and it installs it in our app. And voila, they just has appeared in our dependency tree. Now. Now we can use this library in our React app. And the code of this library is seats or stays in your annual not the modules folder, folder. This folder contains all the code or your libraries. And this folder can have more than one gigabyte of libraries. So that's why we don't move our app along with this folder. When we upload our app on the top, it doesn't upload, not martyred because we specified it not to do so in gitignore. This inspiring about here, these are the files or folders that you will not upload. So issue don't if you don't know what Git is, we are going to talk about it later. So as I said so as I said, the court doesn't come along with this folder. And if, for example, you don't want download a racked up somewhere. And once you add code to it, it would firstly need to add this folder with all the modules. And you do that with npm install or the, or simply r. Let me, let me simulate it for you. We're going to use yarn for this example. So what we're going to do, we're going to delete this folder. Like you would have a new download, an app from the Internet and 12 to add code to it. So it will not have, not just more, not just modules folder. And you would go npm installed, enter or simply yard. And if you have young installed on your computer, of course. And it's going to take awhile until it, the Dolan's all the libraries because there's a lot of libraries. So I'm going to pause until it's done. And gold now it's learn. If you are not just, not just more JAR Folder does, doesn't, didn't appear, appear here. Just go ahead and press Command Shift B and C, The load. It ought enter the first time. Sometimes we ask what will not show when it appears. I figured just about mood. Next we have got here scripts. These scripts are commands that you will use to start your app, built or tested. What is written here is going, is going to be executed in terminal. So for example, if we wanted to start, our UPI would write AR start or npm run start. And it will, it will go in your packages only to see that start meaning means that it shouldn't do script start. And this command could be wrong in terminal to start your app. And what you see below our newest configurations for some libraries that helps us in development more in the book, that's not important right now, we will go back here in where we'll start our personal website. And we will need some packages, the socket, that's it for the package JSON. And by the way, package JSON, package Lakota JSON is ultimately generate for n operations where in PMI defines either not the modules tree, what beggars JSON and it is described as the exact tree that was generated, such as the search that subsequently stores are able to generate identical trees regardless of intermediate dependencies, updates. And please far these intended to become committed to the source repository and serves various purposes. And the outer block is just the same thing. What is for your README file is contained just instructions. You can write whatever you want here. Now, let's go to the public folder. Remember I sold with that, react has a one-to-one estimator file and delta JavaScripts. Javascript play plays around with its content. Well, this is, this is that HTML index HTML new. When everything is built it, this is the file that browsers browser opens. It has only one div with the id of root, and that's how it does, how it will remain. Javascript selects this div and prices they appointed within it. And that's, that's basically your website. The rest of the files here are not just important in public. There's interest or logo that appears and disappears when you open the app and you would, you will usually add in this folder things that are public and accessible from anywhere. We will leave it there. We'll delete these files and later. Now this you'll see a folder is where the magic happens. This is where we write to what our app will do. So let's look at this, look at them one by one. The most important file here is, is index.js, because it's called Index. It's picked by the browser as the default. So that's why, that's why it works. So if you change its name, the app will break. Remember when I showed you the schema of React, I'm going to, I'm going to put a picture right here. There is the index.js file, that is the entry point of our app. It weddings everything we have built with JavaScript and pushes it all in the div element with the ID of fruit in the index.HTML from public. So these are just imports. This is how we will import files and libraries. Here we need to import React library, interact, DOM. And it has this function called render function, which does the rendering. For us. This function is new. I think there are guides from React added recently because until now there was a service worker function. Instead of this. I read about above it on the Internet and from what I remember, it helps Google with some metrics. And I'm not quite sure, but I will not touch it. We will just just let it be. Now work stick mode. One argument of the render function is a total for high highlighting potential problems in your, in a application. It's like a, it's like a component, but it doesn't show anything to the screen. We will not use it. In fact, we can delete it in just that. The app component within. You can just be attentive to not delete the comma here. So again, what this function does, it basically takes this React component, which is a HTML, HTML code. It will look, we will look into it later. And what it does, it basically pushes it into the document getElementByID by DO fruit, which stays in public, index.html, this div. All right, So it basically pushes it HTML folder. Okay, let's go back and adjust. And now the name, the index CSS. The CSS from right here is just globe orthosis that will be applied to the root element in the index HTML. Now, the app component is what we talked to be a component and interact component. It's the first in one component that there is in the subrogation is we talked components are functions that return HTML, right? Like so. And that's the only component we have. So it's index.js. Take, takes it takes that HTML codeine and pushed it to route ID. Now, let's start our absolute, you can see this inaction on one cleared the terminal npm run start. It should start an application on port 3000. Now, yeah, you can see that the content here is the co-executive seen in the browser. You guessed it, the text is the same. Now I'm going to write here hello In this event, delete the CSS file because we don't need them. And also the logo as well. And this is just this is just a default before that gives us, but we will not use this fight. Ever. Like we got it. Everything there is to amp up also does not exist anymore. And let's get abscesses, which is the CSS that is being applied to the app.js. But since we don't use CSS here, we also don't use, don't need this anymore. And the lower ISO. Okay, Now the file with test R5 is that just, I just test functions and components, but we will not dive into tasting in this course. So once you understand the React or k, you can add a tasting then, you know, like, like the children the top of the cake. We're going to delete these files now. We do not need them. We're going to we're going to live report to a web of vitals here for now. After that, we're going to we're going to put it in another folder, but for now it's okay like this. Okay, so what's left here? We can delete this. Because XD and you think and delete the objects altogether. So that's the technical component that's being pushed to the divert. Okay, now, let's create some components and use Theta and props, which we talked about in the previous lessons. So I'm going to make a folder called components just to, just to keep it clean. And I'm going to make a folder called called Contact page. Page and a component called the counter page dot JSX. This is our component. Okay? All right, I'm going to create our function. And exported leaves our exported podcast, what I'll call it counter page. Okay? And by the way, this is a, this is a inline function, but you can make it a regular function if you want. I prefer this way. And we're going to return a simple div for now. Leave with something here. Now, let's create a CSS file for this component in the same folder. And we're going to call it as well counter page. But you got me CSS. And I'm going to make up a class called counter content amazon. Now let's give it a height of 100 pixels and a width of a 100 and 500 pixel. Okay, and we're gonna get our border. And that's it. One pixel solid black. Or does it? I haven't saved. Okay. This is the CSS. This is the component. We need to import the CSS here. Don't forget that report. This is the path, by the way, like the same folder slash counter, counter page dot C. Great. So, so basically this component can have access to the CSS. So what we have left to do is say class name. Now conduct which counter container. Okay, Why class the middle class, because class is a keyword that has been, I've been taken by react because you can, you can create a class like this class. So that, so the keyword this is occupied. Now sees that this is the component we want to show to the screen. We need to put it in or to export it in the index.js right here. Let me save this. So instead of this div that we push into the div, we're going to say counter page is a component. This is a self-closing tags. So is that instead of doing like this counter page, which is basically the same thing, we can do this because the, this component does not receive any children, so we don't overwrite anything in it. So we also need to import it. Import counter page from components, contact page, content, folder, folder folder, component, GSS file. And it was being imported and we can use it. Okay, let's save this. Let's go into the browser and see what wallah. All right, so that's what we have written end of file and check this out. Inspect Element wrote that that route, the div that I told you. With the need for law, there is data you from the counter which component with exactly what we have, what we have broken. So we're back. Well, for example, it's a quick Save. It should reload. And you see now in c squared, exactly what we would call it. Okay, Good. All right, so let's go over it one more time so that I know you got it. So does the main file over our racked up. This is a function from React DOM that we imported. We have installed like dome in our NodeJS operates. This function takes a component that shows to a screen and puts it in the root div in this, where is it? And this index.html in this. And that's it. All right, so now we were gonna do another, another component. We're going to call it counter. Okay? And then we will do the same thing. We're going to call it a component called counter dot js X export const the name of the component router. Function. Daughter with these counter for example. Okay, and let's create a CSS for it. Counter that CSS. We're going to create a class called counter when the width of a 100 percent and the height of a 100 percent. And let's give it that text-align of center. Right. Now let's important this CSS into our component. So import, import from this folder counter dot CSS. Now we have access to the to-do's, those classes. So lastName will give unprecedented this deep and recall the code that counter. Right, So this, okay. And also let's import this. So let's import this counter component in the counter page. Which counter page is going to be the parent and this is going to be the children. So the child and counter. Okay. It's important. Important like any other component, import Counter from the two dots are to go back. I think you know that. So go back one folder counter, then counter. Great. Save. It should work. Now let's look into our website. So the basis accounting. And let's look at the here. So the main, the main domain, the parent component, which is, you remember the glass counter container and the child combined with the class of container and the texts that we have Roth here head, this is content. So, so again, this is a parent which is being pushed into, into the index here. In IIT has a child which is this component. Counter cold. Or two, we're going to close the CSA who don't need that. So the dead-on bothers. Okay. Okay. So what we're going to do is make a counter. I think you already guessed it. So let's make a div, which here, so you're going to be our counter. Our value basically lists, lists, right? Value for now and also ideal for the buttons that are going to increase and decrease this value. So let's say increase, but then decrease. If you don't know what I did, I pressed Alt and Shift with the down arrow. So it eats makes a copy. It's a bit easier. You can also, you can write them. White it manually, but it's a cute little trick to write faster. Now we want to add steady-state value. So what we do first is important to use date from React. I encourage you to put the most important imports, the first and then what is less important below. So we're going to import US state from React. And we're going to create a cost. Let's set counter US state of 0 for now. All right, so again, the US state function returns as a variable in which we keep the value that we want, which is counter, we called it counter. And a function that when you call it, changes the counter variable. You can do, you cannot do like, like say Counter 5, countering physical 5. That's not going to work. So what you would do is say, Seth counter of five m it will, it will change the counter to five. All right. Now our HTML, we have to show this counter variable and we, why did we write it in curly brackets? Like so counter. Let's save this. And let's make an onclick function on the button to increase or decrease or decrease this value. So onclick. So you're gonna say Increase, Increase counter is counter. And here we decrease contact. Okay, let's make an elder functions here. So, so here we can write functionality. So you will go by cost increase counter function. In here. We can write in any, anything you want. So what we will use a, we want to increase the counter. So we're going to say exit counter of counter plus 1. And let's copy this in maybe the decreased function as well. Decrease, decrease Carter minus r. So we do not want to end parentheses like this. Because that would mean that when a component is rendered to the screen, it will reach this line, this bottom line. And we'll call it executed the function. And we do not do one that it basically sends to the bottom this function and wherever we click on it, it's being executed. So just let us recap. We need when we click on this button and this function is being called, is been executed. This function is being executed, so this will increase the counter. This will increase the counter to what it already is plus one. So n, the whole thing will be re-rendered n instead of what value here was, is going to be the same value plus one. And let's see this in browser. Let's save this. So it says compiled successfully, so that's good. Okay, Let's test increase in question quiz, the quiz. All right, So it works. So that is state. So if we have, say, another, another value in this component, let's say counter to, I don't know what we're gonna do. We're going to create another US state. And we're going to say counter to, for example, say contents. Here. When I say a div counter to. And basically the functional, this is going to be the same. So let's delete this now. Okay, so that its state. Now let's look at props. Remember, props are the way to send data from a parent to the child. So from counter page to counter. Now we need to go on content page and we sent a box like this. Go to the chiral component and say like and let's call it the fault value is being, being recommended to a SOC default value, let's say it 5, 4. So what we now basically do, we'll geese to send the, the value four into this child component with the key of default value. Let's say. And here in counter, counter page, we are going to receive this prompts by saying prompts. And now, just so you can see, you're going to say prompts, that default value. Default value and save this. So let's, let seem browser. Okay, It's four. Let's increase Nicholas or it doesn't work you say? Because because we showed you the screen what we have received in these components. So we received prompts that default value. And by the way, you, if you don't want to provide prompts, you can do this as well. The fault plot, what it does is it's called the structure. So where are taking from what we have received the UK, the key called default value. Here we do not need to write box anymore, but we're going to go with the, with the prompts. So it just for the sake of example, so you can understand it better. All right, so let's change that back to counter. Sorry, counter. Okay, so next what we want to do is use user effect. And let's actually first import it from React, use effect. So the effect is also a hook like use date. And it's a function that we've run when the component is being shown to the screen. Like maybe you want to make some calculation or get some data from an API. This will be run when, when you, when you mark the components. Now let me show that in action. You would usually put it first because just have a clean and nice looking component. But if for whatever reason you need to have something else to me first, then it's okay. So we import that it's this component receives two parameters. One is a function, inline function or callback. And the second one is a array called dependency array. So this is our core back Kiefer don't know what a callback is just a function sent as a parameter. In effect, the wise to use it teaches going to use it. So if the airway sent as the second parameter is empty, then this function, this function is going to run when, when a component is being rendered to the screen. But if we place here any variable, this code will also be executed. They're called in the callback will be executed when this variable changes. So here we want to write props. Props, that default value. Okay? Okay, so you can submit a letter writing the code here, set counter, props, default, value. Okay, so let me explain one more time. Here's a fifth, takes two parameters. One which is a callback function, is a function that is going to be called when, when it gets to be called. And the second one is independence era, which if empty, this code right here is going to be we run. We're only when you show the company 2D screen for the first time. If not empty at this code will also run when you change these invulnerable. So we, so we send from the parent this value. In here, it sees that the component, the child component, has received a new value in prompts. And what it does, it sets this value into the counter. This piece of code runs when you render the function, show it. So the first thing that it will do an USE that when we look in the browser, you will see here the value for, okay, let's save this NSLog into the browser and refresh it. You see it's four. And we can increase or decrease. Let's, let's refers to again. Okay. It's for or against it. So we have sent from the Byron component to their child the value for with the key default value. Here we have like cached this value. And with the, with the US effect function, we said we set it to be the value in the counter variable. And when the company is being rendered to the screen here in the counter, counter variable. And now that this props, don't worry if you haven't got it. We're going to now write main and components in the project that we're going to do. A new will get it, I promise. Now. There's one right? Now. There is one more thing. You'll see here that it appears at 0 before it appears therefore C 0 or 0 for that is because we set the default value to be 0. And now after this that the value from props is being added from US effects. So this, this code is above the score. So, so you can see that these being granted first. Okay, So, okay, so, so to fill this, we're gonna say prompts that default value. So what it does is it ensures us that when this component is being rendered to the screen, the value that is going to take this is going to be from props, specifically default value. Then if we want to m, then if we, if it happens that we change the, change it from the parent component, they use effect will kick in and we will change the counter. All right, let's save this and seeing Rosa refresh for you see theirs. So I see the 0 doesn't appear anymore. It's four, which is just four. Let's change just for the sake of example, it's right here. Five independent components would change the, we now ascend the value five into the child. Five. And either scenes in Broca's five here it sets with the US state, sets, its value should be five. So what we will, what we are going to see on the screen is going to be five. So it's like a fresh 5. Okay, it works. So that is state and props. It is not complicated. It might seem that first, what, it takes just a couple of components in you get this pretty quickly. If you had any problems understanding it, you will surely understand it later in the course by doing the personal website along with me. So let's wrap everything up there. Csc folder here is the folder where do you write JavaScript code that pushes or takes HTML colon from index.html here, that stays in public. Index.js is our entry point. We send it the company that we want to show it to the screen and n in the components folder here, we create a 2q2, two components, one is apparent, then one is a child. So the parents HTML contains the oldest HTML and that's basically the magic of react. We don't write a longer HTML code, but we divide it in components. And those components can have different functionality each. Okay, and lastly, in packages on, we have the least of our libraries that we stall installed. We install them all at once with, with typing yarn or AMP means or in the terminal. And we can install new libraries by typing yarn, add the name of the library or NPM install and the name of the library. So that's it for the video. I will see you in the next one where we will start our personal website. 5. Env Setup & Libraries - Generating the app & Migrating to Typescript: So here we are. We will now start our personal website. We'll begin by generating a racked up with great racked up command. And then we will migrate to TypeScript. What that should, because it has a lot of advantages of all the classical JavaScript. If you don't know what that script is, it just the same JavaScript, but it's a type 2 language, so you have to specify what textual for data URLs. You do get an AP function and what type of data you are targeting from the function. That is better than pages. So when you, when you work with a lot of people at the same project and when the project that you are building is big, it's good because that shipped keeps you out of errors when it comes, when it comes to data. And moreover, everyone uses it nowadays. So everywhere you go you have a high advantage. That advantage if you, if you already know that script. We're interested in install TypeScript package now racked up and it will be able to understand TypeScript files. All right, so let's start with Create React app. We'll call will. We'll pull our racked up personal website. I'm going to skip this until installed. Although article, it's done. Now we're just going to jump in the writing our folder. Open. It's on the next top. There's my website. Right. Now we're going to delete all the flies that we don't need, so on. So first of all, now we don't need this line, will move in this polynomial and another folder later. So what it did in these, this as well Flow role as well. And that's enough. Okay. So oh, I2C know them was bar with a GS. So we'll install TypeScript that f m dot that we will change it these two dot ds ordered that this x2 respectively. Let's open the terminal and install TypeScript. Come on. Go ahead and look at them and the white yarn TypeScript. And out pipes. Forward slash react. And at times for lossless React, DOM or minus D because we're going to install it as dividends. So the, the types packages are packages that, that helped facilitate the typing so that you might ask some more, some typing from react or act the DOM. And it will show arrows. And because of that directing gives us the typing of the rect functions. So just EDTA. So you can really think of at types. Follow us extract as an interface that basically defines that rect function x gets as a parameter and returns the thing, that function y. Yes, this thing, and it returns this thing as I want. There's no problem you didnt and get that the first time me, for ordinary interest in using it. You just need to know that we need these types packages so that that shift can get along with direct flow rate. Now we'll need a file that will serve as a configuration on foreign for our TypeScript. It is called test config. On. It's a standard name and there's absorb this config dot JSON. And I'm just going to paste a configuration file that I have used for different projects. You can find these configuration on Google and just type desk when V dot JSON and you'll find they're all the same disk. And what we need to change here is hearing you to react A6. If you don't do that, it will show you errors in your in your test files. But if, but it will tell you that it needs that. So we start a problem. If you will forget about this. This is JSON configuration data. We don't need to go through. But if you ever need that TypeScript to, to do something, what to stop doing something, you can change that from here. And then now just to a distributor phi, which they verify something, press Command or Control. Shift B. And enlightened version or sick depth converge or something along, along these lines. And you would find that this press Enter. And it should be set to use workspace from non-GMO, not more jobs. It might happen not to you, your vasco really use an older version of that scripting. It will not work with thatch skipped 17 version. So interest just verified this. And so we can, can move forward, select the node modules virgin, and you're good to go. Now we want to change the index file, index.js XN from now one red, I'm going to make color flies and dot ds. What is x in D? You will see one making the typing along the way. This x, we're going to make this also takes x. For now. 6. Env Setup & Libraries - Adding Dev Libraries: Okay, cool. Now we need to add our div libraries. These libraries will help us develop our app further in an unprofessional manner. You don't just start creating great anchor point in so right off the bat. Firstly, we need a saline, is linked is, is an eating package that keeps our code correct. It checks for errors while, while we type in so that we can keep it manageable. So let's go ahead and install it. Firstly, young add, we can use it. You can use npm if you want. Young lady asleep. Listening, Dutch cone, dutch prettier. Yes. There's a lot of packages action for this one, but just bear with me. There. She whacked yes, dash, import, dash, dash TypeScript. Because we're going to use, really using TypeScript. Typescript, okay? Yes. Dash, dash, import and lush. And import here, much prettier and is linked lush blogging. Dash, dash d, because you're going to install it doesn't dev dependency. Hope I didn't miss anything here. Plugging in, plugin, import. Okay. It's a low, It's a lot, I know, but we need all of them. Theoretically, you need just AS lean. We work with a react and you will need those afterwards. So we'll just go ahead and install all of them now, criteria is another package that keeps your code pretty and UC is in the works together with the prettier. So that's why we need both of them. I suggest adding ES lint as a global dependency as well and afforded the four that we say yard dash g. So now it's in the Node.JS and you could actually access it from other projects as well. But I'm just going to skip it. Still, isn't it cool? Now we'll go ahead and write down or on your sleep, eat. And that will initiate the configuration file in our project from which we can let them change things if you want. But these configuration files needed some going to ask us some questions. Yes. One of those modules, I'm using React. Yes. I use TypeScript and browser and JavaScript. Yes. And now it's gonna, it's gonna make the initiation file. Now I'm just going to skip T2 is done and you'll see that. All right, It's now, and it says something here, ledges, go hiddens. If that's appeared, just go ahead and, and annoyed. And we have our dy dx, Start a big deal. So that's the file and the configuration of 140 16th. There are different settings and rules. You can change them afterwards if you want. We don't need change anything else. Just close it. Okay. So now we'll just go ahead and quit the printer configuration file. And I'm going to breed there is, is a packet that keeps our quote British, pretty. That's why it's called retired. And the configuration file is called dot MSC. Okay? And we will go on Google to take the default configuration violet. I've see, okay, this is the website. And you can see the configuration is quite short, so you can change you this as you like afterwards. Now we need has kinda lean stage. Hi, ascii is packaged that we can instruct to do something before we commit our code to GitHub so that it's not pushed to it. The arrows and the lean stages, the baggage that, with the help of Haskell, verifies the court when staged, meaning when it's about to be pushed together. And just a quick note here, I'm not going to teach you how to, how Git works because it goes beyond the scope of this course. But I hope you already have an understanding of how it works. If not, just go on, I think is github.com slash. Well, I CLI slash shall lie. So you can install it and make an account on GitHub.com. And there you will upload your code repository. Don't worry, you will see how I'm going to push my quote to get up so you can do the same. You can also stop, stop this lesson angle. Go see how people use GitHub with small fires. So you would have a better understanding and then come back and we'll continue. But for now, we'll go ahead and install it on, Add Husky. And indeed staged dash because it's a dev dependency. Okay? Okay, it's done right. Now speaking of our prettier SRC file, the trailing comma here, it takes the standard form for me, yes, five, the W3 just homie spaces will help. And pseudo code just allows single quotes to be in our projects. It's not another bigger than guessing. Good. Next we need Exynos. Young x, yes. And thought types, forward slash axes. If you've ever worked with JavaScript, then the fetching data from any BI, you know what the extras is. Basically everyone uses it instead of the standout phage function that comes with JavaScript. She was finches that therefore my specific API. So we can, we can show two discrete data that is Locke's own mirror and database backend. Okay? Lastly, we need two more packages which is no datasets and being a trailer direct environment. So we'll just go ahead and install both of them loads. So that's the end. Beam, Australia slash direct nth. So the first one will help us to help react understand CSS files because we will not use the regular CSS but SSS. So this will help work on pile the SCSS files in a regular CSS when, when, when the app is built. And Bill beam Australia, that gives us the ability to create and not end of file to keep the sensitive data into tweet that helps our environment around you. You will, you will know how that works when you're going to use it. A great, these are the libraries that we need in order to get started on the right foot, unwilling to leave the node thing then also below a list of these libraries so you don't have to remember them. And the now on, I encourage you to add these, to add to your base code these extended extensions. You might notice that my, my, my icons appear in different than yours. So you can you can install beautify? Yes, Linda also Can as this one we will use to help us push out what our code to get. There's no asleep. It's also if you want. Intellisense forces says, My dear icon, this is for my ACCA icons. Prettier for afforded VS Code in DSA. Okay, That's it with the configuration of our libraries. I will see you in the next video. 7. Env Setup & Libraries - Folder Structure: All right, This video is about folder structure. Now that we have, we have our library setup. We will create a folder structure that we'll handle very well, lots of files and keep and keep everything organized. Of course, you can create your own folder structure, but the structure is what I have used for many of my projects and also have seen big rectangle and built with this structure. All right, let's start by making a folder called pages. And it's at first delete all these files. We don't need them. Up to this k in here. He's gonna say that it doesn't see. It can delete these Zou, paul already know div. Good. So let's get our, our, our Folder pages. This photo we will hold all direct components that have root corresponding to them. So if you've got your domain.com slash about DNA, here we will have a component called About page. That's the component that we will show the screen when the uses go, uses go into to the new domain.com slash about. Okay. Now ups. Now let's get a folder called the limbs. What we have here is different functions. We have functionalities that we want to use repeatedly in our app. Like soft function that returns current day, for example. We'll keep it here and enough file and import it in the important function wherever we needed. Also, we need here a folder called HTTP. Initially the beam. Here we have all the function that called the BI in return the data for us so that we don't override the atan of coding now rec component to get some data. But we can create a modular approach, Rather. Use how that works when we create, when we create them. In here we will have another three folders called atoms and molecules and organisms. All right. We're going to use the atomic pattern that is widely used and widely used methodology for structuring React components. Here we will have all the components that are not pages. So usually early usable components like buttons, inputs, and so on. And so far just created these threefold missing. We will go over atomic pattern in the next and the next lesson. Good. Well, so it needs the holder called styles. And we will hold here all our global SSS, meaning that this SSS, we'll first of all, affect all the project. And second of all, we will have here styles and different things that we can import in our SAS, in our smaller act components to USC. And this is optional but resources. Resources, we associate the folder where we have fonts and pictures and anything that is just our resource, The future projects, if you don't have some resources that you use, you don't get on me to create this folder. And this folder is for languages. So we will have here a link, the language of our interface. In each THE issue label each thing that you want to be translated. It's going to have a vision for each language. Okay? There's a couple more contexts. A folder. The folder context is for global state management. You, I will show you how to use global state manager by the end of this course. We'll leave it like this for the moment. And also the last folder called hooks. And where we are, we will have functions that work as a hook. So they are recalled in a sense when something changes. All right, Does this kinda with the folder structure. You can also play around with this as you live. But I use this structure a lot in the past and I'm using it in the present and the F seen a lot of people use it as well. So so I think it's skin. You get I agree. So yeah, that's it to a folder structure. See you in the next video. 8. Dev Setup - Atomic Pattern: Okay, great. Now we're going to go over atomic patterns. So, so atomic path a is basically a methodology to organize interface components that is inspired from chemistry. So a organism is composed of multiple molecules, right? And a molecule is composed of multiple atoms. If you want to again, such search this pattern will go. There's a lot more information about it. I think there is an article that explains it very well from medium, from other, from what I remember. But I will explain it nonetheless. So let's go to our trusty white water here. Okay, So we call atoms small components like buttons, inputs and loading bars and so on. They are usable. So you would use the same Boston in different places without copying the code. You just import the component. And then we have molecules. They are bigger components. There are often multiple atoms like forms, list of photos, and some orange, something along those lines. And then you have organism, which are bigger components that contain multiple molecules. So we call them by these different names because it gives us the ability to organize them more efficiently. As you have seen in a previous video, we have a folder called UI. Here it is. And in this folder there are another three folders called atoms, marine organisms. We will keep the components that are going to be usable here. And you might ask why, why we need this button in? And that's because we can't create a folder called like components and just store every yours ball complaint there. And that leaves because you would have a chaos and incredible and clarity when you, when your app reaches a high level of complexity. I have seen projects that have been built this way and I assure you that I cannot understand how it works. Whereas atomic pattern keeps it clean and nice. We can have multiple wives. We can have multiple folders. And the IVC, the most important one is here in LSC folder. But we can have another folder which with its atoms and molecules in an, in a comb point and the folder, okay, so say you have a component, a component in pages. And these component uses a specific set of components that are only going to be used in this components. So we're not going to keep those components here, but rather with it. It's pardon component or let's say audits page. These best-practice actually used by many. So if you have something which I call I ph component or a B component, uses and resource or component is being used only by these bigger component on page, you keep that with its parent. You don't, you don't use the notes. Place it in UI. And that's where it all, all types of files. You will see that the in practice when we create our components, just keep the chemistry analogy in mind that you will get it pretty quickly. 9. Dev Setup - SCSS & BEM: Hi, In this lesson we're going to talk about SSS and the files folder because it's the foundation for our SCSS in this project. Okay, remember we installed Node says that the library that I told you, where is it? And this is it. This is the library that when the app is compiled, order or saved or built, or this SCSS files are converted to regular CSS. And you might ask what's, what's fluid with all these files? Well, first of all, we're going to go in GitHub, GitHub and copy these files from Autumn, the already built project in we will understand them one by one. I have also pasted the GitHub link into the description below and you can see, or you can also see it on the screen right now. Also you can see what we're going to build at IX math.pi, the x melted.com that takes, or it just going into in this address in you will see the woods that we're going to build. This is my personal website and by the end of the course you will have one similar to this. Also I have here are in resources, a folder called phones and an a half your fonts called, which is a free font that Apple gives us. Please choose a font. And, and now please choose a font that you will use for this project. And do this in that I did create a folder called phones in this resource folder and throw them under. Each should have a medium bold enlight version of the font. I suggest you'd use the same font as I did. You can download this from Apple and Google Earth Pro display download and you will find it. All right, let's go and get hub. This is my GitHub account. You see that the link to that. See the link that I showed you earlier. The, this is the already built projects, so you can go ahead and export it if you want. But what should you do right now is to go into this year C folder. And you will see here the styles folder. And here are the files that you see here. Here I start helpers index normalized palette, topography and variables. Just go ahead and copy this, copy the content within it. We can go and copy each one like this. So up like this. And you go ahead and say calpers, does, is it says I have already a file called helper. So helpers and pass them all. We are going to go over each of these things later. So I don't need this file now. Go over each file index normalized by topography m variables. And also let me just check the SFD Pro display font. Apple developer, okay? And I think you should be able to download it from here, okay, so SF Pro, this one. Just download it. And you should have an archive with exactly these files. These files just paste them all in this folder. So now we will have a phone to work with. If for whatever reason you don't want this font, you can also choose yours. But just keep in mind, I need, I mean the median version, lite version and bold, bold version. Or I Let's close this and now let's look at each SESS file. So first of all, let me just explain the difference between SSS and regular CSS and why we use it and why everyone does. I'm going to create a, a, an example file right here. So example used to just expense you're example dot SCSS. And it's called, It's actually called SAS with the extension is dot SCSS. And it allows us to do many different things that we are not able to do with regular CSS, acronym listing, importing mixins and functions. And let me just explain to you what nesting these. So say for example, in regular CSS file you would have, you would create a class called button. Button. Okay? And let's say the width is 100 pixels and the hell it will be 50, just for the sake of example. Now, for example, we have also class that says that we use, that we use when this button is active. So we would name it a button active, right? And E, it would have the same styles. Okay. Let's say colored is that because it's active soma, okay. Will, that is the case with the regular and classic CSS. Now, what SPSS gives us or brings to the table is distinct. So you can say button. Let's go put this up. Now we can write this and symbol an essay for example, dash, active. And here we can take these and paste them here. Color red. So, so this is nesting after the CSS is being compiled, this whole thing is being transformed, this thing. And it, you would write it like so, so className, say we have button. And when we, when we write the button, what is going to be seeing these two, these two lines when we are willing to say but an active, it will consider this line. So basically what SPSS does is when he sees these n symbol, that means that what, what is after this end symbol being attached to this button, anions created and new glass, so buttoned his own class button slash active. Active is another class. What it gives us his clarity and cleaning. And so, so when we are going to have a big project, we're going to have a tons of classes and it will be very chaotic with regular CSS, but with SSE. So you can have these structured much like HTML has with its parent and child. You will see that in practice when, when we start to making all pages. But that's for, that's for the nesting part. Now regarding the imports, SSS allows us to have variables. And you can see how our file here called palettes. Here we have the colors that we are going to use in the app. So you're not, you're not going to copy and paste the same hex code, the same hex coordinator, but it's the color. To each time you want to set up color to a specific text. What I did, death, not professional. So instead we have this file and we said the colors here and the SEC's allows us to import this available in other SCSS files and viola, that's how we set colors. So let me just write an example here in the example so we can use this MAN bought an example. So the release. So see we want that our button when it's active to have the color, this color primary blue. Since I have already built the application for myself, I already know the colors and you just have to copy them. So back to our button. Say we want to to have this color when our button is active. Hypothetically, when it's actually, what I'm going to do is to say at import In part. So this folder slash pilot, balloon, pilot that sss. Now we have in this example that CSS file, we have these variables and these valves, we have all of them. So when our imaginary button is going to be active, we want to have that color Soviet gonna go dollar, primarily blue, primary blue. And what it will do, it will say at this hex code to this color. So, and that's the same thing as writing as one thing like this. I think you've got idea. So we're going to use, we're going to use variables because we're not going to paste the same. This is a hex code and every file that we want to have this blue color. Okay, so, okay, dots with variables. And important. Now we have mixing. So mixins. Mixins are functions or type of functions that return CSS styles. So this USA, where you're going to create a mixin called Cool background. In it will atoning like with a 100 percent hate off, a 100 percent background color of white. Whatever we want by 0. And that's it. So as variables they can be imported and we can use them whatever we want. So you have a mixing that returns a bunch of CSS files, like in this example, a new need to, you need in your app to have the same cities lines. In different prices. So mixins make our life easier because we write CCS lines once and then just import them anywhere we want, as opposed to writing the same thing over and over again in different places. So let's say for example, this is a, a class for our one or page. So it's going to say container, container about, for example. And we want to have these lines here. We're going to delete active. Okay? What we're gonna do is say include, Cool. Hello. And this mixing can be in any SCSS file here. So let's for the second example. I place it in parrot mixin, cool. And now because we import it here palette, it will have access to all these things or these variables and these mixing. And when you will look in browser, you will see that, you will see that this class has these lines. Okay, so that's, that's how the mixing works. Let me just delete. Okay. Okay, so that's mixins. We also have functions. Functions are different than Mixins because they did not return a CSS lines. Instead they are regular functions. They do some calculations and electron value or a number. For example, these functions also have for any flight, any programming programming language. I'm not going to go into details about how to write for any gifts in functions in SSS because it goes beyond the scope of this video. The only functions we have here in this SAS files are in the helpers, helpers file. And what we, and what they do is to convert pixels. So RAM, I hope you already know what a rim are. And if not, where I am is just a size unity like pixels. The thing is that it is relative to the base size in the whole app. So to make sense of that, let's open the file called variables. Here. You see we have our variable here called the base font size in this one, the first one. So what that means is that we created a variable within the default size of all the texts in the whole app. And we achieved with it to the body. Here in index.html, SSS, see body size, base font size, or the variable that we talked about earlier. So we imported these variables, four variables. And we said that okay, for insights for the Holbein is going to be going to be 16 pixel. Its yes, 16 pixels. So this is the base, that is the font size that all the paragraphs will have. And the when we will create our SCSS files in for the React, react components, we will not write the font size. The font size like it is with pixels like 70 pixels. But we terrain with this like one milliamp. And we're not going to write like one or m or 1.5 rem. But just for you to understand, We will express the size of the fonts in grams because the rims are relative to the base size of the body. Okay, so so one RAM is whatever the one RAM is, whatever the size of the fonts, we see it in the body. And what is it in the body? You remember, was the baseline. The baseline here of 16 pixel. So the default or the base in the body is 16 pixels of any font in paragraph or text. Now we have the suprema fashions that by the way, I have not written these functions. You can, we can find them on the, on GitHub or internet. It's, it's open source. No one should do, should waste time writing them because they already written some water to help develop your app faster. So these functions are going to receive a value in pixels and are going to convert them into REM. Because you can imagine we are not going to make the calculations in our head. How many rooms are 18 pixel there, say? So let me just so we know that one or m is 16 pixels, right? Why 60 y is 16 pixels? Because we have here central in the base, base, base font size. In which we achieved with this variable body in the index.js says, By the way, this file, which will be imported into index.js later, but the body now has the font size of 16 pixel is the base. We know that one or m is whatever the base sizes. So one gram is equal to 16 pixels and say 18 pixels is, I don't know, 1 to them. And because we are going to express the foreign size when we're gonna write our CCS with terrain. I can't know how many rooms are 18 pixels and that, that's when these functions come in handy. So, so when we are going to write CSS, we're going to say one size or say it's a paragraph. Let me just write, for example, point signs. When we're not going to say 18 pixels. Instead we are going to write a ramp of 80 pixels. Okay? And I can access this RAM, ram function because I have the functions right here. If for example, this is going to kick in another file in example. Okay? And this is not going to work. What we need to do is to import in boy important this function. Now I have access to DOM functions and voila, our paragraph will be 18 pixels, which is going to be 1.21 to rain or something like that. I know there is a lot to digest if you're not familiar with this. But this is what you need to know to advanced direct skills or to be ready to take a reactor job. So let's recap this same thing. So whenever we will set the font size of our text, we will not use pixel but rep, and we use RAM because if we want to change the font size of the whole app, what we'll do is just change the font size, the base here, okay? And all the sizes of all the phones into hole up will change with respect to this basis size. Next to when we use the function RAM that we have here in helpers is actually this function that uses this function and so on it, it uses each other. Okay, So when we have the dysfunction or RAM, it's going to save. You seen those upper arm as a parameter, 18 pixel. Let me check what is the base. Oh, that's 16 pixels are these functions to that? So it means that I should return of 1. So again, RAM is a relative measurement you need. It always compares itself to the base. So one rem is the base. If the base is 55 pixels, then one rem is equal, is equal to 50 pixels. And tourism is respectively, will be 10 pixels. If the base is 20 pixel that we have, we have C at here and the onset these in the body as a variable. If that is 20 pixels, it means that one rim is 20 pixels into REM is 40 pixels. Ram always compares it with the font size that the body tag has. And the functions here in helpers. Arduous to help us make those calculations by providing a function called RAM that does that. Premium more variables, mix-ins and functions are important both from one census file to another. And lead to delete this. Okay. Save, save. And let's save this file also, okay, along the way in the next video. So while we will create the app, I will keep reinforcing this RAM, RAM thing so you can understand it. And while the developers will write the font size in pixels, we're going to write them in the RAM because that, that's what a good React developers do. And now let's speak about the topography SCSS file right here. Okay. You saw we added some fonts here in the resources. Now we want those forms should be easily accessible anywhere we need them somewhere we might need the bolder version SOL, when we might need the light division of the font, for example. So what we do is create a CSS file and use the power of mixins. You are already familiar with the fonts, font face. More. What's below is a mix-in for each version, or better say, weight of the font. So, so for example, I created a mixing for the bold, bold version of this font. I imported with helper font-face. These foreigners from minus source folder. I called its SF per bolt. In, I created a mixin which is an amber, just two tones, plain CSS lines. I say I called it SF Pro bold. And I said that key font-family is going to be sf per bolt. And now I can, now, I can import these SFP now. And now I can include this sf per boat anywhere in this app where I want to fund to be sf. Honestly. So for example, I said in the result SSS, the default style of the body. And I said that did the default font of the entire body is going to be ACF prom medium. So we imported that mixing and from the topography, topography file, you see a Import topography. And these is that SCF from medium, medium mixing that we imported. Now we imported into it via the keyword include in the name of the mixin. And it will translate to that font family. Font family with their name in the fontanel. And now the whole biding will have as its default font, the familiar that we have defined here. Now the rest CSS here in the index are classes that we use globally. So I don't know if you know it, but all the SSS or CSS, for that matter, is accessible anywhere in there. So these classes, we be accessible literally everywhere in the app without even importing this file. And that's because when do you react is compiled in the browser and the browser receives the files. All these SCCs is being thrown a in one file. The browser doesn't get this chalk term we have here, but after built or compilation, it creates a simple structure that the browser understands. Let me just show you something that you will understand. So, so let's say this fine for now and let's start our app, yarn start. And you will see in just a bit what I mean. Okay, it starts. Okay, it started to see these are all the CSS files that we created, this palette, power 3, everything. And now let's go ahead and inspect element on this page and go to sources and new seed. That's what the browser actually we've seen this, you see, that's not how it is not the structure we have here is just a folder called static ab.js with the GIS files which are being compiled and built by the, by the way, it's a library called Duane Buck that's built into reacting what it does. It takes everything here in crates. These files USE to be big JS file. And also we will have here a folder called styles. I guess we don't have it yet because we are not using any of these tiles in, in our, in our, in our React component. So it's just so because we don't use in ESA any styles yet, there is not that folder. So let's for example say. So. So to see that for the, let's firstly delete this index six is that has been generated by the credit roughed up. We can read this important actually import here from styles slash index lot, SSS. Okay, Let's save this. Now. Now our ACT UP will have access to these. And in the browser there will appear a folder called styles, where we will have raw components that are going to styles for now and we are not using any style, so we're going to leave it like this. All right, let's look at the next file, normalize. So let's go back to our industry. So the classes here are created by me and I created them because we might use them in different places like a nb, mb, M, B2C. So you see it's nested like him be a B5, a button. After, after it is compiled, there is going to be crass called a AMB, that five with a margin bottom of five pixels, a, B, and so on. So there are a lot of places where we will want to add a merging of bottom of 20 pixels. When we don't need to repeat ourselves with the same margin bottom of 20 pixels, right? Instead, we just added this class along with other classes in the deep. So for example, we have a div with a class of container. And we, we want that this container to have a merging bottom of 20 pixels. We don't go into the container class wherever it is and add this margin bottom of the integral. So instead we're going to go a and B 20. Because we have access to all these classes and we don't need to import them. It's easy to use them. I have here a mirror imagining right? Padding, height, HR, margin, button, margin, top, uppercase shadow. For some deeper shadows, small, a smaller shadow. A bolt on the line, color black. And just for the sake of this course, I'm going to delete some of them. And when the time comes, where we were going to create them again. And you will see that in practice. So I'm going to delete button and available and around, let's say, and shadow. The uppercase also. Okay, let me delete this. Now. It's good. So that's with the index.js, ESS we just defined here like the foundation for our app. We also say that we want to be 40 pixels and you can see them as some settings in we have here classes that are globally used, everywhere when we will need them. Okay, Now let's look at the normalized sss. At this is a file that basically normalizes the CSS. I you know, there was there was a file called the reset dot css death you will have in your HTML project because by default, a lot of things are messed up when you, when you create a new annual HTML project. Well, this file does the same thing. It's like. It's like it cleans the place for astronaut health problems. And if you don't know what's, what we'd say sss, it's, it's a far less set that CSAs that many people use to book. But he said the CSS in the HTML project. I don't remember, but when you start a project and you start to feel the place with DFS, you have a margin here, a little, a little whitespace within our containers and the Indie bolder. So, so these kind of necessary sets, all this. I have not written these these by the way, these files by the way. And frankly, no one thus, you can find them, they're monitored and use them to help develop your app faster. And then let's go through all of them one by one now one last time. So I'm going to delete this example. So helpers, helpers that SSS, here are the RAM functions that are going to convert pixels to function, to run, sorry, to ramble away. And we're going to set font size to anything. Okay, Does the functions here, index dot css is like the index, index, index for the SCSS. It is being imported here in the index.js TSX in, and the whole app will have these styles. And because in index.js, we have imported all these other accesses files. This file includes over. Okay, de-normalized file is just to clean the place. Let's say palette is a file that has all the colors that we are going to use in our app. Topography is a file that is a CSS file that gives us the font styles. And the variables are just the variables that are being used in index.js and helpers in this SCSS files are the foundation in terms of style for our app. These are like the tools from the tool shed for styling our app. Later we will have a CSS file for each React component in these, in these files. As I said, we'll be helping tools by the practice that we are going to do, you will have a better understanding when you finish this course. Now we're going to discuss about BIM, which is a naming methodology for CSS. But I'm not going to explain to you now because I think it will be hard for you to grasp it just by imagining how it will look like. So I will teach you the BAM methodology by doing by doing CSS in the next videos. However issue can't wait then however, if a counterweight and once you get familiar with it, you can visit, get bm.com. So get, get them.com. But nonetheless, I will explain the methodology TO while doing, while literally doing the styles. 10. Dev Setup - .env & GIT : Alright guys, hi. In this video we're going to show you how to set up the environment file. And I'm going to push this project to get for those who are not familiar with how hard you do. All right. By the way, this compiled with veining says appears because these files is dot js. And remember our whole projects is TypeScript. And that's why it creates problems, but we are going to want to deal with it later. Okay? So what sued the environmental variable? Let's start by making a dot and phi. These file that is not visible in the folder, like when you go in the deleted folder, it's a invisible file. And the whole purpose for it is to hold the variables that are going to be sensitive, like tokens or API links or ending of the sort. So we're password for nano data bases or something along those lines. And I have here on GitHub a example, I have actually written in the read me file. That's, that's how it's going to look. The environment file, you just copy, paste them here. It looks like that. For now, our API URL, you're going to be empty and I'm going to tell you later what we're going to use. But for, for our website is going to be HTTP, http slash slash local host. As you already know. The 1000 API to tetracaine DCS, We are, we are going to place our token that the Twitter really give us for the, for our account, data profiling. Number, maximum number of tweets on the beach. Let's lipid 25. And here we are going to, I'm going to paste, to paste our social media links. I am going to leave them empty for now, but I will send them later. So that's with the environment. Now we're going to have access to this value is in our React components. And I'm going to show you how we're going to do that when we are going to do that. But, you know, with that, it's a, usually this file contains all the global environmental variables that your app needs in order to run properly, like API URL and urine. Okay, So that's where the m you get. You get you can take it from the GitHub as I mentioned before. And now let's deal with the pushing this way, this our obligation to get. So remember, I told you to install these. Where is it? The lens? This gives us the ability to push to it via VS Code so you don't need to write in terminal. I get git commit, git push and all that, all that kind of stuff at this extension makes it easier for us. So if you have noticed all just go ahead install it is called catalase. And after that file. And then you should see this, this, this icon here. And here are all the files that are going to be pushed, pushed to get. Now it represents all our project, but in the future, you will see here only file that, that files that you have updated. So if you see this here is this master. It means this folder of viewers is already initiated with good. And if not, you will go ahead and write in terminal gift in it. Okay? And you know what, let me just delete this. India's get fired and get vacuole, which is by the invisible. This is the folder of our app. We're going to delete. That gives this folder and our app should not have get initiated. Come on. Okay, It disappeared. Now we're going to go ahead and say git init. And it should initiate the folder with the good. Okay, great. Now what we are going to do is to push this button here. And this will create a repository on GitHub. And because I have already used my GitHub with the VS Code, it says I'm, I'm already such 20th. If you're an effect, if you have not used it before, it will give you a pop-up saying that you should login with your GitHub. At the end, it will go to your browser. You will log in with your GitHub and, and then you do want. Now, I'm going to create a public repo story called personal website, exactly as our app. And it's going to be pushed. If that appears there's no program to go cancel it. Now what you want to do is to go to this place right here. And what is going to do is go, It's going to stage all these files staging, meaning that it's going to be pushed to get n. We're going to give it a name for this comic. So I'm going to say in it, you can write your any, anything you want. I'm going to say you need, okay, all these files are staged, meaning they are ready. And you're going to want to place this committee will now now we're going to go down here, apprehend press again this upload list. Just give it, just give it a few seconds and issued be ready. Or it is known as go to our GitHub. This is the already built project that you have used earlier to take these styles. Let's go into my profile, my repositories. And you can see up updated 30 seconds ago, personal website. And you can see our output that we have great. Now it's available on GitHub and anyone can see it and growing it to via this link. All right, I see it's had been put with the ENV file. That's not how it's supposed to be. So we're gonna go into gitignore and going you're going to say that it should not it should not approach that AN file. And you want to save this. And you can see it's saw that I changed the gitignore file. Now I want to push this new modification or this new update into my Git, git projects. So I'm gonna go stage. I'm going to give it a name so I get ignored, given up late. And I'm going to brace committee and send yes. Okay. Or m By the way, I forgot I have to Let's copy this and delete this file so that the two we'll not showing good anymore. Stage. Delete did commit and push against them. Now if we go to our GitHub, Let's refresh and should not be anymore on k. Now let's create our of our environment. Die again. Not air. Okay? Any see now it doesn't see that I have a new file because this fight are not supposed to be pushed to get, so it's only visible in our VS Code. Okay, That's it with the good and the one that file. This is I think the last videos with more theory. And the next chapter we are going to get our hands dirty as essay and build the project on the Scratch where we're going to start the routing the app, and then build one page at a time. 11. Routing the app: Hi, In this lesson we will start routing the app. And what routing actually mean, means is just that we direct racks components to the URL in the browser. Let me firstly opened our beloved whiteboard here and explain to you the basic idea. And then we'd go into VS code and build the router. So, so you, you already know the schema. This is the entry point of our app, is the index.js or JSX, sorry. And you know that whatever we have wrote here is what is going to be pushed into the index.html with the idea of fruit. And now, when we start our app, what we see on the screen is this about page this one. And now the $1 million question is, how are we going to change or switch between components so that when you go to localhost slash, localhost port 3000 slash contact for example. The app to switch to this like so to this component. Now, now this is where routing comes in. Grafting or Raul 30 is basically a library. Rafter doesn't give us a default standard library. So there are countless routing libraries on the Internet. On the one we're going to use is React router dom. And I think it's the most used from what I know and what it does. It basically, as I said, it's a, it's a library. And what it does, it basically takes all the functions, all direct function that you have that can write, let me write just act DOM, axon. So we config, get in our way so that when you go, for example, on your domain.com slash about each should bring up this company when you go to your domain.com slash contact, it brings up this, this component in here. We will not have About page anymore. We have a router, router like so. You will see that encode, it looks different, but that is the main idea, is what you should understand. Now let's jump into our VS Code in go ahead install, React router, dom, yarn, add, React router. We can also find documentation about the route that are on Google. Alert. Is you need anything. Here is everything you need to know from a switching to misspell anything. So I'm gonna pause here until it's installed. All right, it's done near what we are going to do is go into pages in two components. The first one will be the about page. So About page. And the second one will be the contact page. All right, Let's create a component here. About H dot this x in here, a contact. Page 86. Okay. So now we're going to get a dark component, a board react from the act. Export because we're going to export this component cost About page. And we will return them for not just the idea of saying that these About page, all right. It's yellow because it wants the script type. We'll deal with it later. And I'm going to it is say our contact page. And this is the contact page. Okay, so now what we want to do is go into index.js x and do the following. Let's firstly rearrange. Okay. So we're going to import your. So remember we installed the react router, router down. This is a library that's going to Allow us to route our app. So we are going to import we want using in the NGO point. We want to use disorder OR gate. You can look at this as a gate. So we're going to import router or switch. And the route from knocked out. So what is the problem here? All right, so remember I told you that for some libraries we need to install the type version of that, of that library so that it can work with our TypeScript. So I copy it. I copy this line and just okay. And installed the types to tie them. All right, and now it works. So what we want to do is change this. We will go ahead and say, oh, route up and open and close. And here we have, we will have a switch. And now these tags are from Marat throttle dogma. Remember, a raft Rotterdam is also a library that gives us react components which are which already denoted can be expressed as dogs. And by the way, here's a row of the outer. Okay. Oh, yeah. The router needs a history, but we're going to use history later, so we're going to please change. There are other browser router in this browser. And this one should work. Okay? Now, what we will have insights through each tags will be our roads. And for that we also, you already know that n for that also we have a dark route is also a self-closing tag. This route takes as a parameter a path which you're going to be like a like about. And also it takes a props called component, which is the component that it will show to the screen when you go to use lunch about. So when we want to go to about two, we want to show this About page. And this is exported from pages about page. So we'll say About page. And I can name, okay, So you can press Command or Control. N dot VS Code understands that you want to import it is React component and it finds it for you. Okay? You see that it imported automatically. All right. And let's make one for the contact page. Contact, contact. We just import command dot important and move it. Okay, so let's recap here. We imported browser router ends. So let's recap a little bit. We imported the browser router switch in the road from a reactor or terminal. This is a library that is going to route are worn out. And the way there's these by, by creating a I, a component called the browser router. And it receives as a prop, the switch on point at which he sees an abrupt all the routes. What I have not told you is that you can also send prompts as a child. So remember, we had enough bar or our we have we have contact with, we had counteraction count. And we send as props and default value in the, in the previous, in the previous app that we created. And we sent five. Remember, well, well, that is one way to send a probe. The second way is to choose to send them as child. So so we would have what we would have is something along these lines counter and whatever is here is going to be sent as a child. And usually this is, we see in this way are the React components likely div a, so anything that is HTML, and that might be pure HTML or that may be all other. React components. And you remember that we have received that these proper value in the counter by, by typing props that prompts dot default value. Will you receive this by typing probes without children? And that's the same thing. So, so that is how this works, is a graph component which receives as a prop child and other components in which receive is these routes. Now let's check it in our browser. So save the, save the file and go, and go ahead and run your start. Okay, If he has started now let's go on and on about page enter. Alright, so this is the about page. Let's write contact. And this is a contact page. And this look into Inspect Element end USE hall does happens. So body envies is the contact component. And also what you see here is the contact component, meaning this one from pages conduct pages. And we exported it into the route route page, slash contact and on-stage contact you you should see to this green conduct page which we imported. All right, so now if we go to about, you will see now this is the amount page. So it's, it's switched the raft components between them. So let's close this. Let's go back. Now. We need one more thing here so that when we go on to the local host, which is like that, nothing shows up. What that's because if we only show or act components where we go either to slash about or slash slash contact. So what I want you to do is so when the user hits and just slash, we want to redirect him today slash about because that is going to be our main page of it. Say. So what we want to do is go here and do one more little thing. We're going to say or out. Like this. Exempt. True. Here we need to import another component from reactor that dome called the direct. So we imported it from Rotterdam. And we say direct to slash about exact. And that's it. Now it should work. Let's check it in the browser. And, and it works. And volatile works. And we thought about and that works. So that is what essentially routing is. So c, So you see a React router dom is like any other library. And what it does is essentially receive as props these components with the data that we want. And it does its magic. Bye, bye. Always checking what's the URL in the browser and it shows this query specific component that matches that road. So slash about, we're going to show the skin, the bottom slash slash contact. We are going to show it to the screen they conducted component. Now, if you are a beginner, you probably don't understand like in a deep level how this works. But trust me with time, you'll understand this pretty, pretty easily. For now. Just created these routes. And we can't really Enrique move ahead. We will also change this in the future. We will make it a line, a more professional manner by creating a different file for this code. But for now it's a key so that you can see or understand better. 12. Layout - Interface: Hi guys. In this lesson we will create the layout component which will serve as, as a wrapper around each of our page. And let me draw it to you, say you have a better idea. What the layout does is just to serve as a place to keep the number and the footer. Little critters come after you say, for example, you have, well not for example, we actually have a page called About page. Say this is the page in browser. And we know that we have a component called About page, right? Let's hit Browse. All right. We know that we have a component called About page and it has in it we have a specific age demanded will be shown to the screen. So for example, we show a square for now. And now what the layout component does is juiced being as a wrapper. So, so the layout page, you will have a component that will be called the layout. Right? Let out. All right. In each page will have this layout so that, so this, for example, copy this. And let's say this is their conduct page. Now, why we want to create this layout component instead of just showing to the browser the exact contact, an exact component that it's needed to be shown. But let's first create a small component here, which is hypothetically our nav bar. Bar. Alright? Now you understand that the number should be present on each page. So what we would need to do is, is, is certainly this number in each page, one navbar here and one navbar there. Okay? But in this case what the layout this, it helps us prevent this from happening. So we will have in this layout component, the nav bar. So it is going to be presenting in layout like this. And also there will be the photo down below. So when we create our page, we just focus on creating the page in the number and the footer will be taken care of the layout component, which is going to be the parent. You can look at this layout as the pages, squads. And these provide this week navigation and the footer. And in the About page, for example, we will focus on creating only the page and not integrating the navbar and so on. And let me just show you real quick what that's going to go look like. So that is the navbar here. And this is the footer. This is the about page right? Now what we're going to go here, go inspect. I'm going to show you something. So you see the first deal with the root deviant, the index.html, you already know that and write the second deep is the layout, the div, and that is the layout component that I have shown you. And what it contains is to deduce the first use is called Layout top end. It has the number, the number, and the menu in it contains two. The one is the one we should guide us in our second one is the footer. Here in the layer on top, I have the number and the minuss xi. They go together in these, the baby that USE in about, about waking this one. This is where we're going to build the literal page. And the M denote bore fruit trees being taken care of by the layout. So let's look at that in practice. And before we're going to go for the, let's deal with this with this TypeScript problem. So what it says is that it doesn't know what it is returning. And react gives us a good interface that defines that this function is going to return or react called arrange them up. This interface is called the React, react element. Both Actually, let's talk about a little bit about TypeScript. So, so accept, as I said, defines our types in. We can have a variable called counter, for example, in IT can have the value of five. Now, what subscript? Now, what TypeScript allows us to do is to say that this variable will be a number. For example, you see that by typing two dots and number. And you know that this context we're going to be enema. Or it can be a string. If we want, if we write here a string. It also can be a Boolean, which means that this gain is either false or true, false or true. Well, the same is true with functions. So for example, if we have a function called, get my name. Okay? And it returns Alex, okay? It returns my name. And now we can define what type of data dysfunction is a tunneling. So in this case, this function is returning string. So I'm gonna go here and I'm going to say it's a drink. And now we know that this function returns string. Also if the function receives parameters like, I don't know, ID, we can say here that id is a number or enter, for example, cities string. That is very helpful when you work with lots of function and bigger projects. And that is what essential TypeScript there's, and there's one more thing that you should know, should know about interfaces. Interface. What interface is, is, is basically a typing or object, let's call it away. So for example, we are going to acquit a interface called my name, my name. And we define here that, for example, we receive H3, a number ID of number in the city of string. Now what we essentially can do is to delete these and see that our data, which is my name. All right, so I have defined with the help of this interface a bunch of parameters that are going to be received. And all of them are going to be in the variable called data. And that is essentially what you need to know about as TypeScript. We're going to and as we're going to go and build this application, you are willing to be, you're going to get more and more familiar with these interfaces and this typings or isolates, delete this, we don't need them. Okay? And let's do the same in contact page. So act not collect element. And let's see. Okay, and these, so the TypeScript Islam doesn't know what this function is going to return because the ICC is a ab.js and we're not going to make it the TypeScript because it's a because frankly I don't want to mess with it. So what we can do is go here and press the quick fix. And we're going to disable the SDN in this file. Now the TypeScript, this integral going to give us any problems. Okay? Now good, Let's talk about our layout component. You can imagine that this is not a page, that this is a component. N is going to be reusable. So where do you think we have to create it? In the atoms, molecules, or organism? Well, if you have responded to with organisms, that's the right answer. Layout is going to be an organism because it will have the navbar and the footer with G are going to be molecules. So that means at the layout, It's a organism. Now let's create a folder called laid out here. And in this folder Let's create a correct component called layout. And also a let this SSS, or let's go into ALL component and just to our Twitter import React as usual. From React. Let's import the CSS layout. Css. And let's create this layout. Export cost layout is a function like any other function in other electrons. Like so. We can already type here react because we know that is going to return a React component, that element. I'm going to go ahead and say return a div for now. Okay? So let's think a little bit about our structure. This layout will, as I said, incorporate navbar end the folder in which they are both peachy will be in the middle. So, so that means we need to create a medium called, we're gonna give it the class name of layouts simple. And within it, we will, we will help. Also a deal with their, with their clustering morph layout, top, top. And here we end here we're going to have a, this is going to be our navbar in the future now bar. And this is going to be our, our children or our page. So the voltage will replace this or the contact page will replace this row. And we also need anymore. So you have here the footer. We're doing it this way because I don't know. The navbar is going to be other top and whatever the pH is going to have is going to also be at the top. Now, the space between the page in the footer is going to be anything fancy. Here is one space. Here's another space. And here is completely another space. And what we know is that the filter should be always at the top of the page. And these distance between default or ND, what the pitch going to be, doesn't matter. Okay, but let me just change a little bit here in preterm or seek to be the top width of two. And after I save this, this distance and happiness too big. So organized sales again, en la, the thing is changed, okay, now we know that this is going to be our future number and this is going to be our future footer. Now, this is where our page, we will stay. So what we can do. So you already know that graph components carry a sea of probes from their parents. So in order to write your props and whatever is being passed through this layout is going to be in the object called props. Well, we also can send through props are our components as child. I showed you an example earlier, but I'm going to show it, show it again. So say we have a counter as I said counter. And we know that you can send to it a prop via the keyword to the Qajar. Do want you to say, for example, value is equal to 5, okay? And also, so that means these component, we'll receive the value of five in the key default value in here. For example, if it was countered, you would receive this with props, that default value. Okay? But also you can send HTML as a child, like legs up, down. Whatever is here is going to be saved as a child. So, so it is being accessed in the company and by probes, not children. Therefore, instead of writing here, shouldering, gonna go ahead and might not children. And of course the TypeScript doesn't know what this is. So for now, I'm going to say any, which means that it's going to be anything. But later we're going to change this. So, so let's save this. And indeed the SSS, we know that we have the class layout and it will have the width of 1000% is going to be wide as your screen. I hope you know how to work with flakes because we're going to use flex. Flex, meaning that it's flexible. And we're going to say that flakes duration of the components is going to be column, okay? And they're all gonna be aligned to center in it also should SHE and it also should say all of your height of the monitors so that always the nav bar is at the top and the photos are is at the bottom, no matter water is originally had and what height does monitor half. So we're gonna go ahead and say mean, mean, height of 100, the hash. Because if you don't know what it is, It's a measurement unit towards much like the person, but what it does is just calculates this value compared to the height. So 100% of the height of your monitor. We also help you with. Okay, let's save this for now. Any also know that we have there a div called Layout top. So we're gonna say top here. This is going to be V. This is going to be concatenated with this. And after that we will have two classes. One called the layout and the second on cuckold, the layout layout, the top. Here we are going to say with a 100 percent and a 100 percent is going to be whatever the department is. So if the bond is ten pixels, ten pixels, this width of 100% is going to be 10 pixels. But since it's 100% here is going to be all the screen, it'll display flex as well. And we will have the direction of the elements in these div be also as a column. They're going to be outlined the center. We're going to have a max width of 100 thousand pixels. One hundred, ten hundred, two hundred pixels. Because as you see here, it is not going to take all the width, but it's going to have a maximum width of one hundred and two hundred and pixel because as you know, there are different types of monitors. Some are wider, some are not. But we are not going to extend the what you see here in the center to all the width of the monitor. Because, you know, if you have a wide monitor, then these mistakes is going to be at the very left and this glute we're at the very right, but we want to have all of them incentive. So that's why we have the maximum width of one hundred, two hundred pixels. And we're also going to give it a padding of lift of 30 pixels and a ponding of right, of 30 pixels. Now that's a two with the CSS. Now let's go back to our layout.css x. So we know that these said before serves as a wrapper to our components like close. So now let's just show to the screen the About page. The about page with this layout. So what we are going to do now is important to this layout. Here into the about page in basically wrap everything up. So we're gonna go and say lay out this way. And this dv should be within. All right, Any, we should import it. So Command or Control dot import from your torques. Okay, It's right. Save this. And let's look in our browser. Let's refresh. Or ISO, you see now bar here. And this is the about page what we have in the above page. And this is the hypothetical photon. So again, this is the about page, this is 12 we will have this is basically our pages. This is what you're going to write. Layout is just something that will wrap every page in. By wrapping it, it will give us the navbar in the foot because we are not going into like literally right every time in every page like navbar this way and also footer. Because that means we are going to repeat ourselves and that's not what we wanted to. Now let's save this and let's, let's import layout also in the contact page. Now I'm going to say as we're out, now, enter and this div should be with it. Let's import command lot, import layer from module. Okay? It's right. So you see, we can send, as I said, send probes as values here, like anything we want. Kobayashi, like 80 AT. And we will be able to access these q a d from layouts saying prompts that QU. And we also send props like regulation and Miller via the child way. And we're going to access it like props that children. So let's delete this safe. So I'm going to repeat one more time. So what happens here is that this function receives what's, what's inside it. And we're going to end, we're going to refer to it as props dot children. And that's kind of it with the lay-up. Now let's deal with this. Tap, tap your program here. So it doesn't understand that prompts is going to receive a child. So it doesn't understand that prompts has a value called children. And for that we're going to say interface layout. This layout to it have a key called Children, which is going to be a React dot. React. Note. This typings are given to us by React. This typings are given to us by React. As you know, we installed types dot react. Here, our key priorities. So that's why we can use them move. But what TypeScript hands from the start is just string. As I said, string, I have number. We have Boolean, and we also have our rate in. We have a couple more, but they're not important right now. So let's just change this to what it was, okay, React Node. Now there's one more thing we need to do, the following, the React dot F. So what did there? This says that this function is going to be a React function. It basically defines what type of function this is. And also we sent to this typing the layout interface this week. So again, what we do here, we say that this function, which is a rect function, we defined by saying that it is a React dot function, my TypeScript. And we seem to eat, delete the layout index-based n. Now, TypeScript understands that whatever this function is going to receive is going to be of type layout. And we don't need this anymore. We're going to use props. And what's the problem? Okay, So, okay, So stdin doesn't understand that, uh, we use this type of validation instead of prototypes that are actually gives us. So to solve this problems is go. So to solve this problem, just go into ethylene configuration file. And here between rule, just go ahead and write React slash prop types to be off and save it. And now, and now we don't have a problem with that. Let's save this as well. And now, if it happens that the error disappears from your code but appears here. And on your website just closed up and start to the year like Control C. And go again and start ER, start again yarn stock. If it happens, if it does not, that's good. Okay, so okay for us. So for me it starts now again. I'm going to close though called one. Okay. So, okay, so, so everything works fine. Now, just to recap a little bit, we have this React component, which as I said, is going so we're up around our pages, our React components that represents our pages this way. And whatever you have perfect in these two target is going to be sent as a prop to this to deselect component, which are going to show to the screen the navbar in the footer, which by the way, we're going to make them in the next lesson. Okay, so that's cool. Now, regarding the TypeScript at this Cs or whatever we put after, after the parentheses is what the pointer returns us. So we have here a ton of reactor acclimate to, which is a interface that roughly gives us. And what we have here basically defines what type of function this is n because reacted gives us these typings We sent to it our interface. And by the way, this is called generic type. So we have an interface and this interface, another interface. We sent to this to eat our interface, which now will understand that whatever we have here is going to be what we have here. Now regarding the ACEESS, I hope you know what I do affects is but if an odd, just understand that it's like any other type of display. But its content will be fx go is going to rearrange based on the screen. And we, we defined here that whatever we have in this block, if you need to be arranged in columns, n is going to be at the center of the screen. And here's the same thing. The block is arranged perfects. Its items are going to be arranged in columns and everything is going to be at center, not in the left. And that's kinda of it. Now hearing in ethylene, we made our role that it should not take into sequester, shorten the prop types that the reactor has by default. And because we now have TypeScript and it doesn't need prop types, are now if this 0 or PCU is because it is not defined in just a quick fix and disable know and therefore this file, it's going to enter. It's kind of funny because ethylene finds error in the slide. Doesn't really matter. Just save it. Close. Let's call it as well. So that's an even the layout. Let's just go and browser and see the conduct pages will contact. Now Board is the contact pressure cake. Everything works fine. In the next lesson we're going to create the navbar in the folder. So see you then. 13. Layout - Navigation: Hi guys. In this lesson, we are going to create a navigation for our app. Specifically, we are going to do the nav bar. Now, you remember we are leftover. This is the layout. We are going to replace this div with the future navbar and these photo with the photon we are going to make. Okay, Great Lakes go into all molecules folder because number in the filter is going to be a molecule that because it's not going to be, to be by the heat, will have a couple of atoms, meaning simple div's and labels or I. So let's create a folder called navbar. And also let's create a folder called footer. For now. For now, let's focus on the now bar. So let's create a component named Bardot six. And of course it is navbar dot SCSS. Okay? As usual, import React from export const bar toward a def. Okay? We already can do react because we know that the edu going to return a react element. And also let's create a class called nav bar. So our navbar obviously would have to be as wide as the screen is. Firstly, so I'm going to go say width of 100. It's going to be a phrase, of course, because because the elements within it are going to shrink along with the screen if needed. Flex direction of row. So the enemies within these now but AG are going to be outlined in a row. Next we are going to go say max width to be 16 thousand pixels. So exactly as before, we're not going to make it. Otherwise. I'm just curious because for, for example, for the wide screens, you will see their name, especially a more exactly this name on the very left and this on the very right. So we're going to maximize this width to be 60 pixels, sorry, 6000, not 16 thousand. Anyway. We're going to go as and justify content space between and of course align set S. So, so this is going to make that whatever, then r bar hazard, they need to be in the center of the page. In these omegas that the contents to be as stretched as possible with the equal space within them. Okay, We're going to save that. And also, we will need a biding tiding of assisting pixel arts that top 0 pixel, pixel in the right, 16 pixels, bottom, and 0 pixels left. Now, now let's say class name of bar. Now, as you saw, we had there a, a title. We're going to say me for now. We're going to call it nav bar on the line, the line title. So that's what basically what a beam is here. Remember I told you about him that I was going to teach you while doing so. So BEM stands for block element modifier, meaning that this is a block, this is the element. And for example, if we, if we have two types of title, the modifier will be with dash, dash. So for example, one is dark blue. Is does the read end in a CSS style? This one would have the color of blue and it's always have the color offer its own block meant modifier. We can also help block element and another element that will be the children of this div and so on. And so, so is much like a tree. This is the bar and bar and children and so on. You will see hardly Dong though. So let's delete that. Okay, Now, board title. I said our board title, and then we have the four for the social, right. Class Name now bar socials. And here we will have social links. We're going to change later, so we're going to change later. And down below we will have the menu going to be now bar slash, the underlying menu here. And you might ask why we have the mean you here to be the last div because here is ease in the center. Well, that's because if we stay should screen and use in a second as passive, if we stretch the skin, you see that the mean stays right in the center, while my name in the social links go inside. And thus because we are going to make minute to be absolute in terms of styling. So you will see now on a second, all right, but you actually don't need that to be here. It needs to be even envelope here. Any Seurat here that were less because the return can only return 11 HTML element. Not to note, note two at a time. So what we need to do now is either create a div that these two divs in one. Or we can use a little trick for that reactor gives us doing like this. And liabilities. Let's delete this, right? So reacts sees this as some kind of wrapper. And of course now we don't need the lumbar here because the menu is not a child in this element, right? So we're gonna, we're gonna say just minium. Now let's go ahead and style all this. We're going to start with title. I am not going to focus more on styling because this course is about reactor, but I encourage you to do the styling on your own and just pause this video after you finish, you can check with me to see if you did. Did it right? So let's go ahead and say point size here will be the 20 pixels. Now remember the function I told you. Now we need to import it. Of course. Donald, go ahead and say Import. Import. After we're back, back, back. Oops, into the styles slash helpers. And we will also need the style ballot end. And we will also need the topography. Now we're going to use the rand function. We're going to retain the pixel n is going to convert it to 1.300 and something. Okay, Enter, we're going to say the phone to wait. Now we're going to say include MSF. Remember this is the font that stays in the dipole refile SCSS file, and we just included it in our SSS, fine now, okay, Enter, we're going to say the color. And you're going to be going into our palette just to show you where is it. Styles palette. We're going to say Bullock primary. So we imported the important is palate. So we're going to say colonies is equal to black, like primer. Okay? And we're gonna give it a Z index of. And now after. Now we want to hover over these titles. So in the irregular CSAs you would go to dots hover. And this is almost the same like we were going to do here. So I'm going to say end over here. And now we want to say that course will be pointer. And we wanted to change their color to be primary blue. Primary blue. Okay, This is it. Of this color right here. Okay. I'm going to save this. Now we need social. We have had social there. So we're gonna give them a width of 300 pixels, 1000, ten pixels display flex. Flex direction is going to be Rho, the direction of the elements. The i1 is going to be wrong. Justify content, justify content. Space between. So all the elements are going to be spaced out within this width. Enter n is the index of three. Okay, let's leave it like this for now. And the last but not least, demand new menu, as I said, is going to have a position of absolute because we are going to keep it in the central always lifts. So we're gonna say left top. She said 3.5 pixels on the right as well. And here. And also is that index of two. And also we are going to give it a text align center, so they're going to be centered. Okay, save this. Let's go back here. We're going to have here in the menu. Here are going to be our social links in here, the deaminate delayed. Now, let's for now just import this navbar here instead of the hypothetical number that we had. And you know that, you know already how we do that. I'm going to say navbar and imported command dot important YOU. Okay? So it's being important. Now save this and let's look in the browser. Okay, MY social menu here. But we haven't done is to import the navbar SSH sintered and R bar at A6. So import. Now Bohr dot CSS. Let's see if now and look again. Okay, Okay, It looks great. Here are going to help our menu like, like here. Here I'm going to be all social links with these icons. Okay, So let's create for now a variable here called the mainland. And let it be a array of objects. And objects are going to be a page here. Okay? So for example, so d labeled, we're going to see is going to be the page name. So about, for example, what is going to be sludge about? And that for now Let's get a one for oil for contact, okay. Contact and slash contact. It's just an array with the pages that we're going to have n What we're going to see right here. Okay? Okay, that's good for now. Now, what we're going to do is to map this menu right here. So exactly like in the regular JavaScript, the map function, you should I think, I think are familiar with it. And you remember that? And you're in, you remember I said that we can write our JavaScript code within HTML lines with the help of curly brackets, right? So we're going to say menu, which is the variable here, menu dot map, because it's an array. Okay? Here we are going to send a callback. As usual. We're going to return a span, a span for each individual menu, menu button like for one, for about 14 contact. So we're going to say item here. Item. And each, and each element from menu is going to be an item in, we're going to say we want to show item dot labor, okay? But labor meaning this, this text. And we need to say, okay, key is you call item lot route because, because when you create a map Returning HTML, it always asks you for a key so that it has non-repetitive object is it just asks it for you. So you just have to write something here. Okay, So say if these for now and let's look in the browser. Okay, about in contact. So it works. Now we also need to style this pen so that, so that it looks better. So we're going to go into the navbar here. I'm going to say. And we want that these texts to be a bit lighter. So include essay uproar, not made the Mesoproterozoic regular. Enter. Let's call it B as the, as the title. Let's copy this. Okay. We're gonna give it a font size of 60 pixels. Like so. Or K. A margin left and a margin right of 40 pixels of spacing between them. 40 pixels. Okay? And you also need, when you, when you hover over this, to say cursor pointer. Okay, Save. And now you see that the, these pans stays in the div with the class of menu. So we have now a new class called class called saute, called menu on the line item, right? So the mean you here is that styling. So the menu here is the menu here. And the menu under line item is going to be another glands which we are going to attribute to this band. Now let's save this and let's look in the browser. Okay, It looks better. Now when you look into my website to see that when I am in a particular page, it turns blue and using the underline here. So we want to do the same here. And how we are going to do that is in the following manner. So we're going to say that each, each element in the menu will help a attribute called active. So here we are going to state if it's, if it's active or not. For example, it's a false for now. Active. True. Okay? And now a now for n. Now, if this element here is active, we don't want to use the menu item, but he wants show another class that is going to make this text to be blue and have an underline. So how are we going to do that is with the following. We're going to, we're going to create curly brackets here. Okay? And in right, the back tick here and back thick. At the end, we wrote here curly brackets because we are going to write JavaScript code in here. So this is the usual class right now, E, if this item is active, we want to change their class. So, so we're going to say dollar. Item that active. Here are the tertiary, tertiary operation. If it's active, then return dash, dash active. Otherwise doesn't, don't return anything. So what we will have if the element is not active, USC that this class here will stay just the menu item. And if the item is active and it turns true, it will return the slash slash, active, solid dash, dash active in. You will see that this class is going to look like a menu on the line item dash, dash active. Okay. So now what we need to do is to create a in a class just for that. So we're going to say and active. Also going to include the same font here. As a project cooler. They're going to say font size is going to be also 16 pixels. Pixels. We're going to say that the margin-left and margin-right to be the same thing. Or I better just copy this because it's the same thing, but we're going to make it blue. So much here. Hello, caller to be dollar per i money blue. Okay? And also we need to make it an underline. So we're gonna say border, bottom. One pixel solid of primary blue, coercive these. It is saved and needs. Let's now look in, look in the bonds of NEC. This is blue because so we said that it's active, okay? And it is blue because we said that activity is true, not because we are, we are in the browser at slash contact. So, so we need somehow to this value to compare it with the URL. So here a function comes in handy. We're going to say cost is rote active. And what it, what it is is a root, of course, which is going to base drain. You already know that it is going to turn if the root is exactly with the root in the browser, so is active for now, okay, respite a variable here, cost is active. And it will be equal to around three equals window that location, occasion dot path name, or window, that location, that pathname includes plot. So what we basically have here, we compare the route which, which comes as a parameter with what we have in the browser. What you realize is in the browser, or if it with data that includes this route. And this will return true or false, and we return true or false. Now, here in active, we're gonna say, is active in. I'm gonna say slash contact. Here as well. Is our active slashed about saved. So when the navbar is being shown to this green write, this code is being executed and it creates that these are the roads in it says active and executes this function which compares is about, is slash about what is in the browser. If not, it returns. False. If it is, it returns here, show this function here as well. And after that, the mean is being mapped here In the item that is being actively is going to have the class name in width active, and soap is going to be blue. The item that is not active is going to be false here and therefore will be induced menu item. Okay, Let's save one more time and look in the browser. K contact is blue as you know, let's go into the about page. And voila, about now is blue, N is active. But we're not going to leave it like this where one, so I get a different file for this because it's a different functionality. And we're going to go into the hooks folder. And we're going to create a for a file called use main ts. In here. Let's just copy this like that. And you're going to say export, const you as menu. We will basically use these dysfunctionality in our navbar, but do we make another file because there's going to be cleaner. So Cohen's the US menu function. And it will have a constant mean your language this. And we will return menu, save. Okay? So again, what this file is going to do, it will export a function called use minimum, which you will return an array with the current menu that we have. Each menu will have its label, its root, and if it's active or not. And this function handles if the road is active or not, so it returns true or false. It compares what to do. We have sent to it with the current, current URL in the browser with the window's location paddling, window location pathname being a standard way to access the URL in JavaScript. And now we're, and now we just need the one more thing is to create an interface called minimum. By the way, all the interfaces start with a, an upper letter. We're gonna say label, string or string, and active Ebola. And so this function returns, as I said, an array of objects, an object being narrowed. So we have to specify that this function returns distinct. So we're gonna say itertools a menu being array. So that's one way to specify that you return an array or you can say array of menu. And it's also going to work, but I prefer to do menu, menu array. Peter understands that it will have a label root active being an object, and it will return an array field of this with this object's lock, we have the menu here. What we can now do is to delete this entirely. And now I know we need this variable that has all the, all the roads and all the, all the navigation. So what we're going to do is a const menu equal could use a menu like so. And what we need to do is just to import these ops. Just import the module hooks, use menu. So we imported, imported these dysfunction from this file. That does all the logic and the Fourier if it's active or not. And we have here all their eyes that are in our app. So this way we keep clean our app. Save this, and let's check in the browser, should work or gave contact. Okay, it works. Now, there is one more thing we need to do for this to work properly. And that is 2. So we can go to About, You see, it's not clickable. So what we need to do is create a function that's, is going to redirect as in here, the history comes into play. You're gonna, you're gonna see in a second. So we are going to write onclick. We saw when we click on this pen, one-click. And we're going to want to write an inline function here that is going to call another function called the goal to go to page. And we seem to eat the road that this item has so Is being distinct, being rendered here, here it So is that the about page and the item B2 to slash about. So when we click on this, it's going to call this kowtow to page function, sending this slash about slash above the root. And we need now to create a function called go to page. As you might have my might have guessed. Like so. And Italy CEUs are a road which is the link in what it returns is void while meaning nothing. Now, so now we clicked on the big ones ago. We sent what route to go to. And now, what do you need to do is to redirect the current page to the new page. And here, and here is where history comes in. So let me just, just explain to you real quick here with the same drawing. So I said that this is director or DOM that has all the pages here in this library gives us a couple of variables to help us, to help us develop our up and one of each history. So this library director altar down is creating a stock with an array of all the paths that we went through, all the, all the roads. And we can, we can push our new roads to it. We can go backwards and so on. It's just a variable that helps us move back and forth given to us by Rotterdam. And there are two ways to get this history of function. One is by importing, write it from the Rotterdam. So remember this is wearable, watches, everything we do in the browser and it has all the roads from React, router, dom. Okay, like so, sorry, oxide, US history. And now we make a variable here called History, which is which has all the functionality they use US, history gives us. So use S3 is a function as are not available a function that the react router dom gives us in, we can set a variable that, that will have all the functionality that this function gives us. And now the only thing we have left to do is say this 30 list.pop and the new route. And that's it. So now when we click on this, this pan, it triggers this, this function which with the help of history from, from record album, pushes it, pushes the new, the new route into the, into the browser. And E3 other directors to the new route. So let's save and test it. So we are here. I say about it, just about contact changes to contact. So you see when you go to a new route, this now bar thing is surrendered once more. And because the meno is not the same anymore, another route is active now. So distinct is being rendered once again with another another span being being active. Oh, and I just noticed that the imports here at dawn, semi-colons here either. If, if, if, if, if, if either say semi-colons, that's, that's because of the pretender. See, you can go here and change the semi to truck. I'm just more used to see the semi-colons for k. So this is the first way to use history, which again is from reactor dome and it has all this functionality. This is one way, but we're not going to use this way because this is, this has limited functionality. We are going to something in the fissure that this US history can't give us. So we're going to use the second way. We're going to go on leaps in. We are going to create here a file called History dot ds. So leaps, say this for, just for libraries functionalities, anything that we want. And we want to import, create browser, browser history. From history. You don't need to install history or anything. It's something that react has by default. I'm going to export const, key story. Create the browser history. Okay, and because the types Gateway we want to do the following location, which has the pathname, which is three. Okay, so this thing is typical to TypeScript. And what it does is just defining death. Whatever we are going to receive. It going to be location and path. It's much like a definition mechanism that you will see. You'll see after where we're going to use the same thing with the US state. So what we basically did is create browser history. We create a variable called History, much like here. But we set it in a different file because we're going to use this variable anywhere we want to use a history way in the anywhere we want to push through a new route or anywhere we want to go back. So the next thing we need to do is go into index in change in this browser router. So why, why, why changes? Because Brazi Rotary is the one that gave us the ability to import these US history. But now we want to use a different history. So for that we're going to change, we're going to delete browser from here. And also from here. And now this router receives a prop called History. Which is going to be equal to history. And this, this history from the left of the equal ease. Our, our variable from history dot ds. So we have to import it. Import he study from now on from its, its leaps slash history. So what essentially we do here is k is great errata in S2 it a variable history. And seeing that like here, here is a history I want to use. And we created this history with this method. So now the rotor understands that this is the history we will be using. And any time we want to use the history available by going to a different route or going backwards, we will use this variable here. Okay, so let's save this here. Close this course as well. And as you already know, we're going to delete these US history and these as well. And we will import just important history from, from Merck doc, doc from a leaves slash he's studied. And now it will work the same, but in the future it will be much, much more beneficial for their functionality that we are going to be to be implementing. Let's even see in the browser, refresh about conduct, about oh, the contact. Okay, it works. But I think we actually can delete these dots. Let's say. Because TypeScript has this, also JavaScript, because we have this test convey here, ever have base URL, CLC. It understands and also any, it allows us to import files from, directly from C by typing juice domain. The main, the main folder here. And let's just move this back up. Save again and everything should work. Okay, torques. So that's it to it, the navbar. So let's recap. So the Navbar component is the component that stays here at the top. It stays in the layout. Layout component, which I said is a like our wrapper to our, our pages. E2 maps to the screen, each item in the menu with the function, with the help of function map. And this pan. We have the, we have the values in main or from a file called US menu that we created with all the, the main knew that was the menus that we have, all the links, the routes, and if it's active or not, we map them to the screen. When we click on them, that the route changes and went through changes. The whole thing is being re-rendered. And again, this again, the menu is being rendered to the screen. But now because a new, a new URL is being entered, each x again, which route is active? And the one that is active tones blue because we have here item that active, so we'll map here. So we map here each of these spans. And whether the, this item, the specific item that is being ran that is active, will have a different class than the one that is not active. And now because we're here, let's just add another line because we have, we will have three pages, like you've seen on our website. I have here I portfolio M books, but we will not do not create the books and portfolio because that's just repetitive. We're going to go, we're going to go ahead and just create the blog page. And if you understand how to create the blog page, these two pages are going to be easier for you. So we're going to go ahead and say that we are going to have another page called the block. That's going to be at slash blog. And the road is going to be slash blog. And let's go to our index.js x, our entry point, and create another wrote at slash blog. So that the router understands that when it sees a slash blog, it should return the blog page. Let's just get it real quick here. Pages. Blog page. In here you're going to have a blog, page 86 and also a blog dot, sss, Sss import React from New York. There's always an export const blog page like so, which you already know they don't react. Element. And really tone here a simple div saying that this is the blog page. Save these hearing now we need to import in the router. So like this is our gate and it needs load at when he sees slash about show the about page, when it sees slash block beneath to show the blog page. Rope beach, like so and imported. Let's bring it up. Like so. And now this blog page, just electrons, this is the blog page, but you know that. But you know that because this is a page, it needs to be wrapped around the layout that we have so that this page can have the navbar in, can have the footer. So much like about page has this layout and returns whatever the page is going to be about. And contact page as well has this layout to this wrapper and ISBN iterators. What the contact page is going to be about. Double page as well. It needs to help this layout wrapper. So we're going to say layout in. We delete this here and place it here as like soap. And don't forget to import this from a UI organism layout layout. See if these, and let's look in the browser if it works as we expected. Afresh, okay, about this is the about page blog. This is about page contact. This is the one type which book about log conduct. Okay. It works fine. Okay. So that's it with the navigation. Let me just close the pages here. Contact page an about page. Here we have here the number. This is there are more convenient to use many of the VCs, what we did in this lesson. In the next lesson, we are going to create the icon component, which will help us show these icons here. And after that, we're going to add, we're going to create the footer because it also has icons. So that's pretty much it. I will see you in the next lesson. 14. Layout - Footer & Icons: Hi guys. In this lesson we're going to make the icon React component. So there are multiple ways to work with SVGs and react. One of which being, let me, let me get an example for you. I'm going to quit here a folder called icons. And one way, let me close this. One way is to have like a file. File is Mg. And here you would have the, the, the code and you would work with this as a component. Now that's not very dynamic and it has its problems. So That's why we are going to need to work with another method. And this method implies that we are going to create a rocked component, which is going to return as if G code. So let's begin with by, by creating a file called icons that TSX. And start here by importing reacts from React and exporting, of course, Export, Export icon. And the now and the idea is that we are going to use these component for every icon that we have in the whole app. So it's going to look at the libraries like pecan, and we're going to send it a prop type called for example Twitter. Twitter. And this, and this, this tag would return the Twitter icon. If we say pre-book. This icon will represent the Facebook icon. And now we have to implement this in our components. So you understand that this this icon component may your, I don't know, multiple CGs in what is in G is going to tone. It is going to be based on what it, what it receives as a prop, as you see, as you saw before. So we will send as a prop a icky called types or type. And I will write here probes. And here I'm going to say const type equal prompts. So that is destruction. I think you already know that from the script syntax. Its destruction in the seminar, like saying props dot type. But we, but this is faster. We just take the type of variable from props. Okay? Now, since this type may be like, may have the value of Twitter or Facebook or Instagram. It means that it can have multiple values. So for that case, you're gonna create a switch. So each type, and we are going to return us OK. And in the case that type is equal to linkedin, for example, we're going to return will be done a SAG value. Now already, I know the SAG for a folder for linkedin, and that's because I have already downloaded the dealing icon. And again, put this here. Okay. You can go online and I think it's flood the cone, but it will not come. And you come in, you can download the icons from here and say, for example, linkedin. Come on. You can download it from here, like so. Now one CFG free download. You can save it on desktop for now. Let's close this. And let's go on desktop. Take this copy. We go, we go on our website and let's paste it for now in the resources here, just for exam. Now let's go back here a new see the link NSFG. And you have here the code for it. I already have all the SVG tags for the icons I needed because I said I already built this application. So what you can do is either go download your own icons or you can go on my GitHub. That's what we're building now, but let's go to the already built project. This one, SARC, resources icons and this icon component. And you have here all the SAG tags for each, for each icon that we are going to use. Okay, so for now this is the, our linkedin. Okay, so for now this is our LinkedIn code. In case the type is going to be linkedin is going to return this. Now in case it's Twitter, it, of course filter will return. It will return another CG. And let me just do a little quick copy. Copy this, like so. Okay, so I'm going to pause here and fill all these cases with the specific icon Indian are gonna, we're gonna go over it again. Okay, so it's done. I have a here and an icon for Facebook, and I call for Instagram, icon for GitHub, an icon and a smaller icon for Facebook's model for Twitter, icon for, for the copy. And I can force more like, and of course, a default return. If so, if none of these cases return true, so none of them are true. The street you will return this eMTC of g That doesn't, doesn't show anything. Okay, So, so as I said, you can go and find their own icons if you want. Or you can take mines for my GitHub. Or M by the way, speaking about this structuration, we don't need to actually say const type from props. We can do it more and more easily this way. We're going to delete proccess a pipe. So now the function can have access to the time variable. And we're not making another variable just to take up space. And also I want to create a class name, last name. So if we want, we can send to each of these SMD a class name. So in the case we want to edit something. And of course in onClick function. Because when we click on an item, it should be able to do something. And of course, because we can, we can pass values as props, we can pass functions as props as well. So what we need to do now is just a class name. Class name. So the class name that this ECG we'll have will be the class name that we said as a, as a parameter, as a prop. And of course, the last but not least onclick. Onclick. Onclick is the ACGs attribute and this is the function that we sent as a prop. And now just let's make an interface for this because you can see it's red and yellow one. And the face crops end. We will have here a type which is going to be a string. So what do we observe? What we are going to receive in this function is a what? So what do we are going to receive when this function is a probe called type, which is going to be staying a className, which, which is also going to be a string, and an onclick, which is going to be a function. So we, we, so we represent functions in Israel. Right? Now the thing is that for some icons, we may not want to send a class name or a onclick, right? Type is always going to be available because type is going to define what kind of I've gone to return a. But clustering is not, it's not obligatory. Okay, so in this case, to expand to tap script that this attribute is linked, It's not going to be obligatory for. And what this essentially means is that if the probes has the key class name, if it has, it is going to be a string. If it doesn't, it doesn't. And as you know, we have to write here react fc to define that this is a rect function. So TypeScript can know ensign it that probes interface. So it Became validate anything that interests us. Now what we need to do is just copy this plus naming onclick to each and every icon. Now we have one more thing to do. And this is and that is colors. Some icons may have their colors by default and some, some, some may just be black. So let's create here a constant called black color or a bit area to let's say calleds for Icon colors. And say that dark yz 4, 4, 4, 4, 4, 4. That is the dark primary that we have here M styles. You see primary Burke is 4444046. Yes, 640. Let's save this. Or I didn't means a coma. Save these. In for a couple of icons. We're going to say field, and we want them to be black or dark, sorry. Copy. All I. So that means that by default, these icons will have this color. Let's save this. All right, so let's recap. We have here a component called ICANN, which receives as a prop, a key called type, a key called className that may or may not be. So it's not obligatory. And a function called onclick, which is also not obligatory, but type is obligatory. We send it the type that we want and we create a switch here to find the Watts type that does is. So if the type is Linkedin respiratory, a CFG that represents the Linkedin icon. The same for Twitter, Facebook, and so on. We have attributed class name, class name of this as f g in case we want to give it additional styles. And the same we don't click when you click on this icon. If we have sent a onclick function, function, it will do what, whatever we sent it. So that's essentially what it is. Of course, you will see in a bit. We're going to create the footer, and you will see this icon now, i icon component in action. Now, let's first of all go, go to the node before and are these social, social icons? So what we're going to override is the following. Like so. We are going to get a, a, a tag with the RAF of the league to my LinkedIn, for example, this will be Linkedin. When I say target blank. So a two door open in a new one anyway, adopt in the real. Real is going to be low per node f at a. This is, this is not necessarily a protractor needs it. And if you don't write it, it is going to complain. Now what we will have inside the a tag will be our icon, as I said, icon type, LinkedIn. Linkedin, okay, and get close. Or I, let's import this icon Command bought import icon from Module Resources icon, icons. Okay. Now it's important, Let's save this and look, and look in the browser. All right, Let's go back here. Let's open the tab and you can see our Eigen is here. And now you guessed it, we need to create a dog for every social link that I have. So I will be having here Twitter. Here, here is going to be Facebook. Here we're going to be an Instagram. And here is going to be in GitHub. Now save this and let's look in the browser. Now you can see all the social links. Now of course, these social x-dot doesn't tolerate directors to anywhere. And you can write your Linkedin account or link editor accountable here. But I have a better solution is that these by, by involving the environment file, you see that I have here a variable for each of my URLs. And what I'm going to do in just filled up. Like so sodium are safe, these like so. And now we need to access these variables in this file. And how we're willing to do that is by, by writing our curly brackets and saying not the event and parentheses and saying, let me check the link DNA URL. Like so. Linkedin URL. Import this N by, by pressing Command or Control dot. And eat should be able to see that it can eat, can import it from module beam of Australia. Or let's move this down, this up, like so. So n is a function given to us by being Australia reactant, the library that works with this file. And what we send, whereas what we sent to this file, to the soil, it to this function is going to check in the end of the file, is going to check only what is after the reactor up. So we have here linkedin neuron. Here's a LinkedIn URL and what it does, it, it goes there, it takes the URL and places the URL here. So what we need to do now it just copy these four Avery for every a tag here and change the, change the naming in just a little bit. So here like so, like so. Focus on Twitter is going to be Twitter URL. Okay, like so. Twitter URL here I fear is going to be, I think Facebook girl, Facebook, URL, Instagram, you know, I think. And of course, GitHub Bureau, Facebook or on Instagram, narrow and deep fibula. Okay. Okay, let's save this. And now it's not going to work because when you start with the ARPU than RGS, or it's all the files that you have here. And if you change something in the end, then an adjustment will not know. So what do you need to do is to close the react and you start it again, Okay, It's starting. We can move this here and close the last one. Okay? So let's go to my Twitter. Okay, torques. You say on, Let's go to my GitHub. It works. Let's go to my LinkedIn. So they work. So it's not obligatory to use the n function for your social media accounts. But I chose to do it this way because in my opinion, it looks cleaner. Okay, so now we can close this m file and the icon's fall as well. The EDS, we don't need it. And let's go ahead and create the footer. The footer. The footer is also going to be in a molecule. So let's create a folder called the footer. Footer. There already credit hour and say footer.html six. And also for del dot SCSS. Because usually import React from React and Export. Export const for the quarter. And our footer is going to be much like the navigation. So let's start by returning a div and say that it returns an actor that the demand. Okay, so we will have two divs here. Let's look at my website here. Okay. Okay, so you see here that I have listed the menu and I have my socials. So, so let's create a div for the, for the menu and also a D for the socials, right? Let's call this photo. It is going to be further slash underline, under Lines menu. Remember this is the BIM methodology and this will be className socials. And now we can basically steal from ourselves because we already wrote that code. Now we can basically copy the dismantle from the navbar because it's going to be the same. So we're going to copy these. You're going to say that this we are going to play this here. Okay? And socials as well. Let's copy all the socials. Social links. With all the icons and copy them in this folder. Okey-dokey, a lot of red. So let's first import, import them and that's important icon. Okay, now it needs that go to Function is copy these and menu as well. Like so. Use menu should be important from hooks us menu and history push this history going into it needs imported. So import the story from, I think it's a leaps right? And history Save. All right, so that's our component. We basically did it in record time. Let's do the CSS and then we'll go over, we'll go over all of this once again. Okay, So we have a class called footer. As you remember, this water, we'd have the width of 100%, as you see. It's wide as the skin is white. So it will have 100% and the height is going to be 274 pixels. Right? Decide. Okay. Margin top. Let's give it a 100 pixel. Back. Come back. Come on. Background color is going to be slash, is going to be dollar, bag, ground, footer in, we're going to import the variable just in a little bit. Display flex, flex direction. Or the older companies should have the duration of column in the online. They should be aligned to Santa. All right, Let's first import the variable that we have here, right? So let's import our First of all, we need to import the palate, right? Because we have here colors. So we should go back to the Styles and choose the palette. Also, we will need the topography, tai chi or pornography, where is it? And we will also need the helpers. Helpers, the first one, like so. All right, as I save it, now, we have many rights, so many new menu here is, you see, therefore Delta first-class, footer menu is the second class, the charge of the first div. So Footer, Footer Menu. Like so. We're going to give it a display office as usual. Flex direction of row, justify and justify content. Center thing. Say Enter. And let's give it a margin top of 90 pixels. Now let's go back here and see that. Remember we had this class menu item and when, when the navbar is active, it's going to be another class called menu item as dash, dash active. Okay. We also need to get this glass is go ahead and say and end item. Item. Let's include the for the SF Pro font, regular color is going to be primarily black. Black, black primary font size of 16 pixels. And margin-left and margin-right of for the pixel, just like in the navbar. Now, now don't forget there was, now don't forget there was a Harvard. So when you hover over, over the menu, you should be able to see that hand. And so cursor pointer. You see this hand when you, when you point at something. And now this is the class for the menu item, right? We also need a class for Me, menu item that is active. So let's just say active. So again, the beam structure, this is BOC element, also element. And here we have a modifier. So we write more defiles with dash, dash in front of the text. And underline, underline in front, in front of the, of the element. So a block element, element modifier. And now, and now let's just copy this because this is the same thing. But the color is going to be going to be blue, right? Primary blue. Blue. And it should have that underlying. So border, border, one pixel solid. And it should actually take the color of the font. All right, let's save this. And this is all right, everything. Let's say this again. And let's go in the browser. Let's look at our app. Okay, so it doesn't show anything because we haven't, we haven't applied this photo yet. Now remember the layout component that's, as I said, is going to overlap. Our pages are here, brought here footer, but we actually need the actual footer. So we're going to say footer, like so, and import it. This way. Save this. And let's look in the browser. Or I solved. And let's look in the browser. Okay, So there are properly, okay, and let's look in the browser. Okay, there's a problem with the CSS. Let's go into our layout, SSS and C. So they are, so our right we need, we are going to say, justify content to the space between. So the elements in the layout are going to be spaced out. So the first one, I'm going to be at the very top end does the last one is going to be at the very bottom. But let's see if these I think. And now if I think correctly, I haven't, alright, we haven't imported here the SSS, so important for the SCSS. Let's save this. And now let's check in with the browser. All right, it looks fine there Jews, this problem with the SSS, but all right, all right, it looks fine. There's just one problem with this piece in here. Or we'll, of course, because we have not defined the socials in the DSHS, right? So let's close this layout and the close, you see, we have rode the footer menu for domain your item, item that is active, but we haven't eroded the styling for their socials. So let's go ahead here. Alright, so in these these and say socials, with 210 pixels, display of flex, flex direction row. Justify content. Space between as well as between. And let's give it a margin. Margin top of the 50 pixels. Margin. Bottom also being 50 pixels. Okay, let's save this. And now, and now it looks wonderful. Okay, So this works. Let's go back and go over the, over the whole thing once again. So in our layout component, we have here the navbar that we will show it to the screen and the footer. These two will rub each and every page that we have which we sent as a prop. And of course these are, these are our pages, like my blog page, which is wrapped by a layout. The contact pitch, which is also a erupt by a layouts and so on. Now the photon is much like the navbar. It lists the amino that we have. So we have the variable menu that we have imported away. So it has the value. So it has the variable menu that has all the, all the, all the menus. This variable is from the US menu hook that remember we created earlier here. Hook's US menu, which we have here, all of our routes and each, and every item of our minimum. And it knows which one, and it knows which one is active in you which one is not. Okay, go back here. Okay, so it, it maps them to the screen. It gives them a class name of menu item. If the item is active, specific item that, that is going to be active will have a slightly different class name. Namely it will not have menu on the line and that line item, but it will have menu under NDA and the line item, dash, dash active. All right, here we showed the label. We have down below for the footer socials, which we have here an, a tag for each and every social data that I have. These enter file is returning my social link. An icon is going to provide the icon for that social link. And let's not forget, so keep this in orders or actually the first, the second, like so. And the last but not least, we have here a function that redirects us to the page we want to go. This is a aligner function if you don't know. So for example, let's say we use it because we can't just say like this. It gives you error. But on top of it that when when, when the reactor renters these lines like spans, pens, pens, pens, pen. It will execute this function because it's executable. So that's why we'll create a function right here on this plot. A function that calls this function, right? So much like any other function that we will have. Now as you know, as you saw in the icon, icon component, we can pass, we can pass functions as, as props are just by deleting this and also this. So now the component a will have this function to do whatever he wants with it. But this is a span so it doesn't work. Let's go back. Let's save. And let's look back in the browser. Let's go to Blog contact. Blog about block contact. Okay, it works fine. So this is with the footer AND navbar AND icon component. This is the end of the chapter. In the next chapter, we will start to build our pages. We will start with this page and then we're going to go to blog and then we'll go to contact. So, so I'm glad that you made it this far. I know there is a lot to digest, but as I said in the info ongoing in depth with this course. So you're not alone in just the fundamentals and how we act towards, but you're also learning how to build their laptops in a efficient, a professional manner. So that's it with this video and see you in the next one. 15. How the Web Works: Hi guys. I said in the previous lesson that I'm going to quit the first page in this lesson. But I decided that to explain to you how the web works. Firstly, we'll go over APIs, backend requests, requests methods, and how to check them in the browser. And particularly when the front-end and back-end are different projects, in our case, being the front. And if you know this stuff, you can skip this video. But for those who don't know distaff, let's jump right into it. So I have here enjoying that, tries to explain this thing as best as possible. So what we have here, firstly, we have to go to the browser, right? This is our React app, our React code, the JavaScript and the whole front. Now to the other side, we have here the back-end server. This is where this is where the database exists and the code that handles the requests to the server. The front-end and back-end communicate. We'll via the API. Api stands for application programming interface. In it is responsible secure order. I'll show it to the server and then it shows you what the cellular handset. I know there is a video on YouTube, a spinning wheel API. And there's the analogy that the API is like, it's like the waiter in a restaurant. It takes your order and in the beings you'd have food after it's cooked. So the way works over the HTTP and HTTPS protocol. These protocols are just a set of rules. One rule being like the Severus is that I expect to receive this and I give you that. Okay, so HTTP is a protocol and we communicate with the backend via the API. We know from our beloved front end can make requests to the server via the API. In API, just like an address like when you type Google.com. When you go and Google are you will you basically make their case to the Google server and it gives you back the page. The same happens here. We will just use a library called axis to make a request to a particular API, which is basically a euro. And in return, we will get some JSON data from the server. Next, steady quests have a method attached to them. A metal is basically your intent like so for example, I have here a non, non existential API and this my database.com o slash API. And if I make a request to eat with the method, often get, it means that I want to receive data from the server. The API says to the server that the requests that I made is with the get method. So it should give me the list of photos. Because, because we hit slash for those in this example, if, if the method is post done, the server understands that when I'm making this request, I don't need data to receive bag, but I actually am sending data to the server and it should store the data that I have sent with the request. Indeed, that the database. The delete method means that I want to delete something from some data from the database and patched me that I want to edit some data. This API addresses like this one, slash api slash photos here are just like addresses of homes in your city. I go to RGS, like slash photos, meaning that I'm going there where I can receive the photos. I can go to like slash persons and I should receive the persons from the database, assuming of course that slash persons exist. And these slash photos slash persons or slash slash photos slash ID for example. For the example, five are called endpoints. This is a, an end point. This is another end point. This would be yet another point. Persons, and as I said, endpoints are addresses of homes or I. So we make requests from our racked up to the server. We specified the address or the endpoint for that matter, the method in the data, depending on the case. In the VAD is this API. We receive data from this address across the Internet from my server somewhere in this world. Now let's look at the requesting browser. Let's go to my website here. I have here the beige block. So imagine that I receive here a list of blog posts. For now, I just have one post, but I will, but we can't see you when data is coming. So let's go ahead and say Inspect Element. Okay, like so. And let's go to network. And here is the place where you can see all of your requests. Now we seem to, so let's just refresh this page. Arrives a couple. So you see here a request called posts with the status of 200 mean that he Turkey for row 4 is 4, meaning that the endpoint doesn't exist in you can check the status code if you're not familiar with them. That those quotes 100, this okay, is continuous, only 200 is okay. 203 is not an alternative information and so on. 400 is bad request. And this is how an odd in the status of the requests. Okay, So it is 208, so key posts, Let's go to Headers here. So you see a request URL. I have requested the posts from this link, https Alex, I expanded that tech slash api slash posts because I have created a backend for this website. The request method is good. The status code is 200. This is the remote address and a bunch of other information about the about the request. Now preview, and this is what we have received back from the server. We guess a here. Let me just make it bigger. I hear is it n an array with one object being my first post. And here I have covert URL, the link of the cohort. When, uh, when it was created, what, what I did has in the database, if it's a book essay or not, how the number of flights it has the texts I would actually what it contains at the title N1 needed was a bit this is the data.txt Korean database. And when I make a request to slash api slash posts, I received these posts. Now what you see here are other requests made by the browser to the server, the front end server, to give back defaults and other stuff. Let's go to the book page. Codebooks. You'll see books are not the request. The request is to mine domain slash EPS ij books. It's also a get request. So I, I receive data is a key. The third score is okay. And other than other information, Let's go to Preview. I receive a, an array with the books. So it's 11 book, the author covering another created title and so on, which you see here. And let me for example, to go here at what is it here in. Let's simulate a slow connection. And let me refresh this page and you can see it's bending. And you see it has arrived. Or I so that's it with the request. That's how you how you see what requests are you making from your website to where our server. And you will see how we're going to use our axis to do that in the next video. So I'll see you then. 16. Page 1 - About Me Page: Hi guys, will now start to develop our first page, which is the about page. And you can look on my website, you see how it is going to look like. Okay, so for now you just have known that I have added a folder here called the resources. And I encoded do to find the five pictures that you want to use on your website. I have here are a couple of wallpapers that we're going to use. Instead of my pictures that you can see here on my website. I have used here mine because it's personal. So we are going to use these pictures and its comeback here, here. So just go ahead and find five pictures that you want to use on your website in the About page, right? Well now let's close this and let's start building our website. So at our page, we now, we can see that here we have a block which will contain our pictures. Here's another div. We'll go and say our texts or four. Now we know that we need we need two deeps, windy if like that, and another one like so. And let's give the first, the first one a class name. It's a little game of, oh, and I forgot to create the SS CSS file. So about H dot SCSS. And of course let's not forget to import it. Import the CSS. Alright? Alright, let's give this a class name of gallery. Gallery. And let's give this a class name of about me. Let's make sure that the class is on point. So let's quit about. Let's give it a width, width of a 100 percent, although always display flex, flex direction, row. So it's going to be the pictures and the day about the road thick. So it's the elements are going to be arranged in a row Fashion. Row, Key, justify-content, center, center. And let's give it a margin. Top of top of 15. Pixels. Like SOC. Save this. Save this as well. And let's put some pictures here. So you can see that I have here a big picture which is going to be eight a M G dog. And I have your anode of four which are going to be within another deep. So here we will have an EMG tag. And here we will help I'm under dv with the others IMG's images like so. And let's call it Gallery IMG. And this will be called gallery photos with two dashes earth here. So you see that that is the first picture, which is the big one. Here we'll have listed the small ones. All right, so let's refer it to the resource folder. And you might ask why I have I have here AT source folder while I have also hearing the SRC folder, as I said, when you have something that always stays with the company, that you should keep it in the same folder. And since these these pictures are going to be used only by this component right here, there is no need to place them in the resource folder from SST this year sources and just for the things that are global. All right, Let's, let's say SFC. And we will say required. And I'm going to expand in the second week. Like so in DNI sources of JPEG, JPEG one JB. Okay. So why required why or why not just, why not just this path? Well, I told you before, this whole thing is going to be compiled and what is going to be built are going to have another structure. So you can look at it this way. When the whole thing is compiled, this HTML lines are going to be somewhere in a GS file, right? In what it will contain, either look at this path, which in that case we, after it being compiled, this path does not show where the picture is, right, because all the pictures that we have in the whole app after built will have a folder called media. Yes. Or the GS will have a folder called js. So this path is going to be invalid. And that's why we use the require function that reactant gives us our work around this indistinct. You could actually say something like It's static media or something in one j peg, which is going to be the path that they're going to be, to be correct after the React app is built. But that's a risky thing to do. So we're going to go back and leave it with the require function. Let's save it, and let's first of all give it a size because, because the first picture is quite big, so it will take, take up all the space we have on the screen. Let's go into the ACS is let's create a gallery. But wait a second, it's different. So it's about in the, About has the gallery is not, it's not like about gather like this. So let's go back here and change it to just gallery. And it understand that this gallery is a child of this about so the div with the class name of a gallery is a child to the div of class name with the class name of about. Alright, gallery. Let's give it a display of flex. And of course you're going to say that flex direction is column. Because you see we have here the amine picture, and here down below we have this picture. So these two elements, this one live in, this is another div are arranged in a column. So that's why we say flex direction column. And also let's see. I mg to the, for the, for the first picture. And let's give it a width of 400 pixels and a height of four 520 pixels. Object feet. Let's be covering so that our peaches feeds into this, into this size and doesn't stretch. Because that, because that will make it only margin right? Margin, right. Of 37 pixels and a border radius of six pixels. So it will have a nice rounded boulders. Also. Let us give the board the solid background. Background color of border. I have here in palate a color called the border, which will be the color we're going to use for all our borders awhile. So let's close this and let's import this SCSS file. So import back bug styles, palette. And also let's import dipole graphene. Because we're going to use funds are, let's save this here as well. Let's save this. So let's check in the browser. Okay, at least the styling works. Let me just shaken what it says here. Okay. The sources. The sources. It's okay. It sometimes does work, sometimes does not, but there's a workaround for this or you can import here like photo one from sources. Like so. And we should be, but actually to show the picture. Also, this is one way to import SVG icons. Okay, so let's save this again. Let's look. Surprisingly it works. Let's call this or let me just Aspect again, just to show you, you see there was a static mirror that I told you. So after bundled, after it's built, way back, the library that builds our app quits a folder called static sludge media. Here is our picture and it's close it. Go back. And let's import the second pictures as well. And go ahead. The pictures that are smaller here. So let's first give it a class name of salary for those IMG image. Let's give it a photo to n. Also don't forget to go to derive all of the algae boots saying that, saying, saying something if the, if the photon does not built for the one photo to, for example. And let's go ahead in this class and create the IMG MG class. So we need to have a class called photos here. We are going to give it the despair of fakes as, as usual, flex the rationale for all because flex direction row because the photos are in roll. All right. It's all yours all over the place. You see the photos here are in a row, so the elements here are supposed to be in row, while the whole div is a column. As a rho max width of four pixels. For legs. Flexor up. So Rob, flex wrap a rope is the line that allows us to to make this line from being a row to make a column when, when the, when the width of the page is to choose more. So it does it automatically. When the baby smaller, these are going to convert into a column. So we're going to leave it like this ramp. Justify content space between margin, margin, top. Because once halftone space between these four those and the big, the big picture margin, top of 20 pixels and a width of 100 percent and actually shouldn't be other top like so. And also the IMG class width of 90 pixels. So photos is that d of n, which are these photos? We'll be we'll be staying in the IMG. Is there the glass for each individual photon? This is also a height of 90 pixels. A object fit over bolder ideas. Border radius of six pixels as, as the, as this picture. Also back background color of border, margin on the bottom of 20 pixels. And also let's give it a margin left and right. If five pixels, margin-right of also, also 50 pixels. Okay, let's see if these, this is on-point gallery photos, gallery for those IMG. The second photo. Okay. Let's say we again can just looking in the browser. Okay, it works. Okay. So let us just important features. We have five beaches, 3453. By the way, there is a trick and VS Code. You can, for example, go SLA DC Gallery and press Command or Control D. And it goes to the second, the second word that is the same. D, d, d, d, d. And we can choose a black swan. Ok, save it again. Let's copy this 2345 and do the same thing. 3444. And five, Save. Let's look in the browser. And they work. Okay, so that's it with the showing the pictures. Now, let's go ahead and create the text. And I will pause here and just go ahead and copy all the text that I have on my my actual website here. And I'll explain. All right, so I copied my text and what I did, I created a a D for each of my paragraphs. So I have a div here with a class of about me, be paragraph. And I have some text here. Then about me, p and a half, some text here, and so on from just like in my, my my actual website, a one paragraph, another paragraph, the third paragraph, and so on. Now, there is this, go ahead and create the DP class because I haven't created it. And now let's see. And now let's see, it's about me. And these classes in the, about the, so both me here, here we are going to create about me glass. Like so let's give it a margin left. Because we wanted to have some space here. Margin left. 37 pixels. We're going to include the SF or, or regular font. And let me have unipolar ok. Font size, font size of 18 pixels. And I have to import that the LM function from the palette. Let's go ahead and say social styles. Styles, and where is it? Helpers. Okay. But I'm 18 pixels here. Don't forget that. Now to just 18. And color of black primary. And now created the class width, the width of 430 pixels, for example, a margin, bottom, bottom of 20 pixels, because each, each paragraph, we'll have some space. Right? So if you have space here, 20 pixels, and that's it. Let's save or now. So here, right, see you again. And let's go to our website and refresh. All right. Is it lagged a bit? All right, so it looks great. I think we just need to make it a bit more bigger. The demoed. Let's make it 20 pixels. Yeah, that's better. Now there, now there are couple of more things we need to do here. I see here that I have the Software Engineer in bold and bold emails also, the bot is bored with underlined and bold as well. So let's go ahead. And in our, in our React component in Kuwait, create a span here for the software engineer text. Let's copy this. Put it here, place it here. Like so. Delete it from here. Save. And we'll give it a class name. And remember, I told you about a place, a file actually where we will hold all the global classes that we might need in our files. Well, if you said index dot SSS, That's right. Remember I deleted a couple of classes from here because I wanted to make them with you. So I have already a class called bold here M bold, color black. And it's actually what we need for the first span. So we need a class called boat, and that's the class there, n colored, colored black. And you know, we have access to all of these crisis because we have them in index.html, index.js, ETC, is being imported into index.js X, which is basically all of our app here. Let's go back. Let's save this, and let's look in the browser. All right, it looks just as expected. Now we have, for the same thing is just copy this. Basically clear. They need the UX UI. And well actually in your case is something different. Okay, so let's look at it in the browser. On the right is looks good. Now we have here the image, make it bold and underline in this, make it bold and black as well. So let's go here for the e-mail. Where is it in like so let's make a span here. Like in the previous previous case. Span, copy the e-mail. Go ahead. Like so. Class name of mold can call her back also n, we want to make a class called underlying because we don't come up class called underlined. And we might, we might use it in the future. So underline, underline. And we're going say border of one pixel, solid hour for whatever, whatever the color is. Save this index and just, just say here on the line. And it should work. Let's, let's look in the browser. Okay, it works. It's just that I have set border instead of more than bottom. So it's a border. Bottom here. Double tee, save. Let's look, it looks OK. And let's make the same thing for the, the, the Twitter, Twitter tag. Span here called copied into delta L here. In class name of bold color, black, 7, 8. It should be it for the, for the text. Let's look again in the browser. All right, It looks great. So that's kind of it with this, with this, with the images and the text. In the next video, we'll create a model. So I have here a model. If I, if I click on any picture, it shows up like so. And we will create this model. But for now this is it. It looks pretty, pretty tricky. 17. Page 1 - About Me Modal: Hi guys. In this lesson we're going to create the model for the about me page. So to know what I'm talking about, It's this model that brings up the pictures are in front and makes it bigger. This also, and this as well. Okay, so let's first go back here. Okay? So you can imagine that, that what appears is going to be a different component and we need to create it. Now, there are two ways to accomplish this model. Functionality. Just energy is going to show you in a second. Let's quit here in UI molecules, a, a company called photo model. Model. And it's great. For top. It is six. And let's not forget about it. Sss, Sss, like so. Import, React from that with big hair. From React. And I of course it's sport or don't model. Yes, like so. And let's save this. Now, there are two ways to achieve this functionality. So like the photo to cover up all the page and I can, I can scroll now. So UK, you create a new component and give it a is at index 0 to 2 or whatever, whatever number above one, that is one, but it's not the best solution. And there is a second solution that involves great model or create portal, sorry. That's a function from React that, that help us to create this little interesting feature that we can create another div here. So quit portal is a function that creates when it's, when it's called. Of course, a new div here. Aside of the div. And actually does not create a new div. It, it can have places new content and not in the ID root, both in the second, second div. So let's go ahead and say id of modal. And we're gonna leave it like this. Save. And what Creighton portal we do it is to push a rock component or HTML, for that matter, not in the ID element, but rather in the model. So let's, let's close this. Let's go here and let's, let's firstly import, import, React, DOM, like so. And what we're gonna do here, we're going to say cost more than the root is equal to document. Get element by ID. Model. What we're doing here, exactly what we're doing in the index. Here. You see here we are grabbing the root element and then we push it to a table this year with the help of the render function here into the same thing. We'll grab that div with the id of modal in, we set it in a variable. Now, since we have quite portal, we're going to use this function at whatever we sent to this function is going to be sent to this div. So solids a crate mock credit portal is a function just like the render function. The first argument is HTML. So the code we're going to push like so. And then the second element is the DV want to push it into, so this dividends be modelled root, right? So gs doesn't understand that. We have this mode, this div in the index.html. And TypeScript says that it may be null. And that's why TypeScript is so helpful. So to solve this problem, we have to say more dull root, root here and a question mark. So if, if, if this variable is true or if it has something with so if it's not null, then do this. So what now? Oh, yes, so you see we're returning, actually, function is nice. Dante isn't a react element, so let's just delete the react element here and say React Node know, like so. And it should work. Okay? So again, what we do here is essentially the same functionality into, into index.js x. We grew up with this new div that we have into our index.html. And we were pushed to it. A different, a different raft component or a different HTML code. And m, because of course we can use the render function because that's for the main div. Gives us the crate portal function which helps us in this regard. Okay, now we know that whatever we're going to create here is going to be, we're going to not going to be in the root element. The point is going to be here. And so we will not have anything to do with what's inside the root. All right, so what we need here is to take two things. Is one div, which is going to be eyes widen eyes, the screenings end with the maximum height and one DV, one actually IMG for, for our pictures, picture. So let's first go back here. Let's say, let's create a div. So this is going to be the, the, for the, for the background. We don't need for each have content. Let's leave it like this. And we also need an IMG for our our photo. So I, you know, we can't give react to an immense that it has to be one. Let's wrap this up with the deciliter trick that react gives us save. And let's give it a class name and this is the background. So let's give it a more doubt background. And also let's give this a class name of modal photon exon. And let's go into our CSS and say, well, let's first import it. So import model, or more than, more than dot SCSS. Save this. Let's go here and say more dull background, as we said. So the width is going to be 100%, so it's going to be as wide as the screen height as well, one hundred one hundred percent, like so. Let's give it a background color of AGB 0, 0, 0, and also a background color of a GBA this time of 000. So black and a 0 for opacity. Okay? So, so this is the quote that the burger is going to use in this course is a fall back. Let's give it a is it in lift index of three position of fixed? So you're going to be fixed. Him because he wanted to be in the center. We're going to say top 0, left 0. Like so. Let's give it another line or K. And we're going to say, Oh, they're flow out to show that so that if anybody's call if needed, and also a padding, padding top, top of 80 pixels. Let's save this and let's create the model photo class. Well actually let's see if it works for now. So here our model. It should show up on this on the screen. Let's import this photon water in our about page. Rest somewhere here. Photo model. Of course we need the functionality to open and close this model, but for now we're just going to show it and see if it shows up. So what is import it? Import. I click the wrong button. Command then Command or Control N dot, it's imported. All right. Can be used as a JSX component in datanode. Jsx. Okay. It doesn't like something with the EEOC node here. So I think there is one class, this react portal. They are, they relaxed Portal. And now TypeScript code base because we were told a React portal or we might return not. But we said that this function only they don't select Portal. So, so to fix this, you're going to say that this function returns react portal. It a tolerance. One of those, and save this hope it works. Great, novel burning so far. And let's see here, let's refresh it. It's a bit like, oh, it works. Okay. So what we did here is just imported in this component onto our, our about page. And now as you know, this component crazy portal, which basically doesn't have anything to do with what's, what's here. But we keep, we keep it here because we will create a functionality that allows it to be opened and closed. I am, but for now let's just, let's just created the default o here, the photo class. So what I'll photo and this is also going to have a position of fixed. We'll keep it in the center of the screen. Then the index of 44, this is three and this should be on top of it. So it's four. Left, 0, 0, 0. So our total, and that's because the margin of the photos you should automatically be set. We're MRSA Alto. It makes us to be able to center it. So for it to be in the middle of the screen. And let's give it a width of 450 pixels. And the height will be, will be set according to this because it's a photo border-radius of six pixels. Border. Give it a border to be nice-looking border, one pixel solid, solid, gray for now. And let's pick a color that's red episomal. So we're here and let's also not forget to give it a opacity of 0.3 and a GPA. Alright, let's save it. And just for the testing, let's, let's import a photo from pages slash About page slushes sources. One JPEG. And let's, let's save it here. Slc is x2, photo, like so. Savior, let's, let's look in the browser. Cool, it works. Let's just make, just, let's just increase a little bit of the width. 700 pixel should be better. Okay, It looks good. Now let's list the lot with the opening and closing functionality. So, so we need some kind of a trigger so that we know when to show this combined one naught. Remember I told you that we can write JavaScript polarizability of HTML lines. And that will help us to show this model and to not show it. So we need, first of all, a variable to keep to keep the status of our offer, our mono. So if it's active or not. And let's create a state variable model visible on the board. And said more visible. And of course, now we're going to say US state to create a variable as a state variable where we will want to keep if this model is active or not. So this variable will be by default false. And it's important to state from react. So we're going to have a variable that will keep track if this model is open or close. So when, when, when the page is loaded, of course L going to be false because we don't want to see the first thing when we, when I entered this page to be a model. So for that or have this variable, and we will use this to do the following. We're going to say if a model visible is true, so this variable is true. Then show this, scope it, and move it here. So here we have an if condition. If this is true and this is true, which is always true, then we will see you on the screen this photon model. If this is not true, if it's false, then we will not see at all this photon window. We can also achieve the same thing by saying is it is more modern visible shoe. If he s, So write this. If not, just to write null. Alright, but I like more than the first method. Okay, so now our model will only show up when this variable tons, tons true, okay? By default is false. But as you know, we can change this variable because it's a state. And when these changes distinguishes the railroad. And he says We are. So if it, if it is true, it shows the model. Now. Now let's create a function called test set model VCB leaky. Because visible is already taken VCB rack, so it will return a void. So it doesn't return anything void. And it sits more visible to true. Okay, so this is a function that where we're going to call it, we'll set this variable. It will actually call this function, which end tonal we'll set this variable to chew. And the whole thing is going to be rerun that again. Now when do we want to open the model? We want to open the model when we click on any of these pictures. So let's say here onclick. Unlike salicylate, a four-line function which we'll call set, visiting disability, beauty, like so. And let's copy it to all of these tags here, right here. Now what is going to happen is when you click on any of this picture, this dysfunction is function is going to be called. It will set the model, this variable to true. Now the whole thing is going to be re-rendered and we're going to see, and this is going to be true as well. And we are going to see the model on the screen. So let's see that in action. Okay, Hey, let's refresh it again. And let's click on any of these pictures. Carbons loaded already. So here it is. It's also a problem because this picture is like four key resolution and my computer tries as best as it can. Now we wanted this model to show the picture we're clicking one because now as you know, we just show one picture from a form resources. Okay, so let's delete that for now. Also. And what we want is to receive as prop, the photo. So, so the picture that we're going to click on this folder tree, for example, we want to send it to their photon model. So how we're going to achieve that? Well, first of all, let's, let's define here that we are going to receive props. Let's get an interface. Facebook's like so. And we're going to receive two things. The first one is going to be a function, the function that actually created the equator there. And like so and void in here we're going to say a state and avoid here. And we also receive the photon, right? So for dark photo, this photo, and it should be string. Now we define that this is a React function and it will receive props. Props in. It will match what we have defined. And it's a probes here, or let's say better. Photo, photo, NSSet, muddle, visibility. Let's, let's just destructor it right here on the spot. Or I, so wanna say photo here. And we want that when we click. So when we open a photon and when you click on the, on the black background or on the photo, wanted to close. So just let's secure a onclick, onclick function, which we'll call the set model with TBLT MSA false. And it will do the same thing here. So we want to, when you click on the, on the background to close the photo. And when you click on a photo also to create, to close their photo. Let's save this. And let's see what will it complains that it need props. Okay, but now we want to send the SSC, okay, the photon a, however going to do that. Well, we're going to get another state. So let's first create it and then we'll go over it again. Let's be photos, SSC, select saw as SFC, and let's call it set. Set photo as C. M by default is going to be empty. Empty, empty, empty strings are like so. So we want that this photo too variable. To be sent to the model. And we need and what to, what? And what we will be doing is to put it in the state. And now, as all of this, all of this HTML has access to this variable. We can just send it like, like soft photo, photo, LC. So the photo and the photo key is the name of the prop that the photon model receives, right? And these photos is, is our variable that we have in our component, which will be set right here with set, auto, SCLC, with SLC for example, and secured SCLC, which is pink. You see because we click on a photo, right? What it does, it cause the set model visibility. It sets the model, this variable to true. So it means that now we can see the model. And also we can use this function to sit the photo that is being opened. So we're going to send here photo for Tokyo for example. Or I would like, like so here we are going to be 433. Here we have 4, 4, and here we will have four to 55. And less than forget to make the same theme folder for the big, the big image for photo1. Like so. So again, we click on that picture. We said with we call this function, which sets the visibility to true right here. The model now is being visible. And also it sets the SRC that will be opened and we will keep it in, in these photos there c variable. Now when this whole thing is going to be re-rendered, we want and the model will be active, will be shown to the screen we want to end, we want to send a function because as I said, we want to close this model. So we're going to say Cipla like visibility. That's, that's the, that's the name of the function that we, are. We send in it real be equal to set model with a visible, okay, So we sent to the model the function that sits sets the visibility. So, so if we have access to this function, whatever we are in this whole app and we record it. And we sent it like a certain model chores that modal force. This variable will be set accordingly and the whole thing is going to be rendered again. And what we are doing is sending this function to this, to this component, which will, in this component, this function will be called, it is tied to this variable right here. And it will, it will change the model visible terrible, thus closing the model. So, so we sent this function, we received it by this name in, when we click on any of the background or the picture, we send it, we set it to false. What happens here is that this function is called it set to false. Are thus this dysfunction is also called any set to false. And because it set to false, this variable, variable becomes false and thus the model is being closed. All right, so I hope you get that. Let's save it and see if it, if it works, everything okay. Let's go in the browser. Refresh and click on the picture. Or at the top, and click on the background. It should close. Let's click on this picture. It opens. Click on the background. It closed. Let's click on this picture and click on the picture. And it should close. Or I saw it works. It works as we expected. I hope you understood that this mechanism, if you know, if you understand this sending a function every boss via props and using state to basically understand the whole react. Let me walk you through it one more time because I want you to understand. So let's go here and photon molar. So this is a component that takes, takes these tactics, the D from, from, from fear from public index.HTML, aside from the div with the id of fruit, sets, sets it in a variable. With the help of the quit portal function that reactor dome gives us. We can push a new code to that, to that div. And we sent some HTML code that serves as our, our model. All right, So we receive in these components to two prob