The Complete React js course for beginners | Mohammed Khan | Skillshare

Playback Speed


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

The Complete React js course for beginners

teacher avatar Mohammed Khan, Full Stack developer

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

20 Lessons (2h 13m)
    • 1. Introduction to the class

      1:49
    • 2. Installing the Texteditor

      1:03
    • 3. What is React?

      3:55
    • 4. Installing Node

      2:21
    • 5. The Class Project

      1:36
    • 6. Creating Our Very First React App

      6:37
    • 7. What is Codesandbox?

      6:31
    • 8. Introduction to JSX

      11:41
    • 9. Creating a Website using React

      4:26
    • 10. Embedding Javascript in HTML

      9:24
    • 11. Creating a Website using JSX

      4:23
    • 12. What are JSX attributes?

      9:33
    • 13. Inline Styling

      3:34
    • 14. Creating a new React Component

      16:47
    • 15. Challenge on React Components

      5:14
    • 16. What is Import and Export?

      9:37
    • 17. What are Props in React?

      16:36
    • 18. Using Props to Pass Data

      6:46
    • 19. Mapping Data to Components

      9:39
    • 20. Final Thoughts

      1:04
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

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.

41

Students

--

Projects

About This Class

Hello and welcome,

In this class, we will be learning about React and make a project by the end of the class

I'll be providing all the project files in the class resources and you can use that and continue to build your

own Project.

This class will start at the very basics and explain what exactly React is and how you may use it (and for which kind of apps). Thereafter, we'll go all the way from basic to advanced. We'll not just scratch the surface but dive deeply into React as well as popular libraries like react-router and Redux.

By the end of the course, you can build amazing React applications!

A detailed list of the course content can be found below.

This course is for you if

  • you're just getting started with frontend/ JavaScript development and only got the JS basics set (no prior React or other framework experience is required!)

  • you're experienced with Angular or Vue but want to dive into React

  • know the React basics but want to refresh them and/ or dive deeper

  • already worked quite a bit with React but want to dive deeper and see it all come together in a bigger app

You will learn these concepts below:

  • Learn how to use Codesandbox

  • Learn React from scratch

  • Conditional Rendering

  • React and its advantages

  • JSX

  • Challenges after every topic

  • JSX attributes

  • Inline styling for react elements

  • Javascript ES6 concepts

  • React props

  • Mapping data to components

This is a very nice and small class you can learn a lot of things by completing this course.

Meet Your Teacher

Teacher Profile Image

Mohammed Khan

Full Stack developer

Teacher

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 to the class: Hello and welcome to the React ds developer chords. My name is moment time, a full-stack developer, and I'll be your instructor for this class. In this class, we will learn everything about React right from the basics. Firstly, we'll be learning more doesn't react and what are the advantages of using it. Then we will learn how to install NodeJS and create our very first React application. Then we will learn many more things like more dense DSX, grading a website using DSX, j mod six attributes. How do style React elements, that is inline styling for React elements or data React components, prompts and react. Mapping the dark blue components and many more things. And soon after completing all of all of these things and soon after learning all of these things will be making a bad project. Motor is nothing but profile, guard website. So it will look something like this. And in order to make this thing, we will learn how to use good Sandberg, how users react. We will learn more this conditional rendering. We will learn more as ESX, DSX attributes, react probes and mapping data to components. And after learning all of these things, so you'll be able to make this awesome project that they are seeing over here. And after completing his product, you will be able to put this project on, as you may, or you can share this project on skill share with their friends and family. So what are you waiting for guys? Join now and learn this awesome framework. So see you on in the class. 2. Installing the Texteditor: Throughout the course, we will be needing a text editor where we can write the code and make cool websites. So for that, I'm on this website called Adam dot IU, where we can install this awesome text editor called Adam. Now, I know that a lot of developers use Visual Studio Code. That's completely fine if you use that or else you can do what I do. Like. I have Visual Studio Code, I am brackets, as you all can see over here. And also I have atom. So it's really up to you to install any one of them and but make sure to install one text editor otherwise you will not be able to code. Only after do is to bless Lord, as I've already downloaded it. So I'm not going to download it again. So make sure to download it and I'll see you in the next video. We will go ahead and start making our very first React application. So see you there. 3. What is React?: Now let's see what is the ab.js react as an open source library. It doesn't JavaScript framework as a name suggest, react dot js. And react. This is used to build user interfaces or UI components. And react makes it painless to create interactive UI. Design simple views for each state in your application or a website. And react will efficiently update and render just to ride components when your data changes. And we will get and the nuances of that later on in the next videos. And as you all again, on this website called reactors.org. Here it is certain that it is a JavaScript library for building user interfaces. Now, now that we have seen what does React JS, let's move on to the advantages of the ideas. It will. It, it facilitates the overall process of writing components. That means we can reuse the code that we have written before. And that way it will, we can boost our productivity and facilitate, it, facilitates further maintenance and it guarantees table code and it is SEO friendly as your friendly as this search engine optimization. And when you use React SEO friendly, that way, all of you bloggers are there. That is like a good thing for all the bloggers. And once you learn this awesome framework, you can also learn React native mobile app developments. That means if you learn this reactors, it will not, not only avail the advantage of making website, but you can also make mobile app development. So it has focused and easy to learn that means from any other framework that has run reactors. I personally think that reactors is easy to learn and as president of US focused. So now that we have seen the advantages of Edwin Laozi, the real advantages of this thing. So let's move on to the stack overflow website. And according to the survey of Stack Overflow, according to Stack Overflow, React JS has popularity of 35.9%. That is like this second thing soon after jQuery, and I'm sure it will be, the query will be like third or fourths in the coming year because this is like pulling up. So as you all can see inside the web frameworks, vesting is this. We see that the jQuery is still looking, but it is slowly losing ground to react JS. So learning reactors as a very trendy thing and it will enable you to apply for a lot of jobs that are available. So now that we have spoken about jobs, let's see what are the jobs available for reactors? So as you all ligands Yan wants to, I'm still on stack overflow on the job side. As you all can see that I like 947 jobs within 20 kilometers of my reads. That means it has pretty much. So React is like premise famous and like so many jobs available of reactors. So once you learn react, you'll be able to make Android applications and you'll be able to make and one of the websites of course. So as you all can see, there are like 38 pages is shared by this for the within 20 kilometer range. So now that we know what is react, what are the advantages of react and why should we learned react? So let's just go ahead and in the next video, let's just go ahead and start learning React dot js. 4. Installing Node: Hello and welcome. In order to get up and running and Create React applications or websites on your local environment that is on your machine. You need to install NodeJS. In order to install NodeJS, you're supposed to go to the Google.com. So my default search engine is Google Sanjay scanners. And the strike Google just for the sake of this tutorial. And on Google, I want to search something like node.js install. I'll be redirected to this page. Choose the very first result that you will get on google.com. Let me choose that and you will be redirected to this page over here on NodeJS website. Then chose the LTS version, not the current 2Z ideas and install the installer which is compatible to your machine. If your machine is Windows, install the Windows installer. If you're a Windows machine has Mac OS, then use this one for line x as well. So the process is pretty much self-explanatory. You just have to press Next, Next, Next, let me show you that we price this thing, this, when this thing will download. And as I've already installed it, I'm not going to install it. Again. You just have to open this setup file and press next, next, next and NodeJS will be installed on your machine. And now in order to check whether Node.js has been installed, has been successfully installed on node. You have to open your command prompt or even on your Mac terminant on your Mac. Yeah. And soon, soon after opening that, lets write this command called node space dash, dash version. So that will give you the version of this thing of the NodeJS. That means you have successfully installed Node.js and you are now able to create a React applications. So see you all in the next video. 5. The Class Project: Hello and welcome. So in this lesson we'll be seeing the project overview. So this is the project that we'll be making at the end of the class earlier. Said that looks something like this. They'll buy. This, will be making this project by writing all of these curves over here. As you can see. Well, we basically learning all of these things and making this project completely from scratch. So these are the things that we will be learning. So they will learn how to use court sandbox. And I do it here. We will learn how to use code sandbox, and we will learn how to use React. We will learn how to you. What is conditional renderings, ESX and tributes, inline styling for React elements, Syriac probs, mapping data to components are in Ireland these lessons. So these are the things that we will learn and by the end of the last will be making this project already. And as you can see, this is a very nice project. You can go to this link over here, M6, 1-0, nine dot csv Dart app. And you can just go ready yet and just basically line everything. I mean CD project. So that's it for this video guys. Up on to the next lesson, we will be learning and learning everything from scratch. So ci dash. 6. Creating Our Very First React App: Hello and welcome. In this video, we will go ahead and make our very first React application. So let's get started. So first I'm on this desk dub. I'll create a new folder. And I will call this as React projects up. And then I'll just go to the cmd command prompt. And I will move on the desktop, right? Sal, move my current directory to Desktop, and I'll find this React projects over a year. Then in order to create, as you all can see, there is nothing inside this thing. The folder has MD abscess, create an ID. And then in order to start our very first, i mean, to create our very first React application, all we have to do is just write NB X cleared React app. Sam, just go and do that. And Bx cleared react. And soon after that, as you all can see, the documentation of this React application, React ideas. And then soon after that, only after those to write their application beam here unless you're going to go with the same when my app. So this will do its magic and then it will set up our project. Might take some time in order to finance this thing. And so I'll just stop this thing over year, medieval as soon as this thing finishes up. So yeah, as you can see, everything is where everything is done and please do not vary over this. Taking a lot of time. Those set up everything. It might take a lot of time. Depending upon the specifications of your computer. Now, it took me about 15 minutes. So yeah, that's up to your computer and we will and we won't be creating the react up again and again. Instead of that, we will go ahead and use an online compiler that we will speak about in the next video, which will speed up our process and so that we can practice a lot of things. So yeah, so I'll have to do is to just go ahead and write cd myapp pieces that you began with. By typing CD, make sure they are in the same file OER. As you all can see, I'm on the Syriac projects. Mine app has been created over here. And all after do is to write cd, my app. So that we'll move to the, my application that we have created. And all we have to do is to write and BM style. So that will start over. React application. So this will automatically open the local Mackenzie localhost at the port of 303 thousand. And as soon as this thing finishes up. Yeah, you will see the basic template of the React application. This is what React gives us. Now, we will go and see the coding part of this thing. So in order to open the coding part, you need a text editor. Now, there are many text edit data that editors available. You can go ahead and use Adam or maybe via scored, our sublime or just everything is really up to you. But make sure to go to this website, Bible, GAS dot IR, dogs, EN editors or RER, Make sure to install the packages that are shown over here. So if you are using atom, makes sure to install language babble, baggage, and follow the instructions are using subline. Them are visually good AND sure that a lot of you all use Visual Studio code because it is a very famous one. But I like to use atom because I like to use. So let me just go ahead and close this 1 first. And as soon as you open this thing, go to hell and welcome guide. And already we have something on installer package and press open installer and make sure to go to this website. I'd have shown over here babble dS dot IO, and installed the packets that it said to install language dash HIV-1, babble. So let's just go ahead and search. I've already installed led by language, hyphen Bible, I'm just showing you. So as you can see, I've already installed it. So yeah. I'm just gonna close everything and let's open the file. But as New File, I'm sorry, for low. Whereas the slant and project for LA, all you have to do is go to desktop and where our React projects select folder. So this will open the folder that we are working on. So this is the my application and as you can see, it has all the four letters over here. And when you go to the app.js, let me see where is that. Inside SRC, we have app.js. We have all of the code that does and related to this one. I'm sorry, not that one. Related to the Google Chrome React app. This one, as you can see, this thing is having a React app. And this is where we will be spending most of our time app.js. So please do not feel overwhelmed by seeing all of these things. When you see this thing for the very first time, you live basically confused and you will not get anything. So don't worry about that. We'll speak about that in the next video. So for all that and more, CR led the land goodbye and take care. 7. What is Codesandbox?: Hello and welcome back guys. In this video, we will see what is good sandbox. So in order to get up and running pretty much quickly and straight away, I want to introduce you to something called Sand God sandbox. As you all can see, I'm on this website called Code sandbox that not I0. This is like an online compiler that v, we have four other languages like C plus, plus Java and other languages. So basically takes care of all these setup so that we can start up right away. We do not have to go ahead and do this and BM start again, and we don't have to clear them. React application again and again. In order to avoid that, we can use this court sandbox Ali after do is to just sign up with GitHub account on just, you can just use it in this way and you just have to press cleared sandbox. Here we can create a sandbox. Sandbox is just like you are grading the React application, thinking in that way. So we have different templates. We have react, we have NLRB, have snore, dS also. And we have three react, we have types, corrupt and stuff. Now in this course, of course, we will be seeing about React. So that is the reason we will use this react and blade. So this will basically said up everything that I've shown you in the previous video. This will do all of the npm start stuff and it will be, we will begin basically start off like very quickly without even taking tension about the setup and all the mumbo jumbo thing that we do. All let npm start and moving this and that. Now we can use the code editor as well, but in order, in order to share the code, as you can see when. Before that I will just show you what is this thing over here. We have all the files. As you can see, we have public, we have index.html file. When I open the react file, we have index.html file as well over here. Same file will be over there. Okay, I'm sorry, I'm going to close this one and open the WorldCom. Yeah. We have this is like the this is where we will have all the files. When I open this thing, I will get all the files in the asylum even laugh. App.js, index.js, index.js and app.js. Now, please do not feel overwhelm. I will be speaking about all of these things in the next video. I will explain you about the structure of this thing. We will speak about everything and not so pleases note feel overwhelm the stay with me now. So as you can see, vf SRC, we have SRC her as well, but as you can see, we have different app.js, CSS, we have different types of stylings because in the React obligation building, it gives this type of application over here, but the files are pretty much the same. So over here when you see the, okay, yeah, and you see this thing, dependencies we have react, react, Dom, and we can also add dependencies that you earn. Suppose you want to add. Sorry, not we can add Nord. So there are other FEV1 to enter any other dependencies if you want to enter fed, maybe like GOD. So we can use that. We can just do it in just one click. So in order to speed up our process, we will be using this. And also I'll be showing you how to share this thing. Ali after Louis to go ahead and sign up with GitHub. And then you can press fork over here, so that will fork any drafts. You can go to your drafts and see the folk sandbox here you can name anything you all weren't here. I will name something like React first app, something like this. So if I, if I just leave the project and this way, I can come back again and continue from here. Now we can also send our project, I mean, like use this thing and set up our project inside our, inside low locally I'm and if we want to set up everything locally, we can also export this file Ali after Louis to go to file and press Export Ritalin speaker board in the next video, in the coming videos, not in the next video, because here we will be spending most of our time. So I'm just going to reload this one. So this is like the beds that we will below are here. So when we open this thing in the new window, and we'll have a very big window. And here if I just go ahead and I'm just gonna close this babble when and if I just go in and change in the app.js, as you can see in the app.js, IF IT in something like hello, my, Hello. My name is Sam. Let's save this thing. As you can see, we will see this thing over here. So this is like a small window and this is like a beggar Menlo. And here we have console over here in order to see the console logs and we have problems. This will you give all the errors over here. And we have react developer tools. This is the react Developer Tools section. So you can use both of these things. You can either uses local, local host too, work on your project, but I recommend you to use this thing because you can use this, use this link over here, and you can send it to your friends and family so that you all can just show I'm sorry, I just put down yeah. Never mind automatically anymore, but for me. So as you can see, we can use this link and send it to your friends and family as well. So you have everything that we need. Now, in the next video, we will see about this dx, DSX and will basically see the structure of this whole React application. So for all that n mod c earlier. 8. Introduction to JSX: Welcome back guys. So let's all be on the same page. So I just want you all to go to this website over here. As you can see, I have fought this thing. I just want you to go to this website and you will find this file over here, the Syriac file. So the only file that will have the code is will be the index.html file, as you can see over here. So it basically does not have anything. It only has a dev and I will create a script file. So this will have a script file attached to the index.js, which does not have anything at all over here. And basically, the index.html file will look only like this thing. It won't have anything. And if you are working locally, I said this, ya'll delete all other things that you have that you do not have overhear. Yeah. And there's one w1 and if you're if you're working locally, but I recommend you all not to do that because one, it will take a lot of time to set up if you do not have good specifications of your computer and dope, this thing is pretty much easy and you all can share your application to our friends and family. So yeah, as you can see over here, we have the script attached to, we just have the HTML Boilerplate. We have this title. Let's rename this 2f React app. So let's just go ahead and see this thing over here in the new window. Be unjust minimising this one because our resizing this one because we have this very big window here, it just does not make any sense to use this one, but we will be using this later on in the course. So as you can see, this basically does not have a, this thing is only having a div with has an ID of road. And this thing as a script attached, that is index.js. So now that's pretty much it. We do not have to touch this index.html file. All we have to do is to just work with this index.js file. So let's close this thing. We are not deleting it off. You're disclosing enough. So, so as you all can see over here, we have dependencies. So as you all again CEO earlier we have dependencies. And if you have ever worked with NodeJS, you wouldn't, you would have, you would have noticed whenever we do npm install, whenever, whenever we do npm install the package name and it will configure. And then we have to go ahead and create a variable of that type. Let us suppose if you are grading has CDPS, so we have to require that packets that is called GDB in that way. So if you have worked with know Jesse, we love, nor does that. So similarly, we will go ahead and implement all the dependencies that we see over here. So let's write var react. Let's put equal to that will require. And we will write small reactor because as you can see the name as this one. So now over here, this is a react Dom, Right? I'll create a React capital DOM and we will write equal to require. And over here we will write React dash norm does semicolon over here. And let's us save it off. As you all can see over here. And now over here, we have to use this react Dom, react Dom. And all we have to do is just to use the dot and render function. And this function will be used to display the contents of the website. So as you can see, we did not have anything over here. This function will take two parameters, mn as where two, sorry, what to show. And let me know what to show and where to show. So now we are having, we are having a lot of flour looms over here because this is a pseudo-code. So let me just ignore that. So this is like if you want to show our heads h1 tag. So we have to write and heterogen tag over here. And where do we want to show it? If we want to show it in the, this thing over here in this division with hazard Rudolf, which has an id of rude. And we want to show over there, we have to write this thing over here. So let me just go ahead and write that. Let me remove this thing as well, and I will remove the comma. First thing is what to show. Let's talk. Let's show. It's MAN tag says, my name is Sam. And where do I want to show it? I want to show it inside this root. So let's show it this, let's show this thing inside rho. So in order to do that, we have to use plain vanilla script. All you have to do is to write document dot, get element, that ID route. So when I save that and refresh this thing, I will have this H1 tag over here. So similarly, I just want you all to go ahead and do a challenge. I just want them to remove of everything and do everything from scratch. And instead of writing your name, right, welcome to my website. So go ahead and do that now. So I suppose you have done that. All we have to do is to write var and react capital reactor. And this is a semi m. You can name anything you want. So while react, and here we are supposed to require, we can require the react, react Dom, require. React. Dom doesn't recur. And over here, now, this Court has pretty much big and I think that there's just a lot of code over here. Now in order to avoid that, we can even use import, import React, anything, anything you can name anything you want, import reactive parameter, react. So it is equal to the same thing that we did before. It is equal to creating a variable and assigning it. We are requiring this dependency over here. Now. Similarly, I will write import, React, the DOM for AM react Dom. Let's either semicolon. So as you all can see, this, this is showing Edit over here because it is declared but never used. So let's use it. All we have to do is ride, react, Dom, render to render the website. And right, it's one DAG. Where do I want to show it? I want to show it get element by ID. I want to show it on the root depth. So this thing is pretty much the same. We do not have to change this thing, anything change anything at all from this thing. So everytime you are supposed to show the whole contents of your website from this onto this division. So here I will write, Welcome to my web site. Let's press Save. And as you can see, as soon as I press Save, this thing automatically loaded, and we have this cool website over here. So now I just want you to go ahead and write an ordered list below this thing. So I suppose you have done that. You might have gone under, wrote something like OL and created this OLR warrior and road few link list over here and wrote the first one. So as you all can see, this thing is having a adder over here. The reason that, the reason that we are having this error is because we cannot render two elements inside this thing over here in the render parameter. So in order to fix this thing, we just have to wrap it up inside our division so we can write a deaf. So basically we are creating a parent element and putting everything inside that. So when I do that, we have this list over here. Now again, copy-paste this list again and again and again. Over here. Over here, and over here. Similarly, I can write something like second. So as you all can see, we can render this file over here. Now you might be wondering how can we even use JavaScript and HTML together. So this is known as DSX. So this thing is pretty much doing some magic in the center function and implementing this java script. And putting I'm in the head HTML and putting it inside this get inside this division by using a JavaScript function, we are implementing heads Gmail and JavaScript together. So that is called js X, that is what babble is, and this is what React uses. So this will basically help us to put HTML, HTML, and CSS. I'm just writing this thing, CSS and JavaScript altogether inside few files. So we do not have to create the whole CSS and we do not have to implement booths tab. You don't have to do any of those things. So yeah. So this'll basically minimize the code and this'll be a little bit more readable as you all can see. And in the next lesson, I have a small challenge body or head of head over there and see you all in the next video. Till then, good bye and take care. 9. Creating a Website using React: Hello and welcome. So in this video, I just want you all to do this talent. I just wanted to create an H1 tag. And if you ordered list and inside the list, I just wanted you all to put your favorite languages. Now in order to start this thing, you can just go ahead and go to this link over here. And for good, fold this thing in order to make a local copy. And then I just want to be able to go to this sandbox and make this thing. So go ahead and do that now. So I suppose you have done that. That's pretty, pretty much easy. You don't have to do anything at all. And we're gonna remove all of these things over here. Yeah, we will do everything from scratch. All you have to do is just to import React from three. I get that. So Izzy, as you can see, we have the three I react dependency. We are importing it. And then we will import, react. React. No. It's just as obvious as opposed to in Bordeaux on distinguish. So now in order to show, show, show some stuff to the website, we have to use this react Dom. And over here we have to pass in the end-to-end DAG. Because that is what you want before, right? We will show my favorite language or maybe favorite computer languages and advise people misinterpreted. So where do we, where do we want to show it? We want to show it dot document.getElementByID. We wanted to show it in their deaf that has an ID of fruit. I'll just go ahead and make this thing a little bit small so that you all can see everything. And I guess we will increase the font size as well. I guess this is 15. So let's go to File, go to Preferences, go to settings. And over here inside Text Editor we have fond, Yeah, I've said that was 16. Well, let's make this thing as 17. Okay. So this is 17. And now this is pretty much make because I have a complaint from a lot of my students that they cannot see stuff that iodide. And so that is the reason I'm making the font size. So I guess let's save this thing. So this will decide, I mean, like put everything in order. So let's press this thing in order to create more space. And over here, I just wanted to add, what do we have to add? We have to add a list, ordered list. Now as I've told you, we cannot add an ordered list. Like we cannot add two items inside this render function as a parameter. So we have to wrap it up inside a parent element. So let's put abandoned element that has our div. And then let's go back over here and let's write the ivy. And then over here I've already cleared an ordered list which has elements LI. Yup. And here I will write PHP. And I will just copy paste the whole thing. And when I press can't unless there's a lower demand degli. Yet I would like Java. And here I will write Java script. Here I will write c sharp. Gaba mistakenly press F2, F, C Sharp. Yeah, so as you can see, we have this thing over the other and we have successfully completed mistake. So congratulations for completing this man. So, so in the next video we will see about a lot more stuff. So see you there. 10. Embedding Javascript in HTML: So low and so now in this video, we will speak about react a little bit more. I mean, js are excited to put more. So as you are again, z VR implementing. I mean, we had embedding, headstone, HTML and CSS together. So there is one more thing that we can do. We can also put c. Now the hierarchy is in this way, so fast that is understood this thing as a comment line. So first we have the JavaScript, which is all of these things in board, react, react, nor Brenda. And inside that data script, we have head stephen. Alright? And now by using DSX, we can also put JavaScript inside hits the M. So let us pretty much, this is pretty much confusing, but it didn't make a lot more sense as we implement this thing. So let's remove it off. So yeah, let me remove all of these things over here. And I will just create a H one dagger. So let's add H1 over here and I will write something like hello, my name is F. So let's put this thing over here and let's save it off. And as you can see, we have the same time. So now over here, if I created a VAD, I mean a variable with the name and that has a name of Sappho idiot. And that's a squared this thing of Sappho yet. Now if I want to use this thing already, how do I use it? If I just write name? Since this, considering this thing as a text, I'm just writing this thing over here. So now in order to use this thing over here, we have to wrap it, wrap this thing inside Gottlieb minuses. So now gs x will know that this thing is a dao us could element and this thing is a variable. And it will go ahead and find a variable with this name and we substitute that thing over here. So this is pretty much easy. We don't get confused. The I just put embedding. First. We had embedding head HTML inside JavaScript. And inside JavaScript we are embedding JavaScript inside an HTML, we are embedding JavaScript, so do not get confused. And when I didn't comment line over a comment line over here, inside JavaScript, we are embedding HTML and inside it, CML, we are embedding JavaScript. So D is x, let us, let us do that. So DSX is but at a much powerful and it lets us do all of these things. So now I just want your logo and do a very, very easy talents which I believe matters very much easy. I just won't be able to create. Firstname, variable. And put this thing is as hello, my firstName is this, and hello, my last name is this. So I won't be able to create two paragraphs and a to H 1s. And inside the first one, Hello, my first name is Jada meme, that will be inside the first name variable and the second element, I just want the older bird alone mine, my last name is this thing, and which will come from a medieval. So go ahead and do that and the talents now. So I suppose you have done that. So all we have to do is just wrap this thing inside our depth because this and Dart render function accepts only one HTML element, it does not accept multiple element, so we are making a parent element. And inside that variant element that we are putting multiple elements, so that thing is visited. So here I would like to and hello, my first name is this thing I will create. Let me remove that here first. I will create a variable. I'll call this thing as f anime, that data's firstName, and I will call this thing sf. And over here, I'll create one more variable that is a limb. And I will call this thing.'s. Let's put a semicolon over here, and let's write two variables over here, that is F name and some space over here. And let's write. The firstName is designed for video. I will just close this tag and then I will write here as hello. My last name is yeah. So as you can see when I save it off, as you all again, CV have limb us. I'm sorry, I just misspell it. So as you can see, we have hello, my firstName sf, and then my last name is staff time. Now I just wanted you all to do one more challenge. This is pretty much easy. Once you have done that, I'm sure that you will do that next to an asset. I just want the order to abort. Hello, my name is forelimb, firstName, lastName. So go ahead and do that now. So I suppose you have done that. So I laughter do is just take a moment first understood COP, okay, unless stream over it off. And here I will. I can either do this thing and do is I can just write to somebody and I can write a limb. So as you all can see, Hello, my name as safe, as odd as I can just remove all of these things and I gloss over here. So we do not have some space over here. I will write one more plus, and I will write, I'm just using plain JavaScript over here. I'm just creating some space in between them. So pretty much, it's pretty much easier. You don't have to worry about anything. So the reason that we can do this by using DSX. Now, one more thing. We can also put numbers inside it. So let's create a paragraph, paragraph p. And here I will write my roll number from my college was six. So I just want to be able to do this thing has a very easy this thing as a talent, I just won't be able to create a variable and put this thing inside a video. I suppose you have done that. All you have to do is to write VD and write roll number. And here I will write, I will split this thing S6. And here we will use the roll number variable and embed over here. Yeah, size. You all can see from my, from my college was six. Now we can also put plus minus already and if I want to multiply it by six for some reason, I can also do that. 366 multiplied by six is 36. If you do not know that, I'm sorry. If we want to do minus two plus, everything will work. And one more thing that you cannot do is if conditions over there, if, suppose if I want to write F, F name is equal to sf. And if I want to return something like It's like HMM diagram. And our good name is set. So you cannot do that. You cannot do this thing because we cannot put f conditions. The only thing that we can do as dust. Any explanation that gives us sing that returns a single value, only that thing will be executed over here inside this godly businesses. So let's say I draw lumber. So pleased the non failover when this was pretty much easy. And so yeah guys that said for this video and in the next video we will speak about react a little bit more. So see you later. 11. Creating a Website using JSX: Welcome back guys. Now, I just want to remove all of these things that we have seen. Now. In this video, we'll be doing a very easy challenge in order to make your perfect here. I just, I'm just putting this thing as account comment line over here. I just want the all do. I just want the output of the website in this way, right? Name, by your name, whatever your name is, My name is Stephan. And here, right. Copyright. Are every like arrives odd. Maybe you are right the current year and do not put the gerund deer. And just by using, by hard coding, it used our script to get the current DR and put this thing inside over here. So that's very much easy. All you, I guess you might have to Google a little bit about how to get the current year. On Google. You can find it on the documentation of JavaScript. You can use MDM dogs or you can use W3 schools, whatever documentation you are referring to, you can use anything, you all water. So so DOD outputs had been this way by Stefan and then the year. So I suppose you have done that. If not, we'll just go ahead and do that now. So here, first Algeria it and live. Because this thing looks, I really hate when there is an LR over there. So now the errors are gone. Let's first S candle less. And over here, I will create a var which will have my name. And here I will write Ceph is my name, and here I will get d did. In order to get the data, we have to use this thing over here. How did I know that? I went through their documentation of I just stored did Java Script documentation. I went to the MD in dogs Mozilla documentation over here. I just saw that we can get the, we can use this. This is a constructor and we can use the dot-dot-dot now we'll get the current date. So this is how we are supposed to use this thing. So I'll just use that one and created that over there. Whereas over here. So we have created that and to get the current year, we have to write date dot get fully so that we'll get the current year now of the console log, log this thing over here. Let me see if this thing works or not. Let's put this thing year over year. So as you can see, when I put that in, it gives the current overly current year-over-year. So let me minimize this on or maybe I'll just leave it in this way. Again. I really cannot. And to see that thing over here, okay, just leave that thing. And now over here in the rendering industry move of this console.log. And here I will create a paragraph or maybe two paragraphs. And here I will write name. And the reason that I'm giving you all of these challenges is to just make you perfect in all of these things, more deer learning. So the more you learn, the better for you, right? So as you can see, we have completed the challenge, which I'll save time and that. So the more you learn, the more you will know about things, right? So that is the reason we are doing this silly, silly challenges by make yourself effect because we're doing a lot more difficult things are the more and more and forward in the course. So yeah guys, that's it for this video. See you in the next video. And land goodbye and daycare. 12. What are JSX attributes?: So welcome back guys. Now in this video we will see about DSX attributes and styling offer. React elements. Soon, let's remove everything that isn't necessary now. So I have created this thing, as you can see over here. We have the sphere foods over here. And now, if I wanted to put some kind of background color to this H1 tag in normal hits, the EML I can describe the class is equals to. I can write any name like suppose if I wanted to write color and I can go to the styles distinct, and I can just write this thing over here. I can define the this thing colour. And, and then over here I can write bag around somebody like blue. Now if I do that, as you can see, we have this bag around Canada as blue over here. So this might work. Now. If you put glass over there, this will work. But when I go to the inspect and go to the console, we will see you will have a lot of errors. Let's go to the console. You'll see, as you can see, this thing is having few errors over here. Invalid DOM property class. So when using DSX, which is index.js, if we are using index DSX as elegance as this as DSX attribute, we are supposed to write class_name. So now we will not have that data that we saw were to inspect. Console says you again, see all errors are gone. Okay? We will have this error over here, but we do not have that data that we had before. So you might see this thing and God syntax, expected token, unexpected token, this one. The reason that we have that error is because as you can see, we have this thing as index.js. If you put DSX, then that error will be gone. So as you can see, I'm sorry, we have done something wrong. I guess I did not change the type. So let's move to Okay, I was the only guys in the diabetes JavaScript, so we have to change that and not genes that an aswell js X. So now I really, I suppose that should be gone. So as you can see, we still have that error. I'm so rested on the toast gone. So if we have that, that's not a problem. If you just want to put, and for some reason this isn't even changing. I wanted to put this thing as the sags now and save this thing. Never mind. If you do that, that will be fixed. So no problem. And those things and that thing. And then let me close off the React app that we have. So we are having a coin confusion over here. So yeah, no problem. So we have this thing over here. And one more thing that you're supposed to do while giving that attributes for any heads DOM element, you're supposed to use camel casing. So as you again see, we wrote class space capital N name. So this is camel casing. So if you do not know what this camel casing, just go out and search for something like What does camel casing? So camel casing is this one. The first letter will be small and the second lead, second word that is coming after the first word will be kept and in this way. So campbell guessing with example. So as you all can see, computer hope is fed ex, Word Perfect. So these are known as camel casing, FAA put any other attributes like I don't remember any attributes but if you put any other attributes, okay, that is this attribute called content editable and FMEA, this thing as Drew. See the thing that we will have. Again, this added, this listing Arya. Yeah, again, this edit, this thing, but if you make this thing as false, this thing we won't be able to change as the basic ahead seven tax should be in the way. So let's remove that. The reason that I'm showing you this thing as because we have to implement, we are attributes over here, right? So we are supposed to use camel casing, as you all can see this thing as camel casing. Any attribute data implementing inside DSX are supposed to use camel casing. So that was the reason that I was showing you. So yeah. Now, one more thing that I want to show your lower here. We can also put, OK, I'll show you a content. What was the content editable, right? It was equal to true, right? Now if I want to put this thing inside, I'm sorry, we're supposed to wrap this thing inside double quotes. Now if you want. So let us suppose I created a variable. So let me just resize this thing. So if I get it created a variable, Boolean variable, one to edit as he goes to true. And if I want to put this thing variable inside this thing, and I just have to write. These two things. Can liberties and right, want to edit. So Arles, I guess we have to remove of this one. Okay. Yeah. Yeah, supposed to remove that one and now we will be able to edit thing, added that thing. Now if I change this thing TO false, now we won't be able to change that T. So main reason that I'm showing you a listening because it'll be using this thing later on the course. And one more thing. We can also, if you have ever used IMG, IMG tags, and if he puts SRC, and if we, if we are using any kind of heads GDP link, I can just put the headset db link inside this var. And like somebody like URL, and just go ahead and search for something like Lorem, Ipsum, Lorem, Ipsum, Lorem Ipsum. But here we will get different, different photos. We just have to put this link over here. Okay? And let's choose this one. I'll just write copy. And let's put this thing inside double quotes. And inside SIC, I will pass in a URL. So as you can see, as soon as you press refresh, we will have different dividend for us. Yeah. Let me do that again. Wow. Yeah. So as you elegantly, this thing is inside a tone, that's it isn't it does doing that thing. Put it outside H1. Okay. Yeah. So we will have this thing again and again. We are different for us as we reload distinct noun, we now having this edit because we did not have alt text. So we have to write, this is an image, isn't random image. This is what the people who are blind ME like. They do not have the ability to read our see anything. So if they use screen readers, then the screen reader will read nesting and this isn't random. So this is for those Beauty. Okay, I'll remove off the sun. Yeah. So if for some reason, if our pitch has failed to load than they'll show that x over here. And as a screen editor will read this text audio. This is m n, and this is a random, I'm sorry for Miranda's grammar. But it is what it is. So yeah, guys, that's it for this video. And see about a lot more stuff in the next few videos. So CR layer. 13. Inline Styling : Hello and welcome back. So in this video we will see how we can style our heads when tags using inline style elements, using inline styles. So let me remove of this image that we have over the removal of all the things that we do not need and remove this one as well. So now tell me, if you do use headstands and how would you write in-line text? We will just write in-line and equal to right, the sun values inside it. So this wouldn't work if you'd like to color and blue. So as you can see, this will throw an arrow style prompts, expects a mapping. So destroying some kind of error that we did not, we did not see so far. So. So in order to implement styles, we have to wrap this thing inside two parenthesis curly braces. And inside those curly braces we have to put one more luminous and inside over here. And I'd color and color. And if I write blue, okay, blue, then this would work. This wouldn't work because if the attributes are supposed to be inside double quotes, so this would work in this way. So this has been a demo. It's helpful if we are trying to edit this thing, like you want to press a button, then that would change the color. We can use this inline style elements, so this would work perfectly fine. So, yeah, and one more thing that we can do, we can put a state. I mean, like I stared. And we can put equal to, and I'll create a JSON object. And here I will put some values, which is having color and value of red and over the background. Color as maybe black. Yeah. And let me change that. You'll listen. And this wouldn't work because we are suppose to write capital C. As I previously said, we have to use camel casing. So as soon as I, not that at all will go off. And now instead of wrapping this thing inside this one, so if you see this thing is entitled JSON, so I can just pass these stared. So this will become in this way, yeah, 95, just remove these stead. This one thing will have an header and just try this, put this thing as M d1. So this thing will be removed. And if I put now we will have this timing. So similarly, we can use to remove some styling and we can use all sorts of stuff to stylobate elements. So yeah guys, that's it for this video. The main reason that we were learning this thing is to know how to change the style elements using inline tags. So make sure in order to change anything all 1D after use camel casing, magneton. That is no dash. You're supposed to use capital C. So yeah guys Cl in the next video, didn't lend goodbye and take care. 14. Creating a new React Component: Hello and welcome. In this video, we'll be speaking about React components. So let's all be on the same page and go to this length over this length and this fog, the folk do make a local copy of your lec. So I just wanted to go to this link so that we, we all will be on the same page. So as you can see, this thing has a heading and somebody to repetitive content over year. So this code, I have to scroll down see, to see all of the code. And researchers say that the more you have to scroll down, the more your code will become an understandable. That means if someone knew someone who was your colleague and who has, who works with you will see in this code I'll be like you, we will ever understand this code. The reason is because it does a lot of core rides, so it will, we'll confusing for us. So React has made this thing. So React had made something called React components. So let me just go ahead and remove here. So I'll just leave it in this way. Sazzy l can seem Yap, this H1 heading, right? So what if I say that? I'll just create a function over here. Just see this thing as greater function and I'll call this thing as heading with capital edge. And here I'll be creating a function, and this function will return an H1. This settlement. Let's copy this H1. Yeah. Semicolon over here. So as you can see, when I have removed, the X1 will automatically be gone. That's common sense, right? So as you can see over here, this thing has a name of heading. So if I can just right heading, capital edge heading, and self-closing tag. So as soon as I write that, as you all can see over here in the return function, I have the Epsilon. So whatever the content is inside the heading will be moved to this tag. So it is like it is like reactors giving us an opportunity to create a headstone HTML element of herself. So, so it does like this thing. So in order to differentiate between the normal tag and the tag. So we are supposed to write the first letter of the function as a capital letter. So as you all can see, heading. And so basically we are minimizing the code if you all can remember. And similarly, we can create functions for this one as well. So as I challenge, I want you all to create a function for this one. And the last output should be something like this list. So this should be the function that you should be creating and you should remove all, OK, we should remove all of this content. And I just wanted to create a function over here. So I suppose you have done that. The process pretty much self-explanatory. See, early afternoon copy will copy this whole thing and press Control X. And over here, you can create a function called list. And yeah, as you can see this list that and has been gone. And here I will return. What would I ridden ever done this thing? So as you can see when I have written that, this thing is automatically giving this output. So you'll be like Stefano, you're rewriting the whole code again, that's not absurd. So similarly, we can create a new folder over here, go to SRC. We can create a new file, and I'll call this file as heading Node.js. And inside this heading ab.js, what I will do is that first I will import the minimum and import the React, import. And react. So that will import all of the things that I would lead. And over here I will just copy this whole thing. And I'll just copy it over, paste it over here. And at the end I have to write something called code export default heading. So this thing is like we are importing react after riding the heading, we are supposed to export this function. So what does the ES6 thing? So this is like a little prerequisite, but I'll be speaking about this a lot in the next videos, I guess. So. Let's press Control S Sazzy organs. If you have this thing, we did exported, right? We exported here. So why is it not, removing the center over your heading is not defined. So you have to import it also. So of course, if someone is someone exporting something, we have to import that. So import heading from I just have to go back by pressing DOD heading. That's it. So as you can see, I've imported that heading and let me press refresh. So as you can see, the heading is back now. Now as a very, very easy challenge, I just want you all to go ahead and do the same thing for the list as well. I want to and to create a new folder by pressing this one, chord less Node.js. And I want you all to do the same thing here as we did. So yeah, I suppose you have done that. Let's create a new folder in the SRC, new file. And let's call this file as lists dot js. Over here I will go back to the head, this thing index.js. I will copy this whole function. I mean, cut the whole function. And over here I will just go and, and in the list, I'll paste it over here. And of course, for that, we have to import that the react functions, reactor library, react, react, react. We do not need to react Dom Because we're not rendering anything or if we are entering here. So we have to export it right afterward, export the fault list and the name of the function. Press control S to save it, skin donors to save it. And I'll press control S to save it. Now we are supposed to write import, import, list, dot list one and list. So as soon as I do that, as soon as I do that, I will have this thing output over here. Now we get even minimize the code by doing the thing that I will do right now. So I've created a folder called lab file called app.js. Here I will create a function first-time to import the library dependency in voter react. React, as you all can see over here. And I will create a function, and I will call the function as app. So as you can see, we have this app and now in the return, what I will do is that first I will import the heading, heading from heading. And I will import the list as well. So we are getting the list from here. So as elegant superior in the ridden function, whatever Lewis that I will return. Because again, I've ridden heading and I will written list. I'm sorry, list. And I don't think there is a need of OK, I guess we will wrap this thing inside our div. Yup. So that error will be gone. So now over here, I will export it. I will exported by default. And I'll call this thing as apps. So you're supposed to write the same name. And over here in the index.js, instead of doing all of these things are less remove analyst right? Inboard from app dot ds, app. And instead of writing heading and list and div and all the stuff, I will write App self-closing back. So over here I have to remove this one and it doesn't look good. So as you can see over here. So now that we have imported app, what I will do is that I'll go to the app.js. Okay. Okay. I guess I removed off that content, so no worries. I'll just go ahead and write the app. And I was just him. I'll import, react, react. And I will create a function called App. Audience. Inside this function, I will done the heading and import. Import. From the time we got to know video editing inside our live coding. And the list. Now as I previously said, we will exported explored the fault. And I will not forget to save this thing. So I have to remove this thing over here. And over here, I'll just come back over here and look if for some reason this thing is automatically leading it off. So what I will do less to create a list, delete this thing. I'll create a new file. I'll just call listing as app.js, not KS, GS. Well, my Over here I will write import React from React, and I will import the heading. I'll just speed up this process. So yeah guys, I've created this new file with the name of some NodeJS. And I've created this app over here and have an I have exported the default app. This would actually work in the string and local environment and for some reason the sand walk is not reacting properly, but that's fine. It will work properly. As you all can see, when I write all the code inside app.js, everything is this vanishing of. So let's leave it as I've just created a new file called some Node.js. And inside that I've created a function called app. And as you saw I've written, let me remove off all of these things because we don't really need this thing, I guess. So even if I do that, so as you all can see, I'm just, I'm just importing heading unless term here, but I'm heading and Lester. And I'm just exporting this app and putting it inside the whole lab. So this is like the whole application. So this react has been used by many is, and have been used, been used by many companies like Facebook, Twitter. So when you go to Facebook.com over here, as you can see, we have a timeline component over here. This is one component and we have Navbar component and everyone is does not attach to each other tabs you can see. When I'm digging down inside the timeline, all of the other things are not loading it on Sazzy all can see this. These are the contacts component, the, so this is one component. Similarly we had for heading component. Suppose this is the Navbar component. So this is the Navbar component. And we have this component. This is like the list component over here, and we have timeline component. So that will basically minimize the code and it will basically help you to create a very good application, good-looking application. And it will also, as you all can see, nothing is loading at all. As you all can see over here. Oops, this is my course. Yeah. So nothing is loading at all except this timeline. So this thing will be independent of that. So if you change some kind of information from, so if I get a new notification like that, there are 1800 notifications. Suppose this was the Navarre. And if I change something inside the heading navbar, so if I chains like my favorite games. So as you can see when I do that, similarly, I'll get the same result here. So that will minimize the gourd and we can work one-by-one together. So if you're building an application, if at building something or feel something like Facebook, you can just divide all of the components and combine all the components inside App. And you can render the application in this way. So if we create a new sandbox and just show you all, it's created a new sandbox called react. So this will get a new sandbox and it will have the same things that I've shown you. This thing has app.js. In that app.js, we have head Simon and hits too. So we had four heads when we had another component. And for the edge to the list we have, we add another component over here. And inside the index.js, this guy's importing app and this thing is using App in this way. So for some reason our app.js wasn't working properly. It was just the code that was inside this one was basically removing of automatically. So index.js over here, this thing as a reacts strict mode, we can just remove it off. It doesn't make sense. It wouldn't make a difference. And she ideology the court is the same. So here this guy's doing those guys like instead of writing the document.getElementByID directly, this guy's basically creating a contest called root element and just passing it over here. So this is something that you all can do, I suppose. So that's it for this video, guys. And in the next video, I have a very easy time for y'all. So see you all there. 15. Challenge on React Components: Hello and welcome. In this video I have a very easy, easy challenge for you. That's so much easier. And the thing that you're supposed to do is to, instead of writing is heads when companies directly in the app.js file, I just want you all to create new heading components. One, let's call the first one as head heading. And the second one I start node.js. So I suppose you all can do that. So go ahead and do that now. So I suppose you have done that. The process is pretty much easy and it's just so easy. So let's create a new file. And I'll just call this thing as heading node C, S. Over here I will import React from reactor. And here I will write in board, not him what I'll create a function and call this function as heading. And I'll return H1. And I'll write the same thing. Cored sand box. And we have to export, right, export the fault. Export default heading. Sorry, we've got And over here. So this will save it off. And over here inside this and we have to import heading from Heidi. And instead of writing this one, we are supposed to write. So both fluoride heading up this one. And we have to do the same thing for that one as well. But I'm just going to leave that that thing as a times because the process like the same thing that we are doing over here. So if this is NDA working over here, I just want the, although sometimes quote sandbox might not respond properly. So so this thing might not respond properly sometimes. So I just want you all to go ahead and use the local environment that we already, already all always use. If, if you're finding it hard to emulate fair? Computer takes a lot of time to real startup DDR tab. It won't take a lot of time.class file and just press Export to zip. So that will create a zip file that will export as a pile over here. And Ali after doers to write npm start. So that will start the whole project. So I've installed LED and I've unzipped it. This will be the file. All you have to do is to just move your this thing. Current directory towards the downloads to the photo was the file over here. And when you open the file, it will have all the stuff. All you have to do is to write npm install. So that will do all of its magic and you can open the text editor and start working. So sometimes as you all can see when I'm saving this isn't saving this app.js and saving it all. Oh, okay. Is this and this one's the friend list I import heading from heading. And let's do that. Okay, I don't want that one heading size yet. Again, see this thing is not working properly. When I come back, this thing is basically vanishing enough. So we're going to use your own a local environment again, just use that again, just use and Bx installed, React and be excreted React app, I'm your app and doing this battery, sometimes this will be in this court sandbox won't perform well, but it does very much rarer. This thing is happening for the very first time for me. Yeah. So, yeah guys, congratulations on completing this one. I've shown you how to create the staying import and all of that stuff. So that's it for this video, guys. And see you in the next video or all that. So goodbye. 16. What is Import and Export?: Welcome back guys. Now in this video, we will speak about import and export keyword. This is JavaScript, a ES6, and a vision. So as you can see, we have used this import, import keyword and export keyword and lord over here. So whenever we wrote new file like heading Node.js, we wrote a function called functional component. We defined a function component, then we exported that. So now in this video we will speak about it a little bit more. So as you again see, this app.js first upgraded our news and quote sandbox by choosing the react template. So I've chosen that. And one more thing. I'm using this good sand box so that if there is any kind of adder or if there is something that you are not understanding, you can just call you again, just send me the link of this thing after forking it. But before that you have to make sure to sign in using our GitHub account. And soon after you have done that, this fork it off and send me the link. So if you are having any errors in your listing, quote sandbox all can do that. So I can just directly go ahead and explain you. Put some comment lines and explain it to you all whatever editor that you're not having. So never mind. So over here, we have this listing, a function called App, which returns something which has like lastName app. We have styles.css, we have this thing. And then we have app.js, and then we have index.js which will run down our application. So these things are unnecessary. You can remember that, but I'll just leave it in this way because it was there already. So and I will be using the local environment to make the projects because I'm just going to show everything from scratch and their eyes. There will be students who do not like to use codes sandbox because the thing that they do not understand stuff from here. So that is the reason by doing projects that DO, DO, DO DO list project that we'll be doing. I'll do that from scratch. So let's get started. So I was speaking about import and export, right? We have important export over here. So I have created a file called heading dot js. So I'm just gonna write, create a const called fav number, frame number, favorite number, and I'll put this thing as equal to 75. Suppose my favorite number was 75. So here I can export this favor number as default, and I can write favor number. Let's save. And let's go back to the app.js. And in order to require that in order to gain access to this constant or variable after import beheading Node.js import. So I can name anything that I want. I can name. Maybe if I wanted to name us fav favorite for AM. This file, this file is headings.html. Yup. Sounds you all again, Z, I'm this favorite. Now, I can just go ahead and put something like maybe, and it's one DAG, which has an ending. And I can put the ETC1 DAG as this is my, Of course, if you all remember as this thing is constant, we are supposed to write curly braces and then we are, we are supposed to ID thing that we have imported. So here you might be like knows have you have important disfavor number over here and you are using this favorite or worrier. How is that even making sense? This does not make sense. So, so you all can, so the thing, the thing that, this thing is that you can name anything that we want over here. So if I want to name it, let's suppose for some reason if I wanted to name is have favorite, I can name it self-evident. Favorite. So this will give the same output. So now whatever we have different model, we have this one and we had, we have a function as well. Let's suppose let's call this function as mile deep lie fifth. And let's call this function. And suppose there is one more function below it. And let's call this divide. And let's create a return favor number divided by 2.52. And let's return favorite number multiplied by two, or something like this. So this, these are the two functions, but as you all you can see, I'm just only exporting one thing. Now disfavor number, that isn't these two functions. And in order to do that, we are supposed to write one more export statement. So that's export. And in the curly braces, we are supposed to write the things that we want to multiply fav comma, divide faith. And then we are supposed to write a semicolon. So that's pretty much it. And if you all remember, we are supposed to write import function, but you might be wondering, we already have this import functions have how, how is it even possible? How's that even possible to get these two functions? So for that we have to write a comma and then a curly braces. And inside that we are supposed to write the same name that we have buzzed over here, same function name. So if some function name that I've heard was multiply faith and I can put a comma. I can put a comma over here before that, I'm just gonna decrease the size of this thing. And let's open this thing and on your window. So as your organs, your worrier as supposed to put the comma and I'm supposed to pass in the value that we have for this function makes sure that you have to give the same name. You have to give the same name for the function that you are passing. So the second one was divide. So that's pretty much it. And in order to get the return values for these functions, so suppose I have an H1 tag, and yeah, we have this H1 tag and I can write something like multiplications, multiplications of my favorite number is we are supposed to write to. Currently, we are supposed to write curly braces and we are supposed to pass in the value, the name of the function. So that is m multiply faith. So as we all know, this is a function, right? So we are supposed to write parentheses as well. So as you all can see, when I said that we have, this is my favorite number. And multiplication of my favorite number is 750. That is 75 multiplied by two is one. And similarly now have a very easy challenge for you. I won't be able to create an H3 or heads to. That's really up to you. And write a sentence like the division of my wave number is this one. So as you know, I'm returning the value from this function. So just go ahead and do that now. So I suppose you have done that. That's pretty much easy. Create an H2 tag. Yup. And the division. My favorite number as divide, fav. And this one sounds you all kinds of division of my favorite number is 37.5. Now we have divided by two, so that's the reason that's 37.5. So this was kind of in the revision that I was doing over here. If you're a level, forget about ES6 import and export keyword, then this was the thing. This was a lesson that will help you do. Brush up your skills. So that's it for this video, guys. And in the next video and just thinking about React props. So see you all there. 17. What are Props in React?: Hello and welcome back. In this video, we will go and, and learn about React probes. So let's create a new sandbox for react. When you press that, it will create a new React app for us. And you can also use, can just press file and export, export those zip and unzip as I've shown in the previous videos. And all you have to do is to press NPM install. So that way you can work with this React app locally. But never mind, we are going to work with this line. So over here, let's speak about ok, but before that, I'll just create what I list, open this up in a new window. Size all cancer, this thing as a basic template. Hello, court sandbox. And over here, I will create an HTML element. And I will create an HTML element called it's one, ok. Of course, I feel damn known there was already an element. Let's call this thing as Silverman. And over here, I'll list. Just below that, I'll create an IMG tag with SRC of Salamanca hands for don't send mankind is at, as you all can see earlier, I got as image on Wikipedia. And I'll copy image address. And over here, I will just pass it as this thing over here. And let's put a paragraph instead of P a heads two. Yup. And instead of writing this thing over here, I'll write something like Solomon Khan at gmail.com. So as you all can see, this thing we have created and it's when we have Verdun image tag and we offered an email of this guy. So let us create a one more, one more contact card. And let's copy this up and let's paste it over your bad away. It will create one more contact card over here, as you all can see. And values. And if you are using react, it should not repeat anything only after those two key. Let's create a function. And let's call this function as card. Okay, capital C. And over here, whatever lower list, press return. And let's press return and controls B over here. And instead of using this, unless you remove this thing. And instead of using that, I'll just call this function that we have created above. So it is like so as you all can see, must be robbed in and closing tag. So I'm sure I've missed something. Okay. Unless to wrap everything inside, a div will not have any errors. So as you all can see, I've uploaded the image over here and I've created this card. So now what I can do is I can just remove it off and create one more card in this way. So that way, I can create so many cards that I want. Ya. Similarly. So as you can see, we have this summarize underlined either we are supposed to write over here. Let's call this L minus sign. Okay? So now as you all can see over here, passing all of these values is pretty much tiring to be honest over here. So instead of that, I can use something called props. So over here, as you all can see, this HTML element has className of app. So let's create an input over here. I'll show you what I'm trying to tell you. And let's create an input. And let's create an input. Yup. And over here, as you all can see, this thing has a name. We can pass in a name that we want. Let suppose, let us suppose, let's call this as sum, and we can give a type for it. So these are predefined attributes of this element. So the type would be like text. So let's save it off and let us see what is the output. Come on. So as you all can see, input is avoid element. Ok, we are supposed to remove off that thing that we had. I don't know from where it came. So as you can see, we have this thing over here. So over here I can also put something on value. And I can also put something like this is a value. So that way, instead of giving the user derived something over here, I can literally pass the value. So as you all again see, we are passing some values. So similarly, while using React components, we can also pass values by using props. So let us suppose we have this IDS1. Let's call this H1 as something like let's pass something like name. Worrier. I will pass the name as something like cell mankind over here. And I'll pass in. Okay, let's pass in sand mankind. So how did we receive it? So if you all remember, while using normal functions as we do in JavaScript or in many other languages, there are supposed to pass in the parameter. So whatever we are calling with the, suppose this is a function. If you have given a function call, you're supposed to pass the parameter. So here we are supposed to write something. So let us, let us write here probes and over here to access the name attribute, all we have to do is to just write props, dot name. That wouldn't work. I guess. As you all can see this thing as prompts dot name. So if you are left, followed everything. Until now, then you would have known supposed to pass in this thing over here. So as soon as I do that, as you all can see, the value that we have passed from this card was from here. I mean, like it came over here. So similarly we have, ok. Similarly over here for the other two cards, we haven't passed any value, name, attribute. So we are, suppose F v1 to pass something like shadow Hanover here. Let us just an actor. I can also pass that. And over here with the same amount of code, we are creating two elements. So it's like we are minimising everything. So that way we would not have to create anything more. So by using just one component, we are passing some values and we are receiving some values by using this prompts. So profits do not, do not get confused at us pretty much. It's so easy. It is just like a parameter. So we are accessing the parameter and we are just riding the props, the name that we are passing. So similarly, we can also pass the SRC off it as well. So as you all can see over here, let's write SRC. Army will Android like source. And over here I will pass in the URL. Let's cut this thing from here and, and pass this URL. Now, as I've removed the URL from there, the image will be gone from here. And all we, after doing the SRC, We have to receive the source. And to receive the source, we have to tap into the props. Over here. We are supposed to remove this thing and you have to pass in this one and we are supposed to ride probs. What was that source? So that way I will get the emails for this guy over here. So now as a small challenge, I want you all to go ahead and underscore two. And sorts are, is go to Google and search for any famous person, let's call shadow Han. And let's go to Wikipedia. And over here, I'll just pick as image that's copied CMEs address. And I just want you all to give us source. And for the second card that we have over a year, I won't be able to put a source and Pass in the link for this guy. So I suppose you have done that. All we have to do is to write source. Make sure to name the same thing because here we are writing the same thing. Add prompts dot source. So make sure to name it the same, in the same way. Here we are just supposed to pass in this one. And boom, over here. And similarly, we can pass in the email as well. So let's pass in an email. Or careless close this one because this is getting confusing. And I don't I really don't want you all to get confused. And over here, I will write email and I will put them while you off settlement at gmail.com. Now over here in the props, all I have to do is just access the prompts. P ROP is female. So easy. As you all can see, you are supposed to write, wrap this up inside to curly basis so that we will have the values. So as you can see, we did not have the value for some varchar Ohio. So we can do that by just writing. Email is equals to shock at ease email Lord gum. So that I will get an, get the value of this guy in this way. So, so I guess after doing all of this things, you might be like, this is all symbol. I can create anything that I want for only once. And now as a challenge, I won't be able to create a new file called guard dot js. And then I won't be able to put this function over the air and import the function from here to there. So I suppose you all can do that. So go ahead and do that now. So the process is pretty much sin symbol. All you have to do is to create a new file. Let's call this file last card dot gs. And inside app.js, we will copy this whole thing. Let's save this thing and go to guard dot js. And, and let's import the react. React. That's like a basic thing that you were supposed to do. And we here we are to export by default, export the car as default. So that way we will be able to export it. And here we have to import the value of that important card from guard Node.js. So as we do that. We'll be able to create a card here as well. Yeah, let's suppose I want to create a card for Lionel Messi. Lan on lessee. I heard that is leaving Barcelona. For some reason. Let's just go ahead and go to Wikipedia and find about messy. And let's copy this image. Copy image address. And let's pass in the value over here. Okay? This is going on for this thing over here. And press Enter and here I will pass in the email. You might see at Marissa.com. I really hope that issued and leaf Marcello now. So you can see we have Lionel Messi, we have shadow Han and we also minus sign. So that way we can use this prompts. All we are, all, all we are doing is we are passing this element. So it is just like parsing HTML. Html. So this is like an attribute over here, we are passing an attribute to the card. And by using the probes over here, this is like a parameter. By using the progress, we are just passing any values. So that way we can reuse the, reuse the component by giving multiple values. So that way if you go to Facebook.com, facebook.com, let's go to facebook.com. And I really hope my account I was signed in. So as you can see over here, we have contacts. So this is like the same thing over here. By using the thing that we are using the cards over here, we are just passing the person who wrote the code for Facebook. It just created this thing. I'll component for a contact card. As you all can see, Charlie and over year old clonic l, we have omar cadre and all this stuff. So it just created one card and he just passed all the values by like name, value. And this thing is automatically showing, they're showing over there. And that thing is also having this online function, this blip over here. So that way he can just do that, but we will see that later on. So this is something that I wanted to show you all. And these are the competence over here. And we have this thing. Yup. So yeah guys, that's it for this video. And in the next video, we'll speak about mappings, I guess. So. See you all there. 18. Using Props to Pass Data: Now in this video, I have a very big challenge for oil. So again, just go to this link over here, code sandbox dot IO, big challenge phone or area. You can just go to the link and work with me. So the thing is that we already made does midnight in the previous video. This one. He made this contact card, which had four dose and email IDs or celebrities. Now, when you see the files inside our SRC folder, I have created a full lyrical contacts ab.js. So inside that folder I have created a JSON object, which has all of the values. The values that we have o and here, as you all can see, oh area. So I'm just copy pasting that thing. You can do it otherwise, Aldus provider provided a sources, provide this file in the link of course resources so that you can just copy and paste it. And otherwise, you can just go to this website. So now, as you can see, this thing is getting very much populated laugh to go over here. And so that is like so tiring for me to do that. So instead of that, what I will do is that I'll just go to contacts or G is. So ok, the challenge 40 always that I won't be able to go do use this JSON and put the values inside the app.js instead of directly writing, use the contacts object, and this is gone. Tags, Sylvain Kahn is at 0 right here 0, that name supposed to item.name over a year. And you're supposed to wrap it up inside this thing. Contacts is not defined, but you have to define that. So go ahead and do that and it's damaged now. So I suppose you abandon processes pretty much symbol or laughter DOE is to just go back over here. And as you can see, v up to export it was going to write it again, export the fault current tax. So if you have seen the lesson about export and import, you can export anything that we want and overreact in the app.js, I will go ahead and import guarding eggs from current bags, gs. So that way, I will be able to import the contacts that I've created over here. Now, what I can do is just simply remove this one. And right. Corn dogs. And so as this JavaScript, we are suppose to wrap everything inside. The curly braces, highlighted everything and press Shift and left curly braces. So that will fix that when. So I look for the rest of them has been coined bags, one source and non-human. 0. Cotton bags 0. So let us see, as you all get two distinct is working. So similarly, I do the same thing. What are the other ones as well? There is one. So if you do use this thing, you know. So that is like a wizard on how to use java script. F knot. As you can see, this thing is pretty much symbol. All we are doing just importing, importing the contact NodeJS and using the JSON object contacts nodes 00 is the sun and accessing the name sorts and all, and all the stuff. And over here, we are supposed to write our tags, one source forward to press the Shift button packs for one email. So what's next? So as you can see, I've completed that and let's take your idea and this thing is working. So this was a very easy challenge. In my opinion, by dub. You might have to think about it and use this one. So now as you can see, even, even not be miced. So I think that this code can be managed. I mean, we can minimize the chord. So for that, see about that in the next video. So that is a topic called Mapping the components. So see you there. 19. Mapping Data to Components: This video, we'll learn how to map data to compare against the code that we are writing for the car. This is a pre-defined thing, right? We defined it in the Carnot years. So we are importing it over here, right? So as you can see, this is a God and we are repeating the code going again, 012. So to avoid this old reputation of D card of the contact 0 load name of sliding all of these things. You can use a loop. So as discipline is like 0123 and you can add data to it. Nine McLean, now we are basically writing this suppose and this shining control C. And just one more component with ID for. This is just one component and I wrote this thing in the application, doesn't directly adding one more card over here. So as soon as we add Admin and when more object, this should show a north garden beside, below, below it. So that we can do everything dynamically that way we can work with we can add data to the object, JSON to the, we can add data to it dynamically by using fonts or something like that. So I hope that makes sense. Now, let's go to app.js. And over here, what I will do is that, okay, let's comment out everything that we have here to cover and Adalja for depressed and fans slash control and change. And now what I will do is that I will just write the contact object and I'll write dot map. So map is an inbuilt function of this land. So over here, this is a function called map. You will again find out distinct in that documentation. So if you're denote like this will basically loop through all of the objects from this contact NodeJS contact object. So it will loop through the object and we can pass him or gal just pass in a function inside it. So shall create a function, I'll call insert card, something like that. And over here, I will create the card. And by doing this one, if you have done that right now, of course we are supposed to write the name, writing name as equals to. So we are supposed to pass in some kind of value over here. So what value are we supposed to bus? So fast, you have to write the same function on there. And over here, this map function allows us to pass a single object is to suppose I am writing contact over here. So in the very first loop, or this will do is that this map function will. We'll start with the very first object, right? And this contact only this first object can be accessed through this panoramic contact. So it is like callback function. So do not get confused. This map function called single object for every loop or the 0 at eliminate will return this one. So all the values of this land will be inside this contact. And then in the second load, all the values of the sun will be inside entitlement. So it is like a for loop, I guess, for loop or a while loop, whatever it is. So we will use that contact naught. Similarly for the other things I would like to contact, not yesterday. And for the other one is equals to. Murder. And love are supposed to wrap this up inside. And as you can see, we have this one. So let us go to this contacts are js. And what I will do is that and just copied and pasted away in. Let's see. Let's reload this and further on, I guess happens. Because, OK, we are supposed to write comma Odeon. And boom. You can create as many as guards dynamically and statically. The thing that we were doing in the previous video. So now, putting ideas for, as you are, again, let's go back to the city Lord discipline. Let's see the concern. As you can see. We have a warning. I'm having a hard time to do that. Yeah. So as you can see, we are having a one child in a list should have a unique key problem. So as you can see, I've created something called key ID over here. So as, as we are looping this fun and we like as we are looping in the sky to the scarred by using this contact are supposed to write a unique value. So we will go ahead and write it as this little series that we're supposed to see Diana. Hey, come on and I'll come back. Now as each child in a list should have key problem. So we are supposed to generate a key problem. Here i is equal to contact ID. Id. So that the way that I hadn't really gone flesh. And in the next video I'll speak about all of this. As you'll see in the sandbox we have, in the sandbox we have this reactive to speak our data in the next video and how we can now not that Chrome extension from this one only after the first, I'll show you how the dishonored react extension. So that way, if you are working locally, then you will. You can basically use the thing that we are using, DNN. Yeah, let's go to the reactive extension. All we have to do is to press at Chrome extension. That did not go extension or Yup. And let's go back. And let's press this. And again, this pages using the development will love the arc gap. Can open the developer tools. I'm components. Developer Tools. Open the developer tools has so much right? I'm showing the other one over here. Could still establishing genetic connection. Okay, that's just failed to load. Content for extension are good. There is some kind of matter. We are still having their data. Okay, never mind, I will speak about that in the next video. I will just fix this up and we'll speak about that because I've just installed it. I guess we have to do some kind of feeling. So lets remove this 11 line of code. One line of code we are basically creating us. We can create in finite number of cards. So that's it for this video, guys, see on in the next video. Then goodbye and take care. 20. Final Thoughts: Hello and welcome. So congratulations for coming this fine, congratulations for completing this project. So I'm sure that you have enjoyed this class and made all of the things that is over here. And as soon as you complete this class, make the project of a year, you can just basically put the project inside the discussion or even you can share the project over a year. You can share it with me. And algebra. Debut on how did you complete this project? Firstly, I'd like to congratulate you for coming this fire and completing this project. This was a very big project. And by completing this project, we have learned so many things, so many things over yet. And in the next class, I'm sure that and we're making a bigger more topics on React JS. So that's it for this class. Congratulations. So see you in the next class. The land goodbye and daycare.