Learn the Basics of React (Incl Hooks - 2021) by Creating Google Keep App | Dr. Sahand Ghavidel | Skillshare

Playback Speed


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

Learn the Basics of React (Incl Hooks - 2021) by Creating Google Keep App

teacher avatar Dr. Sahand Ghavidel, PhD

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

16 Lessons (1h 23m)
    • 1. Intro

      1:24
    • 2. What is React?

      4:07
    • 3. Installing Node JS

      1:59
    • 4. Installing VScode and its extensions

      4:17
    • 5. Local environment setup for react development

      4:54
    • 6. Creating basic HTML, CSS and JS files

      5:41
    • 7. Introduction to JSX

      3:45
    • 8. React components

      3:56
    • 9. Creating header

      16:10
    • 10. Creating footer

      5:19
    • 11. Creating the main application (notes)

      4:49
    • 12. Creating the form area

      8:01
    • 13. Store the data of the form's textfields

      5:49
    • 14. Creating the addNote function

      5:56
    • 15. Mapping through the notes array

      3:23
    • 16. Deleting the notes using filter method

      5:46
  • --
  • 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.

850

Students

--

Projects

About This Class

Welcome to the best course for learning the basics of React, my name is Sahand and I'm a web developer with over 15 years of programming experience. I created this basic course to share my experience with you.

This course is made to help you get familiar with the basics of the modern React. By the end of this course, you'll be able to write the basic react codes, and build a simple but practical application similar to google keep which allows you to create and remove daily notes.

This course starts with a direct and simple guide on how to install all the necessary software and create a react app. Once you master these basic skills, you'll then begin to work on the google keep react project. This project will teach you many skills like react components, react properties, react hooks, and all the essential JavaScript methods like map and filter which are being used in most react applications.

It is completely fine if you have no prior knowledge of React. An introduction to React is provided in the course in details. This is a resource that will teach you about React while building a simple but practical application.

If you are excited as I am to learn about the basics of React and build an amazing web application, then let’s get started.

Meet Your Teacher

Sahand Ghavidel holds degrees in Mathematics, Electrical, and Computer Science, and earned a doctoral degree from Faculty of Engineering and IT, University of Technology Sydney.

Sahand has researched for more than 10 years about artificial algorithms and  optimization. He has won several awards for his outstanding research and has published more than 40 ISI journals and attended to many international conferences.

The number of people using and citing Sahand's publications is significantly high which is more than 1600 citations, according to google scholar (April, 2021). He was also awarded the outstanding reviewer in the international journal called "International Journal of Electrical Power & Energy Systems" with CiteScore of 5.79 in recognition of his contributions ... 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. Intro: Welcome to the best course for learning the basics of React. My name is Hannah, and I'm a web developer bit over 15 years of programming experience. I created this basic cores to share my experience with you. This course is made to help you get familiar with the basics of modern react. By the end of this course, you will be able to write the basic React code and build a simple but practical application similar to Google clip, which allows you to create and remove daily notes. This course is start with the direct and simple guide on how to install all the necessary software and create a React app. Once you master these basic skills, then began to work on Google Keep React project. This project will teach you many skills like React components, react properties, react hoax, and all the essential JavaScript methods like map and filter, which are being used in most React applications. It is completely fine if you have no prior knowledge of React. And introduction to react is provided in the course in details. This is a resource that will teach you about react while building a simple but practical application. If you excited as I am to learn about the basics of react and build an amazing web application. Then let's get started. 2. What is React?: All right, so what is React and why we need to know about it? Well, based on the Stack Overflow latest survey, reactor is one of the most popular web framework, just below jQuery and above the other great frameworks like Angular. And according to StackOverflow, jQuery is slowly losing its place to react JS over time. So what exactly is react anyways? Well, the web developers in Facebook, the creators of React js, define it as a JavaScript library for building user interfaces. Basically, React is a front-end framework and the best usage of reactants to build beautiful user interfaces, such as the ones on Facebook or Airbnb. One of the greatest things about React is to create repetitive elements like these profiles in Facebook website. As you can easily see, although these units are similar, but they have different pieces of information, such as the name or the profile pictures. If you have too many of these units, you can basically make a particular component and modify it to different pieces of information which can be received from an API or databases. Well, you finish up breaking down a very complicated website into a so-called component tree in React JS. For example, here in Facebook website, we have components such as navbar, C-section, or suggested users. These components can be used again and again and be customized so you don't need to write more ports to make more attractive user interfaces. And it's also hugely make the organization of your website simpler and easier. Previously, for building such a complex websites like Facebook, we had separate different types of files including HTML, CSS, and JavaScript. However, what we do now in React is to basically combine these small amounts of HTML, CSS, and JavaScript into an individual components in a way that each components can have its own silent and functionality. And you can definitely make many of these components and reuse them inside different parts of your project. Also, another great things you see in website is to load the fetus screen feet out the rest of the page to be changed. You can see that even the page is not refreshing. This ability of React enables your website to be very fast and effective. Now, of course, react is not the only front-end framework. So why we should learn react anyways? Well, if you compare reacting Google Trends with the other most popular front-end frameworks like Angular and view, we can clearly see that react is being searched more than the others in the last couple of years. Being used at many famous websites such as Airbnb, Uber, Facebook, and Netflix. And it's probably one of the most wanted and demand skills out there. Actually, if you look at this recent blog about the most in-demand front-end frameworks in 2020. You see that the top front-end development for getting a job as a front end developer is react above view. I hope you are excited as I am to learn these front-end framework technology. So without any further delay, let's get started and learned about React js. 3. Installing Node JS: Okay, In this section, we're going to install Node. We need note later to install React and its dependencies using MPM. Well, first we searched NodeJS and we click on Node js.org, which is the official website of NodeJS. Then we go to the download page. And here you can find all the possible installers, including Windows, macOS, or Linux. Just choose the installer based on your machine. My computer is using Windows 10 and I'm going to install the Windows installer. The Mac or Linux installation would be easier as well. But if you have any problem installing Node, please let me know and I will guide you through it. So we click to download the installer. And after the download is finished, we click to run. It. Usually takes about a few seconds until the installer is initialized. And then we're going to hit Next and accept the license agreement. Click Next again. We'll choose the folder we wish to note to be installed. I prefer to leave the default one. And we click Next, click next again, next. And finally we press on Install button. The installation process usually takes a few minutes to be finished. Finally, we see that the installation has been successfully completed. 4. Installing VScode and its extensions: Okay, In this section, we're going to install a text editor. To take Senator, I highly recommend is visual Sudoku or VS Code for short. Vs Code is currently very popular among web developers. It has a lot of useful and greed extensions that make the coding easier and faster. However, if you prefer other text editors, Like Atom or Sublime Text, it's totally fine and up to you. But I'm going to use VS Code and I highly recommend it to everyone. Okay, let's install this code. Well, first we searched VS Code and b click on quote that Visual Studio.com, which is the official website, our VS Code. Then we choose the installer based on our own computer, which can be Windows, macOS, or Linux. In order to have the best performance, I highly recommend to choose the stable version which is much faster and reliable. My computer is using Windows 10 and I'm going to install the Windows installer. The Mac or Linux installation process is very easy as well. But as I mentioned before, if you have any problem in installation process, please let me know and I will guide you through it. So we click to download the installer. And after the download is finished, we click to install the VSCode software and we accept the license agreement. Click Next again, make sure to select add to path, and then click on Next. Finally, press on Install button and wait for the program to be installed. The installation process usually takes a few seconds to be finished. Okay, we can now launch the VS code and use it for our coding. Before using VS Code, I would like to introduce you some extensions that makes the coding much easier and faster. And I'm using them always in my project coding. In order to add extensions, you need to firstly opened the extensions from view menu. The first extensions we're going to install is prettier. Prettier helps us automatically format our code. So we click on Install button to install the prettier extension. Then we need to go in VS Code setting, which is in File menu preference. And then we search for format and save and select a format and save. This setting allows us to format our code as soon as we save them. Okay, we go back to the extensions menu again and installed the next extension. The next useful extension is auto rename tag. Author renamed tech extension changes the closing tag as soon as we changed the opening tag. Okay, similar to what we have done on previous installation, click here to install extension. The next one is bracket pear color iser. The bracket per color riser makes our code firstly more beautiful and also much easier to read. It colorizes the matching brackets, which would be useful when we have many brackets, especially in JavaScript coding files. Next useful extension is ES 7 React redux GraphQL React Native is Snippets, which makes our coding very fast and exponentially increase our coding speed. During the course, I will let you know how to use it, but just make sure to install it now. Okay. That was all the extensions we need for now. 5. Local environment setup for react development: All right, In this section we're going to set up our local environment for React development. So whether you're using Atom or VS Code or any text editor you wish to use. We're going to get you started making React apps on your computer. For k, Let us get started. There's only few steps that are required to start creating React app. First step is to simply create a React app using MPI x. And to do this, you're going to follow the instructions from the React website. First we need to search React js, and go to the reactor has taught or G, which is the official website of React. Here we click on tax and then we click on Create a new React app. If you scroll down a little bit, we find the codes we need to easily create our React app. This is the one of the easiest ways of creating a brand new React app. So we have to run these codes inside the terminal. This is the end px command, which is, as they say, a package runner tool that comes with MPN. And it will install, Create React app on your computer so that you can create new React apps from scratch. And then the very last part is whatever name you want to call your app. So we need to copy this as it is to create a project called myapp and then simply paste it in the terminal inside VS code. First we open the VS Code and close to real contact. And in order to open the terminal inside fiasco, we need to just press control tactic in Windows or Command back in macOS. Before running the code, we create a folder inside the desktop or wherever you wish to have your app folder. So open the File. Open Folder. Choose the desktop and create a folder. Rename the folder React app. Okay. Now we copy the code and paste it inside the terminal, and then hit Enter to run the code. It's going to install the required packages, including React, react down and React scripts. React is script is basically the scripts that's required to actually be able to run React apps locally on your computer. Now the first time that you run this command, it's going to take awhile. And my computer, which is using Windows 10, it took something like seven minutes to be finished. It might take more or less for you, depending on your machine. But once it's completed, you will get something like this. Success created my app at this location. And if you go inside the directory, my app using cd, my app, you can run npm, start to start the server. This is going to use that module, React scripts to run the script and open up the app. Please note that you might get some warnings from firewall. Just be sure to click Allow Access if you see any warning. And once it's loaded up, you'll see local Holstein open up in the browser. This is all we have for our app at this moment. And in order for it to show something else, we are going to have to edit our source app.js file. Okay, we go back to VS code. We see that we have two folders with lots of files including logos, HTML, CSS, and JavaScript files. Fire away. We are going to learn react from scratch. I'm going to delete all these files inside the two folders. And we're going to create each file from scratch and learn the code line by line. So in the next section, we're going to get familiar with basics of React apps and create the fundamental files including HTML, CSS, and JavaScript. Okay, see you in the next section. 6. Creating basic HTML, CSS and JS files: All right, In this section we're going to create the fundamental files, including HTML, CSS, and JavaScript files inside the two folder that you have just empty in the last section. The public folder is the folder that the browsers CAN render. So the HTML, CSS, and the graphic files, including locals and images, are located inside this public folder. On the other hand, the source folder, SRC is used for JavaScript files, components we are creating inside our React application such as header, footer and the main application are located in this folder as well. Okay, First we start creating the estimator by right-click and click on New File and recount the HTML file index.html. This is the file that browser CAN render. And through this file browser looks for CSS and JavaScript files. So we need to link CSS and JavaScript files inside this file. Firstly, we simply write an exclamation mark and click Enter to select the first artist suggestion to have the HTML and boiler plate. Here we simply change the title of our application to React app. As you can see, we have head section and the body section. Inside the head section, we have to link to our external links and CSS files. And in the body section we have to link to the JavaScript files. Okay, first let's create the main CSS file by right-click and public folder and select new file. Rename the file styles.css. To follow the naming convention. We just add margin and min-height to the body. So we write body and inside a set of curly braces, derived margin equals 0 to remove the default margin from the fourth sides of the body. In the most major browsers to default margin is eight pixel on all sides. Next, we set the minimum height of the party to be 100% by writing min-height 100 vh, which stands for viewport height. It lets you make things a certain percentage of height of your browser window itself. Whether that view port is a tablet screen, a phone screen, or a laptop screen. Using pH helps us have our footer always at the end of the page. Even there is nothing in the main application. We're going to show you the benefits of using the H1B or creating our footer. Okay, it's time to add the CSS to the index.html. Well, just at the end of head section, we use the link tag to add the CSS link, just right link and enter to accept the VS Code atom suggestion. Here in the HREF section, we write the address of the CSS file, which is just the filename, because the CSS file is located at the same directory as the HTML file. Okay, let's create a JavaScript file and link it inside the index.html. As I mentioned before, we put all the JavaScript files, including the React components, which are also JavaScript files inside the SRC folder. Well, we create a new file and call it index.js, which again, just to follow the naming convention, we can link this index.js inside index.html by just adding a script tag at the end of the body section inside SRC fee, right, double-tap to go outside the public folder and then a slash, SRC slash. And finally the name of our JavaScript file, which is index.js inside the JavaScript file B. Finally important to react and react on packages which we have installed earlier using n px Create React app. So we write down import React from React and input Reactome from reactor. Just make sure to write React in capital a. Reactant has exactly the same as I wrote. This might work the other way, but the standard convention is like this. This would make your code more understandable to anyone else looking at it. Before continuing and the JavaScript file and writing the next line, we need to add a div inside the body of the index.html file with the idea of fruit. Because it's a root DOM nodes, because everything inside is will be managed by React down. It is actually a root of our React application. And we're going to manipulate this step using JavaScript. Basically, we don't need to touch the HTML file anymore, and we are going to write our HTML file from now inside the JavaScript file by manipulating this div with the id of roots. In the next section, I will show you how we can do this inside the JavaScript file that we just created. 7. Introduction to JSX: All right, In the last section, we have created the HTML CSS and JavaScript files. And we have LinkedIn CSS, and JavaScript files inside the index.html. We have also added a div inside the body. And as I have mentioned in the last section, we're going to manipulate this step inside a JavaScript file. Okay, let's do this inside the JavaScript file. Before continuing on our code inside index.js, Let's try npm. Start now to check what we see inside the browser. If you don't see your terminal, just use contour back. And if you are inside the myapp older than just write np and you can see that the page is completely empty. Pot the title is changed to react. As we have changed the title inside the title tag in the index.html file. In order to use React to actually create something on the screen, we're going to use the render function. So we're going to tap into this reactor that we have imported here, which gives us access to react on module. And we're going to tap into its render function. This render function takes two inputs. The first input is what to show. For example, we want to see an H1 tag saying hello word. And after the comma, the next thing that we can add as an input to this render function is word to show this Hello World, for example. So the location is going to be a particular HTML element that we're going to target inside our index.html, which is the div with the id of roots. So we have to tap into the DOM using that document keywords. And then we use the method get element by ID. And then inside a set of parenthesis, we get to specify an element's ID, which is the roots. So we put it in there as a string. Now if we check the browser again, you can see we have now written Hello World into our website, even though we have not touched our HTML file ago. We have already written a line of React code right here. We've used the reactor modules render method in order to display an H1 inside that route. But please note that we cannot put another HTML tag. For example, an H2 tag saying Welcome to our website. In this case, we get an error in our browser saying that all the HTML tags must be wrapped in an enclosing tag. All we need to remove this error is just simply to embed these two HTML elements inside a single div elements. So we add a div here and wrap it around these two HTML tags. And now we have only one HTML tag, which is this step. This is how we can simply write our HTML tags inside a JavaScript file. In the next section, we are going to learn about components and how we can have multiple components and import them inside our application. So we don't need to write all our quotes inside this index.js. 8. React components: All right, In the last section, we have written our first React code. We have tried to have more than one HTML tag using a single div and wrap all the HTML tags inside this div. Now we can see in the browser that without getting any error, we have injected the two HTML tags. In this section, we are going to get started using React components in our application. The reason we use components to make our code clean and very easy to read. The first component as a convention, is usually a component with the name of app. In this component, we put all the other components, such as header, footer, and the main body of the application. So in the SRC folder, we created a file named app.js. As you may notice, the naming convention for the component's name is to use Pascal case, which means that every single word has the first letter capitalized. The first thing we do in app.js file is to import React from React. We don't need to import React down as we did in index.js. And then we write a function with the same name of the component's name, I mean app. And then a set of parenthesis. Then open a curly braces. And inside the curly braces, we return our clothes which are still inside the index.js file. So we cut the quotes and paste them here after the return. And we save the file. As you can see, after saving the file, the code has been beautified. As we have the prettier extension, a set of parenthesis, a CFO. So after writing our function, we need to export a function by writing export default app. The reason we use default is because of only having one thing to export. After saving the file, we come back to the index.js and import the app components. We simply write in Port app. From data slash app. We write the address with only one dot because the app.js file is located at the same directory as the index.js. Also, as you may notice here, we have not used that js after the app. Using that GS is optional. You can either use it or completely remove it. And then we use the imported app here, but just writing it as an HTML tag. The convention is to use the self-closing tag. However, if you use the other way, for example, using the closing tag instead is correct as well. But as I said, the naming convention is to use closing tag. Now after saving the file using Control S, we can see in the browser that we are getting the same result as before. So we see that making a functional component is very easy. We just need to create a function and exported as a default, and then imported inside the index.js. And finally, use it as a self-closing HTML tag. All rights. In the next section, we are going to make the header as a new component and use it inside the app.js components. 9. Creating header: All right, In the last section, we created our first component called app.js. App.js only have a function and we exported the app as a default. And inside the returns section we have a wrapping to HTML tags. And inside index.js, we have important F from dot slash app, and we use this app tag here to show it inside the browser. In this section, we're going to another component for header. Usually as a convention, developers use a folder or components like header and footer. So we create a folder inside SRC folder. You click on New Folder. We call the folder components. And inside these components we're going to create the other components like header and footer. So we right-click here and click on new file. We write header dot js. Inside the header that js we have to do something like retained in app.js, writing down a function and exporting it as a default. But I'm going to show you a trick. So how we can write down this very fast. As you remember at the beginning of the course, we have Install Extension cause ES 7, react redox GraphQL, React Native is Snippets. This extension allows us to have a prefix for each method. For example, we have a prefix IMP or import module name from modules. So the prefix we're going to use here is RFC, which stands for React functional components export. If you click on the first artist suggestion, we see we got import React from React, and we have a function that is returning a div. And we exporting header as a default. So we didn't need to write all these things and we just use a prefix to write down all of them. Okay? We just write down a simple heading. And inside the heading derived header. And we saved the file. Inside app.js. We import this component just below importing the React. There is another trick for importing the components that I'm going to show you here. First we delete these two tags. Inside the eye. Just write head there. As we write just the first few letters. Here we see an auto suggestion on VSCO. Suggesting us that we can import this header from components as slash header. So if we click on this auto suggestion, we're going to include the header easily. And we don't need to write down import header from this location. Okay? We just need to close this tag and save the, saved the file. We go back to the browser and we check that we have a header tag inside our process. So we have successfully created our component and we have successfully imported inside the app.js. Okay, let's start making our header completely. Here. I want to introduce you to something called material. You are material you, i is a component-based library designed for reacts. By using material you are, you can easily import some components for your applications such as navbar table or something like that. Okay, Let's go to the browser and we search here material you are, if you can see the first verb side material you I.com, which is the official website of material UI, Popular react UI framework. We click on this website. As you can see the define themselves as a React components for faster and easier web development. For using material UI, we just need to install them in your application. As you go inside a tab called installation, we can easily install material UI core by using this code. And after installing the material UI core. If you want to use the material UI, for example, if you want to use a button in our application like this, we just need to import button from material UI slash score. All right, we just copy MPN install material UI slash core from here, and paste it inside the terminal to install the material you are core. Okay, let's go back to the VS Code. And we go outside the application using control C two times. Make sure you are inside my app folder. And here, the pace and clean install material UI a slash score. The installation process usually takes a few seconds. All right, the installation process has been completed. So we write down NPN, start to start our application again. Okay, the clothes, the previous tab, the material you are components that we're going to use is paper. If you go back to the website, material UI.com, and we search for paper. And if you click on the first links, such as in paper. We see that by using only paper tag, we can have something like this. We can use this kind of papers for our nav bar. If you use the properties elevation, we can have more shadow in our papers. For example, this paper has elevation 0. This one is one as the default that we don't need to use. And also the last one has elevation 3 and 4. Using paper in our application, we need to import it. So if you open the full source, here, you see we have to import paper from material UI slash slash paper. We already installed material UI slash chords, so we just need to copy this and paste it in our component header.html just below import React from React, replace this code. Now we can use it inside our application. So instead of having this tip that is wrapping our HTML tags, we can have paper here. And if it's saved, IL and we go back to our browser, we see we have a paper here. We just need to add more shadow to this paper. So we go back to the VS Code and and inside the paper tag, we add elevation as a new property and add three as the value. We save the file and check the browser again, and we see we have more shadow. But the problem is we have some margin at the top. This margin is because of this H1 tag. For example, if we inspect the elements and because to the layout section, you can see we have 21.44 margin at top and the bottom of the H1. So we need to add a style at this specific H1 tag. There are two ways to add a style to a specific tag. The first way is to add a class name and put a name for the class name. For example, we call it a site name. And if we go inside styles.css, we can add this class site name and open a curly braces. And inside a set of curly braces, the right margin, 0. Semicolon. If you go back to the browser, we see the removed the margin from the top and the bottom. There is another way to add a style to attack. First, we delete this one and I'll show you in a second how we add this up. We go to the header dot js. We delete this className and rewrite a star equal to set of curly braces. And here we can add our margin. But here we added like this. So margin equals 0 and 0 should be inside a double quote. So we save and we go to the browser. We see again that we don't have any margins. The other things I want to do if you zoom here, I would like to remove this curve from the header. So if we go inside the paper tag, we can add a square and say, and we have removed this curved easily. And I want to add some padding inside the papers. Well, so we add a style here in paper. We just add some padding Around five pixels. And as you can see, we have added some padding easily inside our header. Okay, we change this header to react at first we remove the Zoom. The other things I want to do is to change the font of reactor. So let's go and search for Font, Google. We have to click on the first name, that is fonts dot google.com. So we click on this link here, derived reacts. And we check here which is suitable grant application. So I click here and we choose the regular 400 and select this style. We click on Import. So we copy this code and replace it inside styles.css at the top. Okay, we go back to the fonts dot google. And if you scroll down, so we copy this and replace it inside styles.css, just below min-height. Here is save the file. And recall back to our browser. We see that our bond has been change. The other things I want to do is to change this font to be cursive. So we go back to the BS code and inside header that chess, we add a style, we write out font family, cursor. We can see we have a cursive font here. I would write it to have a thinner phone. So we go back to VS code and the Add font page 100. So we have a thinner font here. The other things is, instead of using font-family like being used inside a styles.css font dash family inside header that chairs, we have to use it as a camel case font family without dash and the family should be capitalized. Next thing we want to do is to add a logo before the site name. So we search react. We choose images. And we click here in all types, and we choose transparent. We choose the size to be small. I would like to choose this local. So we copy this link and we paste it inside an IMG tag just before the H1 tag. So we added IMG tag. Inside a SRC. We paste the link we have just copied. We save and recheck our browser. As you can see, the size of the lowest, very big. So we changed the style of the image. We arrived style or two curly braces, and we just add a width of 50 pixels. Now we have a smaller logo. But the problem is the logo and the site name are not inside the same row. So we add a style inside paper. We said display flex. We check the browser. As you can see now the logo and our header are at the same row. All right, We have finished creating our header. In the next section we're going to create our footer. So see you in the next section. 10. Creating footer: All right, In the last section we have created our header, including the logo and the site name. They have also changed the font of our site name and we have added a paper using material you are. In this section, we're going to create our footer and bring it down at the bottom of our page. Okay, Let's go and create the footer. Here we right-click on components folder and press our new file. We create the fall and colored footer that JS. Here. By using ES 7 module, we use the prefix RFC to create the functional component. So we click on the first auto suggestion by VS Code. Now we got import React from React and a function returning an empty div and export defaults footer. So we add a paragraph here saying copyright. We save the file and we add this component to the app.js. So let's go to app.js. And by using auto suggestion, again, being poor, the footer. So we write footer and we click on the first artist suggestion. So we imported footer from this location. We just need to close the tag, save the file, and we check the browser. Yeah, regard to copyright here, let's complete the footer. So copyrights, we add the copyright symbol by just adding an and sign copy and semicolon, we saved the file, we go back to the browser. Now we see the copyright symbol. Let's add the year and the name. So 2021. Soham Ramadan, which is my name. Now we have our copyright, copyright symbol the year and the name. The problem is the 2021 is a static year and in the following years, for example, in 2000 22, if you launch this flip side, you need to update the year. Every year. We change this aesthetic here to a dynamic one. Let's go back to the VSCode. And here we need to add a date constructor. We need JavaScript to write date constructor function. By we haven't added any JavaScript inside our HTML before. It's very easy to add the JavaScript, you just need to use a set of curly braces. So we add a set of curly braces here and inside it, we can add JavaScript. So we write new date, which is a date constructor. And we tap into its method called get full year. And we open a set of parenthesis. Now we delete these, 2021, save the file and we check the browser. As you can see, we got 2000 21, but these 2021 is dynamic and it will be changed based on the local time. Alright, let's bring this footer down at the bottom of the page. So we need to add a style to our paragraph. Here. We just write style. Open two curly braces. The right position, absolute, bottom 0. You save the file and check the browser. Now we have our footer at the bottom of the page. Next thing we need to do to bring this footer at the center of the page. Alright, let's first change the weight of this paragraph to be 100% by writing with a 100 percent. And then we use text align center to bring the footer to the center of the page. So we saved the file, we check the browser. Now we see our footer is in the middle of the page, and this is completely mobile friendly. For example, if we change our browser to be a smaller, we see that the footer is still in the middle of the page. In the next section, we're going to create our main application. See you in the next section. 11. Creating the main application (notes): All right, In the previous sections, we have created our header and footer. In this section we're going to start creating our main application. Okay, let's go to the VS code. And let's create a new component. We right-click on components folder, click on New File. And we create a file named Node.js. Again, we use E7 extension. We write RFC, and we click on the first article suggestion to create the functional component with export. Let's add a paper here. And we click on the first artist suggestion to import paper from material UI. As you can see, we have imported paper from material UI is slash core. We add a header here saying title. And below the header we add a paragraph saying content. Let's save the file and import it inside app.js. Just below the header. We add the node component and we click on the auto suggestion to import the node and we close the tag. Let's check the browser. As you can see, we have a paper and a title and content. Let's add some styling to this paper. We go back to the VS Code. We added a style to this paper tag. We add two set of curly braces. We add a Min width, 200 pixel, mean height, 100 pixel, padding, ten pixels, margin, 20 pixels. We save it and check the browser. Now we have added some margin and some padding to this paper. Let's copy this paper inside app.js few times. So let's go back to the VS Code. And inside app.js, we copy this node 2 times. We save the file and check the browser. Now you can see that we have three papers and the top of each other. We want these nodes to be next to each other. We go back to Node.js and we add display inline flex. We save the file and check the browser. Now we have the node's next to each other. But the problem is the title and content are at the same line. So we added div to fix this. Let's go back to Node.js. We add a div here. And we bring these two inside the div. You save the file and check the browser again. Now we have title and contents in different roles. Okay, that's it for creating Node.js. In the next section, we're going to create a form here to allow the users to add the notes to this form. See you in the next section. 12. Creating the form area: All right, In the last section, we have created a Node.js components. In this section, we're going to create the form area. Okay, let's start creating the form area component. Right-click on components folder and click on new file. We call the file form area that JS. Similar to what we have done before, we use RFC to create the React functional component export. So we click on the first auto suggestion to have the functional component. Okay, let's add a paper here from material UI. We click on the first auto suggestion. We see that the paper has been imported from material UI a slash score. Also we add a form here. So just below the paper tag, we add a form tag. Inside the form, we add two text fields. Text field is a material UI component, so we just write text field. And we click on the first author suggests and to Import Text tool from material UI. As you can see, the text field has been automatically imported. We close the tag, we save the file and we added to app.js. So let's go to the app.js. And just below the header tag, we add the formula component. So we write form area. And we click on the first auto suggestion. And we close the tag, save the file, and we check the browser. As you can see, a text field has been added here. Let's add some styling to the paper. We go back to VS code. We go to form area that js, and we add a style here. We just write style at two set of curly braces. We write down margin, ten pixels up and down, and 10 percent left and right. Also we add a padding, 25 pixels up and down, and 50 pixels left and right. We save the file and check the browser again. You can now see the margin and the padding inside the paper. Let's go back to the VS Code and complete our text field. Inside TextField, we add a label. We call a title. And also we make the text field full width. And finally, we turn off the auto complete. So we write down autocomplete. We save it and check the browser again. As you can see, now we have a label and also the text field is full width. Okay, let's add another text field. We go back to VS code. We copy this text field. And we just changed the label to content. And also we want this text field to be multiline. So we add multiline property. And we specified the number of rows. So we write rows equal to 4. We save the file and we check the browser again. Now we have two text fields. Also, we need to add a button here. So let's go back to the VSCO. And just below the text field, we add a floating action button, which is a material UI components. So we write FAB and we click on the first auto suggestion. As you can see, the imported the floating action button from material UI slash core. So we close the tag and save it. We check the browser again. Now we have a pattern here. We just need to add a plus sign here. So we searched material UI again. We click on material UI.com. Here research for icons. And here we click on material icons. As you can see here. First we have to install material. You are a slash icons. So we copy this. We go back to the view school. Inside the terminal. We go outside the application using Control-C. And we paste the code and intro to install material UI slash ARCA. The installation process usually takes about a few second. So we write npm, start again to start our application. Because the previous one, and we go back to material UI.com. In Material icons tab, we click on search the full list of these items. Here we searched for add, and we click on Add icon. And we copy this code. If we go back to the VS Code. And at the top of form area dot js, we paste the code. Now we can use Add icon. So inside the FAB tag, here we add the Add icon. So we write Add icon. And we close the tag. We save the file, and we check the browser. As you can see, we have the plus icon. We just need to add a margin at the top of the pattern. So we go back to the VS Code and we add a style here. So we write the style. We add two set of curly braces. And the right margin, top 20 pixels. Save the file and check the browser again. Now we have a margin at the top of our part. In the next section, we are going to learn how we can store the information inside this form. For example, the title and the content. So see you in the next section. 13. Store the data of the form's textfields: All right, In the last section, we have created our form area that we have created a fall with two ticks fields inside it. In this section, we're going to store the information inside these two text fields. Okay, let's add a user state here. We just try to use a state. We click on the first auto suggestion and we get a template of uses States. We change this state to note. And the modified this node to be capitalize uses state is a hook that allows you to have a state variables in functional components. Actually, the User State Hall is a special function that takes the initial state as an argument and returns an error of two entries. Let's import US state by deleting the last letter and writing it again, and we click on the second auto suggestion. Here we imported uses state from react. The first element is the current state, and the second one is a function that is used for updating the state. Let's change the initial state. We add an object with two elements. First is title, which is equal to an empty string. And then we have content, which is also an empty string. We save the file. And if we console log this node and we check the browser, we open the web developer tool using Control Shift C. Go to the console and we see that we have an object with title and content, which both are empty string. Okay, let's go to the VS code again. And we changed the name and the value of the text fields. Either we say name, name, title, and the value would be not that title. We copy this and paste it in the other text field. We changed the title to be content. We also need to use the unchanged attribute to track the changes inside the two text fields. So we add unchanged and set it to be equal to the function. So we write change handler. We copy this and add it to the other text field as well. Now we need to create a change handler function. So if we copy this and just below the user state, we create a function. And the color change handler, we open a set of parenthesis, openness set of curly braces as well. Inside this function, we can get the values of the two text fields. We get the values to an event. So we add event here. If we console log event that target, we check the browser again. If you write something in title or content, we see that inside the console log, we are getting the information from event that targets. Now we can easily target name and the value. So we go back to the Vienna school. We delete the console log. We make a constant here it two values, name and value. And we make this equal to event that target. Now we have to use this function to update the value of the notes. So we write set nodes. We open a set of parentheses. First we get the previous values of the nodes. We just write three values. We make an arrow function. We write return, open the curly braces. We get the previous values using the spread operator. So we write three dots previous values. And then we add the new values. We write the name inside an area. And equal to the value. Is spread operator gives us the ability to have the previous values of an array or an object. We save the file and we check the browser again. Now if you write something in title and content, as you can see, we got the values inside the logs. And if you change the value only in content, the value of the title will be still available. This is because of using the spread operator. In the next section, we are going to learn how we transfer the data from this form to the app.js. And we are going to learn how to submit the information by clicking on this button. So see you in the next section. 14. Creating the addNote function: All right, In the last section, we have stored the information from the forms inside this node variable. In this section, we are going to store all these nodes inside app.js. So first, let's create a uses the hook here. So we write uses state, and we click on the first article suggestion, we delete the state and you write notes. Remember that we have to capitalize this one. The initial state would be an empty array. So let's create the Add Node function here. Derived function. At note, you open a set of parentheses and inside a set of curly braces, we write our function. We have to get the node variable from form area that is here. Derived set nodes. We open a set of parenthesis and we get the previous values. We just call it previous notes. We make an arrow function and inside a set of curly braces will return an array. First we get the previous nodes using a spread operator, and we add the new naught. Now we have to pass this function to form area that GS. So we copy this and paste it here in form area tag. Because to add nodes, we save the file and we go to Font area that is, and we get the function here. So we open a set of curly braces and we paste at nodes here. Now we can use this function in form area that JS. First we go to our button. And here we add a onclick attribute. So we write unclear equal to a function, and we call the function click handler. We create the function at the top. Just below the states, the right function. Click handler. We open a set of parentheses and inside a set of curly braces, we use this Add Node function. So we write add nodes. We pass the note variable inside a set of parenthesis, and we saved the file. We add a console log inside app.js. So here we just add console log notes. We save the file. So I have noticed that we have a typo here. So I delete this V here. We save the file again. Before checking the browser, we delete the other console log inside form area dot js. We save the file and check the browser. We see that we got an error saying uses state is not defined. So we go back to the VS code in app.js. We have to import uses state here. So we delete the last letter and write it down again and be clicked. And the second author suggests, now we have imported uses state from here, we saved the file again, we check the browser. Now there is no error. We open the web developer to using Control Shift C. We go to the console, we write something in the form. For example, in Title I write milk. The content will be buying milk and be submitted. As you can see, now we have an array here. If we open the area. Now the area includes one object with the title milk and the content buying milk. Let's add another node, title and say calm and content. Hannah. We add the nodes. We can see that now we have two objects. One is milk, milk and one is called call Hannah. So we have successfully stone all our notes. The other things I want to do is to make title and content empty after submitting the notes. So we go back to the VSCO and inside form area that ts, we go inside the click handler function and just below the AV node function, derived set node. And inside the set of parenthesis and a set of curly braces. We just need to copy this title and content and paste it here. Now after adding the nodes, denote variable would be empty. You save the file and check the browser again. For example, we submit this note again. As you can see, the title and content now is empty after the submission. In the next section, we are going to show all the data from the array inside these notes. So see you in the next section. 15. Mapping through the notes array: All right, In the last section, you have created an array which contains all the notes. In this section, we're going to use a JavaScript method called map to show all the nodes. Here. Let's first search JavaScript, map an array, and we click on developers dot mozilla.org websites. If you scroll down a little bit, we can see a JavaScript demo of using map method. As you can see, we have an area of numbers. Here. We can map to it and we can double each element. Here. We want to use this method to map through our notes array. So let's go to VS Code. We delete this console log. And we go down here. Instead of having tree node tags, we just open a set of curly braces to write JavaScript codes. And we write notes that map. We open a set of parenthesis. And here we can access each note. So we write note, we make arrow function, and we open a set of parenthesis again. Inside this set of parenthesis, we add are no tag again. And we pass two properties. First is title, which would be not that title. And also content, which is not that content. And be close to tech. Now we need to get these properties inside Node.js. So we go to Node.js and here at the top, inside this set of parenthesis, we open a set of curly braces and the right, title and content. And here at the bottom, instead of having title and content, which are aesthetic, we open a set of curly braces and we write the title and the content, which we are getting from here. So we've saved the file. Also, we saved the file in app.js. Now we check the browser. We go to our application. Now if we add something in our form, like milk, buy milk and be submitted, we get the note here. Let's add another one. For example, meeting meeting at 3PM. Be submitted. As you can see now we have two nodes. In the next section, we're going to add a delete button at each node, which allows us to delete the node that we don't want. So see you in the next section. 16. Deleting the notes using filter method: All right, In the last section, we have tried the map method to show all the notes here. In this section, we are going to add a delete button for all the nodes. So let's go to the VS Code. We go to Node.js. And here at the bottom, just below this div, we add a material UI button. So we just write button. And we click on the first auto suggestion. As you can see, we have imported the pattern from material UI slash core. Close the tag and we add the icon from material you are called Delete icon. So we write delete icon. We close the tag and be imported at the top. So just below the import React from React, we write import, delete icon from material UI slash icon slash delete. We save the file and we check the browser. We can see that a trash icon has been added to each node. We just need to add some styling to them. First we close this. We go back to the VS Code and in patent tag, we write style. We open two set of curly braces and we write marching left a 120 pixels. We save the file and check the browser again. Now we can see that the trash icon is at the end of the notes. I would like to change the trash icon color to be red. So we go back to the Cisco and Intel it, I contact the endostyle, color, red. Let's save and check the browser again. Now we can see we have read trash archons. Let's go back to the VS code. In app.js. We add a function for deleting nodes. So at the top, just below at node function, derived function, they'll note we open a set of parentheses inside this parenthesis. We have to get the ID of each node. We open a set of curly braces. Here we use the SETT notes function to delete the node. So we write set nodes. We open a set of parenthesis and allocate the previous notes. We make a arrow function. Here we return the previous nodes. And we use the JavaScript filter method. We just write filter. We open a set of parenthesis. We open a set of parenthesis again. In the filter method, we can have access to two things. The first one is each node and the second one is the index of each node. We make an arrow function. We opened a set of curly braces and will return all the notes except with the one with the same ID and index. So we write index not equal to ID. So we return everything except for the node that has the same ID, an index. So we save the file. Now we need to pass this function to Node.js. So we copy this. We go down and add the note tag. We paste the function and be equal to del not function. Other things we need to pass is the index of each node. Similar to filter method, the map method also can give you the index of each node. So here we add index and we pass the index as a property of node. So we write here id equals index. We saved the file, we go to Node.js and at the top we add the ID AND function. Here. We just write ID and still not be go down here at the button tag, we just add a onclick attribute. You just write unclear. And b equality to click handler function. And we just need to create this function at the top. So we copy this. And at the top, just above the return, we make the function. Click handler will open a set of parenthesis. We open a set of curly braces, and here we trigger the function. They'll note. And we pass the ID. We save the file, we check the browser. Now, if we click on each button, we're going to delete the node. So we click here. As you can see, we don't have that node anymore. Let's try to remove this node as well. So we click on this button. Now we don't have any notes. Okay, that was it for our project. I hope you enjoy it and learn the basic of the reacts. Please let me know your opinion about the course and wait for the course updates. Thanks again and see you next time.