Learn Future Technologies of Web Development in 2021 Beginner To Advance - Be A Full Stack Developer | Waqas Ahmad | Skillshare

Learn Future Technologies of Web Development in 2021 Beginner To Advance - Be A Full Stack Developer

Waqas Ahmad, Software Engineer

Learn Future Technologies of Web Development in 2021 Beginner To Advance - Be A Full Stack Developer

Waqas Ahmad, Software Engineer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
33 Lessons (3h 20m)
    • 1. Course Introduction

      4:12
    • 2. Course Outline

      4:08
    • 3. Contact Me

      0:57
    • 4. ReactJS Basics Environment Setup

      2:37
    • 5. ReactJS Basics Project Setup

      3:35
    • 6. ReactJS Basics Part 1

      4:12
    • 7. ReactJS Basics Part 2

      3:58
    • 8. ReactJS Basics Part 3

      4:12
    • 9. ReactJS Basics Part 4

      4:04
    • 10. ReactJS Basics Part 5

      2:39
    • 11. Blog Site Evironment Setup And Installation Selection

      0:36
    • 12. Blog Site Environment Setup And Installation

      1:59
    • 13. Blog Site Server Side Project Setup

      4:33
    • 14. Blog Site Server Side Code With NodeJS MongoDB And ExpressJS Part 1

      3:58
    • 15. Blog Site Server Side Code With NodeJS MongoDB And ExpressJS Part 2

      8:27
    • 16. Blog Site Server Side Code With NodeJS MongoDB And ExpressJS Part 3

      11:06
    • 17. Blog Site Server Side Code With NodeJS MongoDB And ExpressJS Part 4

      2:22
    • 18. Blog Site Server Side Code With NodeJS MongoDB And ExpressJS Part 5

      10:02
    • 19. Blog Site Frontend With ReactJS Part 1

      4:56
    • 20. Blog Site Frontend With ReactJS Part 2

      10:28
    • 21. Blog Site Frontend With ReactJS Part 3

      6:04
    • 22. Blog Site Frontend With ReactJS Part 4

      9:20
    • 23. Blog Site Frontend With ReactJS Part 5

      6:03
    • 24. Blog Site Frontend With ReactJS Part 6

      6:56
    • 25. Blog Site Frontend With ReactJS Part 7

      7:08
    • 26. Blog Site Redux Integration Part 1

      18:20
    • 27. Blog Site Redux Integration Part 2

      7:13
    • 28. Blog Site Redux Integration Part 3

      8:14
    • 29. Blog Site Redux Integration Part 4

      14:35
    • 30. Blog Site Redux Integration Part 5

      9:45
    • 31. Blog Site Redux Integration Part 6

      10:44
    • 32. Blog Site Application Final Review

      2:06
    • 33. Free Paid Resources - Bonus

      0:45
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

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

320

Students

--

Projects

About This Class

Why you Should take this course?

In this course i have focused and introduced all the future and new technologies of web development in 2019 and this is the right time and track/course for you to learn these technologies(NodeJS, Redux, ReactJS, MongoDB and ExpressJS). There is also a lot more job opportunities regarding these technologies(NodeJS, Redux, ReactJS, MongoDB and ExpressJS) and it will be very beneficial for you.If you wanna get the job or wanna start you own business or career as a freelancer then it is the right platform for you. And i will help you out to set up you freelancing career or profile on world no #1 freelancing website "Upwork".

And you will learn these technologies (NodeJS, Redux, ReactJS, MongoDB and ExpressJS) by making complete Blog Site Application.So it is a complete Bootcamp

Free Paid Resources - Bonus

In this course i also provide you the best paid books and resources regarding NodeJS, Redux, ReactJS, MongoDB and ExpressJS for free and these resources will help you out to enhance and improve your programming and development skills.   

Course Goals:

  • Make you Full Stack developer (Using MERN Stack)

  • Give a path from right beginner to advanced (from zero to hero)

  • Introduced most demanded technologies of web development in 2019

  • This course will encourage you towards freelancing, getting job and a sole proprietorship.

What we will cover in this course?

  1. ReactJS Basics

    • Export Statement

    • Import Statement

    • Props

    • States

    • Flow between components

    • JSX

    • Functional components

    • Non functional components

    • Event Handling

    • Lists And keys

  2. Backend Section

    • Nodejs

    • ExpressJS

    • MongoDB

    • How to define Routes

    • MongoDB connection

    • MongoDB cloud deployment

    • Packages Installation

    • Command line

    • Handling Promises

    • Complete RESTful API

    • POSTMAN to check Routes

  3. Frontend Section

    • ReactJS

    • Routes

    • Links

    • ReactJS extension

    • Components styling

    • Semantic UI

    • Responsive components

  4. Redux Framework

    • Redux Boilerplate

    • Redux thunk

    • Redux store

    • Reducers

    • Actions

    • Redux extension

Don't waste your time don't think too much because this the right choice for you take this course now.

Meet Your Teacher

Teacher Profile Image

Waqas Ahmad

Software Engineer

Teacher

Hello, I'm Waqas.

Experienced Developer
Hello I have been doing development in the field of web development and computer vision for the last 3+ years and now it is the time to share my skills and experience.That's why i joined skillshare to help others by teaching  them new technologies and tools.So you are on right track and take my courses now.Thanks

See full profile

Class Ratings

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

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

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

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. Course Introduction: whole Salam aleikum. So Strayger llama steak Guys, I hope you are doing well. So I am a back again with my new goals learned future technologies off Web development in 2090. So what are these technologies? These technologies are no jazz. Reege s experts? Yes. And Mahdi? So you been learned these technologies by making a complete block side application. So my goal in the scores to make you a full stack developer from right zero to hero. Let's start and explored these technologies. So you will be a complete monster, Gripper, after these girls. So the first is what is nor jazz nor Jesse's, the back and technology. It is very fast, easy on easy to quote G posting community friendly and there is important thing is more job opportunities. So nor GS is also very popular in real time. The applications like gen applications. So the next thing is react. Yes, React jest is is it too long? Is it to Jews like bread and fast reusable complaints and grid developer tools And it is is your dry to be gsx. So it is also s e o friendly and there is a lot more job opportunities and increasing community based. So in the max, we will explore express, Jess. It is faster, smarter. Flexibility is simple in coding community friendly as well. So there is mongo db That is the database we will use in this course. It is No SQL. Easy to configure. Easy to learn, Easy to God on easy to apply on the clout as well. So, friends, we will manage our state off application through reader forever. So it is. Remember, we will use in this goals to manage our state off application. So in the next two style are components. We will use bootstrap alternative that is meant a joy. It will be a big plus for you to enhance your skills. It is a very best technology to style your complaints, and it is also a responsive. So why should take this ghost? You should take the schools because after this course, there is more job opportunities and I am teaching this scores with high demanding technologies off 2019. So I will give you a complete part, right from zero to hero as a full stack. Do Oliver and I will broad you the best paid free resources about. Nor Jess. Mom, Birdie me, Regis and experts es so friends. This will be an exciting goes for you and for me as well. So these are the pair free resources for you. Okay. No, it is time. Do demo our Brock side? Yep. Let's open that Dozer. So this is our application. You can see that if we reload it there is great, broader. We can add our blawg. And we can also read the block with the riba gin. You can see that it is very beautiful and pretty look and feel of semantic joy. You can added the block and bleed the block as well. Look at the rd page is our Larry Page. You can go the home easily and you can see that How fast are these technologies? And it will also teach you so you can use react developer extensions and Redox developer extensions as well. So, friends, this is the right course for you to Don't this your time? Take this girl's no Till then. Good bye. Thanks. 2. Course Outline: Hello, friends. In this video, I will give you the complete goes outline for complete block side application. So let's start. So first, what are the course goes? The first goal is make your full stack developer Youling monster back So your stack will be Amman. There is mobility. Be express jets, Ria, Jess and no Jess. I will give you the complete apart from right, bigger to advance. There's man zero to him. So I will introduce most demanded technologies off 2090 and the scores will encourage you to words freelancing as well. So, friends. But we will cover in this course. We will give our first react just basics. Then we will move towards back and section, then front and section. And after that, rid X framework. So let's explore er, just basics in reactions basics, we will just export straight man imports straight man or props State flew between components, function complaints, nonfunctional components and even handling list and gays. And important thing is JSX. So in the next section, we will give her nor Jess Express Yes, mom on TV in our back and section. So juvie learning how to define routes mongo db connection how you can deploy your mom already be on the cloud. How do I install packages or to use my line? How to handle promises and you will complete your rest ful epi A after this section. And to test your s full FBI, you will use postman to check all your olds Are the working perfectly or not. So after this section, we will move to front end section in front and you will use react chairs to implement your block side application. So you will learn about roads in react, Jess links. Or do you react? Jess Extension ho to style your components, Viz men tick joy and these companies will be a fully responsive. And you can see that in your block side, a big Asian DeMann. So let's start sufferance upon the browser and you can see that our side is up and running successfully. Let's make the side to a mobile view. No, Look at that, guys. This is a complete responsive website. You can see the mobile view of the website. It is completely response e r block side application A just a guarding to move balls crane as well. Look at that. You see that? How cemented you A is good. There is our single user out as well. Look at the virgin and look and feel of cemented joy. You can go back, be very fastly and swiftly Look at that Sue France After front and section we will move towards Redox Framework integration. So in this section you Mylan how toe define Redox boilerplate ho to use and it X tung ho to use Riddick store reducers actions and it predicts extension in your browser. So after this section, ju will be a complete monster do upper So congratulations, guys. So friends don't vis your time. This is the right track and right course for you Sign up for this girl's No till then Good bye. Thanks. 3. Contact Me: Hello, Friends in the schools How you can contact me If there is any question Regarding course. I will be there to have your So you can email me on my Gmail account and message me on my Facebook page. This is my Gmail account. You can email me on my Gmail. That is W A to double a double seven and jimmy dot com. Oh, you can message me on my Facebook page. This is my Facebook page link. So, friends, if there is an aggression and jury regarding this Gore's or how you can set up your online freelancing business, please let me know. I will be there to help you out. So don't hesitate. Please let me know. I will be there until then. Goodbye. Thanks. 4. ReactJS Basics Environment Setup: Hello guys. In this video we will set up our environment First open your brother and die nor Js the gender and the force linger beer click on the Norges This is the set of you have the dollar playing down Lord like this I have already donor did so I can salute in second step you have don't Lord the i d their record or write Web Strong Web strong is my best i d a gender The false ling appear Click on just don't Lord button Here click on the dollar burden It takes some time and automatically donated. So, guys, I already don't word it, so I cancel it. Okay, let's show you our dollars Said these are the sort of that I have downloaded. So let's install one women Boston Short Norges So I already installed on my computer Second install web strong on your computer In the third step, you have to install suggest globally First, open your command terminal CMD bid administrative permissions like this, right? Cmd right click. Done as a mystery Yes, right and bm install Dash G Destiny means you have to install globally create Did you react and her gender if you are immaculate, then right. Suitable when? The start of the late space and it ended So I just right npm install DSG create director. So you tender This is how you have to install your reacted globally. So the alternative is done until then. Goodbye. Thanks. 5. ReactJS Basics Project Setup: Hello, friends. I hope you have installed all the settings in this video we will court or first chord Hello , Word with react. Jazz selects open dieting We have opened Iady. Let's create new product. You can also select another location so I have select the location. My deck stop and let's select reactor because we are making objective. So let's change the name all the work. So no click on the create button. Great. This will take some time and will create are up on the next row with the name off. Hello world. So it is installing a packages gold and get the big dome and react squares. We will discuss later What are these packages? So finally we have installed each and everything. So let's explore our broader structure in this part of structure the first polar card nor models. So what is normal ideals? Even stall any new packages using NPM, it will go into the Nord Models folder like these are then stole packages. And you have seen the package door Jason folder. In this file you have see the installed packages list like yakked, yak, Tom and Jack Skip these all the install dependencies And there is also get ignore file what it does get Ignore fel It means work files you need to ignore at the time off upload on the guitar So there is another fold called source So we mainly use the source folder where the men have lives This is our main court Let's open have dart Yes this is all me in there so no we run our first hello world program just right and pm is start and he dinner This will start our automatically. Have you seen that? It started out at automatically. Boom! This is our first trap running on the solar. So this is our product structure We will discuss later the court This isn't strong dessert We just write NPM start and our have been start on our brother like this on the server local host work name three people Who? I think that's it. See you in the next video. Thanks 6. ReactJS Basics Part 1: Welcome back, friends. In this video we will code let's start from scratch and great all the files. No right click when a source for their new and make a new file off Jealous script. Name that oil index. And he turned around. OK, but we have created a indexed RGs file. So let's start according first import react. What is thus Syntex to import something from your install dependencies from Package or Jason Fire. So we have installed these packages Solar. It's import the act and react right Imports treatment on board you get from th no import react Don't from Did he act? Don't somebody got No. Let's write a function, Const Constantly Gifford, There's function name Hello in dysfunction. Let's they're done. Is Jamil heading each one? That's right. The hell award here. So no, we have to run this gored to run This scored right yet don't dart render function react dome dot The gender So what element we want to show the element name should be. Hello word. Hello. Word in the Siqing where we want to show this element The container. So the continued would be our Dave Davies, located in public folder here this is the day. Very sure or element. So what is already other deal Already? Name is ruled. So let's slag decided he document dog get element by Ari and already is rude. So my calling and no, let's open the brother just his putrid flesh. Okay, so you have seen or hollow word for step that we are created shown on the screen. So let's review what we have did. Still no. First, we imported the react and react don't packages from north models. Next, we have clear to the function which is returning the each one element in the third step the React dome dark render function that takes two arguments. The first argument which elements need to be rendered and the second argument were to render in dome. This is the cord we have done. I hope you can understand. If there is any question and problem, please email me or message me on my fears with Paige. Thanks 7. ReactJS Basics Part 2: Hello, friends. In this video we will modify our hello world. And so let's start So friends, what we have done before. Let's review the court. So first we import the statements and then we can get a hello where function and then call a render function from reactor. So what is return? Heading? This is a GSX GSX means javascript example, which is used in the react. To write this Jamil like syntax, insert the JavaScript. It is just a pre processing the GSX. We right? Let it converts into the JavaScript with the help of Babel. So let's modify and make it another compliments. So here is the question is what is cos components are the reusable pieces off compose herbal with other components. So let's make another JavaScript file with minimal like before import reject. So there are two types of components. Function components and class B, its components. So functional components. We will discuss later. Select first making class companies plus companies starts with the keyboard applause and then the name off the close companies. There's given the name. Yep, extremes. Experience means inheritance extended from the components like this. So let's import component from the act So we have make class component with the name off and extend with the components so component in this class, there is a render function Let's maker under function and there will be a return where we write our GSX scored gsx just writing html So let's make a live here and hurting. Finally, we have making class company alerts command this function instead off Hello Word night app here So let's see what is the result upon the brother? So the Aries app is not defined The egg gsx in indexed Rogers So what is the problem? Problem is, we haven't import alert nursing for their board from dart forward slash It means that the current directory current directories the source So write the name of the you want to import 7/4 So let's see the result. Okay, what is the error export before imported as it was not phoning that. So you have important the file but not exported from the main component called abject. So let's export the files export default ec so no, let's check the result. Boom! Just we have done the modification off our hello word up. So I hope you have understand Children. Thanks 8. ReactJS Basics Part 3: Hello, friends. In this video, we will aired some more features. Toe are Hello word. Let's start first, I have created new Joe Strip for gold question Dodgers in questioned RGs I have declared a any off object and Jack's just export this fire. And no, I really import this while in the men have import question from dot farmers class, It's me, the current directory Know what they want to display? I want that I will display here the full area. The question will display and then the answer, as in ist So let's start first. We have toe looked through the all objects to show in a list. So let's startle. If you write a JavaScript in GSX, you should create a curly records in cuddly records, right and loop to display the objects less Looked through the question Kerry met Question dart mad in the traitor by director. There's work the same as Lou. In the first argument, I will pass a arrow function at a function that takes forced argument. E is the element in Dari, and the second argument is I that is the index off the area. So let's you're drunk and right edge Essex. Let's make a another list. No. First, what are the objects contain in objects? There are two keys. The first is question, and the second is answer. No access thes case. No, don't forget toe right godly wreckers because it is a JavaScript. So you question dot question. And in the second list, we will show dancer question dot So So let's see what happened in the browser. Oh, I think we have mistakes somewhere else. Let's check. We have toe display the element. Nor the question. The name off area yourself. No, this is wrong. We have right here the element. The element is he to replace with a That's check again bone. So finally we get our list on the brother. So this is the result that we want to get. So let's review what we have done. So first we have great job script file called Question, and in it we declare an area named question and there declared some objects and then export that fight. After that, we imported file in average s, and then it dread through the question area and show their element in, or I hope you get the idea till then. Good bye. Thanks. 9. ReactJS Basics Part 4: friends in this video we will refectory or court. So what we write and this return a list? It is not a good practice, so we have to make a separate component. So let's make a separate component New job, script, file and call this component a list. You tender and last import the yet this component, we will make a functional component. So let's make a functional component. There's name dis component A list. Okay, call it her done function to write some GSX. So what this argument takes, it takes properties. Sue properties is used to pass the data toe their Children. So I would use a sharp homo. Property is crops. So let's make a list here. No, we have to show this data there. So hole, we can access this in the list. White toe less. Import this while here. No import list from dot barber slash List from the current Derek. No. Let's cut this an air list here. No other argument and passed the better. The first debtor argument is question question you dot question and the second argument would be the answer. He thought so. We have bossed properties like this. No, we will utilize their like drops dot question and drops dog. So we will export this list as well explored. Let's see, what is the result? No, there is a problem that's like the problem in the court. So what I miss? Let's check the list. Sorry, guys. I forget to Carly basis. There's why this problem occur. Let's add cuddly braces, Bob's Dutch questions and same bra. Obstruct Answer. No, please don't forget to add. Carnivorous is because you are writing javascript. Not a simple is Gemma text. So let's see. What is the result? Fine. We have got desert. Have you seen all? We use? The props Drops are used toe past better to their Children. So we have make another component card function component. These are the functional components. They're Jews. I hope you get the idea. Until then. Good bye. Thanks. 10. ReactJS Basics Part 5: friends in this video we will learn how to act. He went handler in our react Just so let's start already, Handler. So let's add handle here and name the handler. Function as a handler less basti. Just rinse treatment on soul dot log Just bring to help. No, our past at this handler to the list lives. Name 100. You can name anything did you want? You can access the 100 function by this. This has a reference off this class last name is Distort handler. No, let's improvement dysfunction toe a list? No. In a list implement on click pension. Right arrow function here the daughter and argument and hold to access the handlers to crops. So drops dog handling in this way you can exist 100 So no, let's check what happens if you click on a list There will be Ah! Hello, Brent on the console. Let's see. So so how you can see the console. There's right. Click there. Inspect. Inspect your court. So here is a concern in console You just quickly on a question list. Then you will see the hello in the console. So let's Blake. Hello. Okay. Have you seen that they're squeak again. Hello. The second time. Third time for 56. Have you seen that whole hander works in the act and how to use and let injects. So I hope you get die again until then. Goodbye. Thanks. 11. Blog Site Evironment Setup And Installation Selection: Hello. Friends to friends in the scores I have used to times off environments said it is up to you . Which one you wanna juice? The 1st 1 is Web Strom I d. And the 2nd 1 is V s code already. And it is totally up to you. Whitman, you wanna juice? So if you install nor jazz and react just globally so you don't need to install after debt ? So this is the thing that you sure? No, thanks. 12. Blog Site Environment Setup And Installation: Hello Makes in this video we will don't Lord or Software's. So first, let's open Google chrome and type no chairs. So this is the first link a beer don't loaded. So click this button And don't, Lord nor Js. And a second softer that we required in this scores is the escort were record our app. So let's open the step and time V s good. This is the link. Open it and download from here you can select your desired operating system. This is the second software that we required. The third is good where we can install our Marlon libraries like express the act etcetera. So that stripe Good. So this is the first link Piers you condone Lord each other your operating system from here . So the third software is postman here You condone your postman. You can select whatever your operating system Meg or windows you condone learn from here. I already have donated all the Softwares big nor jazz, postmen and via school. So please install them one by one. So if you feel any difficulty regarding strolling Shin off software, please let me know. So this is it for this video to you in the next week. Thanks 13. Blog Site Server Side Project Setup: Hello guys. In this video we will set up our product. I hope you haven't strong all the required stop there for us making you folder here. And Neymar Project Blow Flight Right Click on it and open with were scored. Come on. So it is opened. Let's start some Softwares in via school. Click on extensions. So we have already installed some software's like bracket bear polarizer. It will color your old so just type life's over here. This will appear e open. So I have honored in started you can install it. These are the list of packages that I have installed posted record pair colonizer and he has seven React products Life server, nor just menus. Rip your react native just ignored this package fighting. So please in store all these packages except by So I hope you haven't sold. Let's open our blogger Fuller. So no, you have to integrate your kid terminal here to integrate git Bash in your terminal nurse, open file references, settings and search for criminal. Okay, no scored on. So this is the import where you base your get location. Open start and search for kids. This is a good bash appears, right, Click Properties. This is a link. Copy the link and based here after besting your ling, your terminal will showed up. Git bash. So I hope you have understand No, to set up our project first, right? Npm in it. This will create your server side packages. Would it was your description. Entry point. It is entry point. So you can name your server. That's settler. Darger? Yes. I skipped all other names like Beckett. Name, version, description. You can name it, but I skip it is okay. Entry point is subvert our Jess Escobar. Escape it. You'd repository Skip, keep or you can write your name here. Why? Sends is okay. Yes, it is. OK, here you go. It will create a packet. Georgeson fire! All your depend entities will be installed here. Alerts Install all the dependencies when they were right. And pm I I means in stroll NPM install express body parts. Sir, Express is our server. Body parcel is to read their their front or input and the next package is normal. And concurrently I will explain this package later. And PM Express body Parson Norman Concurrently, the one more packages models. This will map Your debt out to your database is so let's hit. Enter So it will take some time. Install all your packages your banker Georgeson, for so all the back desert installed successfully. You can see here dependence is under dependencies. Body parcel concurrently express moguls. And in our Arab these are the cities you can find here All the little things that we have been distorted stalling deputies are done. Let's make Js file all its server. Don't! Yes. This ill with gold or server. I hope you have Understand all of you then. Good bye. See you in the next review. Thanks. 14. Blog Site Server Side Code With NodeJS MongoDB And ExpressJS Part 1: Hello, friends. After installing all the packages, let's start according to settle for silver, all the in store packages in the package or just fell. That is here. Let's order So work express. In this way, you can require your extracts package from the big injured Justin Flood. Let's make and EP from express around. This ever on a specific board must make a board variable process. Don't envy dartboard. If no board is available, it will run by divided on by Parliament, so there isn't a method to run this server on the board. That is, capitalism force argument is to pass it board. The second is an arrow function at a function. We'll display successful message if it is running on a board 5000. So let's bring to this message using tactics that is a new method off friending strings on the console. Using directives loves so running on port number to use this board right dollar curly breakers and tried to deport this will display the port number. Were the surgeries in less check run this over their fright. Nor so we're dark ages, so sort of a running on port number five elements. Let's check on a Broza local horse 5000 This display Nothing, because we are not defining any wrote yet. Let's define a wrote app dot Get This is a deport wrote so you can write a slash And the second is it an arrow function at a function requires a four star demanded that aggress Guess is requesting something and the second is response After requesting you have tow give response That is a response Sand response A. Hello? No, let's run it default Don't we have to again which or several And run it again. Let's open the brother No, re lord is hella word guys. You have successfully created your hell order Congratulations. So every time we do changes in our server just we quit this server and run it again. So get rid of this problem You have toe open a package or Giessen while an air These scripts in your scripts video So the first grape is start right north side Ward Rogers the second it's server normal server Georges No, you have to quit this Iran It like this npm Ron, There's why I don't Lord the normal dependencies run the server automatically when changes are made. So let's check. If the Chinese are made like this, look out their Selves, restores and connected again on the boat. There is no need to wait the server and run it again. Let's check we loaded. Our result is saying okay, I hope friends you have understand in this video what I have thought so See you in the next video in the next. Really, we will wear our old big move. Thanks. 15. Blog Site Server Side Code With NodeJS MongoDB And ExpressJS Part 2: holograms. We have said that or server successfully. So let's make a roach separately so separately, makes the road you have toe make a new folder card rose in your folder. You have to make another folder corn, FBI, and there is a fine that is, users Dorji years. You have to define arose beer. You can add user, Petula user diligence a specific user. Get specific users and change some specific user data. So first you have to import express scones. No, let's make a router Variable Express, Dodge wrote in expressed. There is a total question you can excesses by this less rotor dot Get defined a default around here. Slash again the same procedure. Let's copy from that's So what? Because I already lady. So they're scoping. Okay, so now you have to export this because we will use this roads in our server. Mensur less export more. Do you own DOT explores rodent. Let's you'll this in our men. Absolutely users. Very quiet. We have required dot slash. It means we are in the current directory. Silver File Directory of Sarah File is brought side, so we have to access a user's fight that is in rows slash the ph slash juices in this way you can access uses. Why? So we have to use our users while in our server Dargis at door Jews. So we have to define year are rose. That is a B A slash users and then users Okay, so less commented as Rose in this day, you can use uses less sick. What is the error? Okay, we have used and we don't need to you because we have already defined Eroded We have to replace this with the rotor No less check What is the result and running Okay were successful The second proposal Again there is a problem. The problem is firstly we define slash No, We have defined a road in a server that is slash a piece Last users know we will get this data like these That is slash ap a slash uses no tell you Go get it. Hello world. So you have implemented your boss wrote that it's hello er and also integrate your route with your several charges. So the next thing we will use A databases the databases mongo db alerts make a folder for moment Every database that is moral in this model, we really point our user schema. That is user George ears. No, we will store our moment, every database keys in our conflict while so let's make a conflict while and in this pile he's George's. So first this set of or more will be dead today is forced open a brother and court. I m lip. So if you're not walking the signer falls and then logging you already make it won't. There's logging my successfully logging less create in new Jetta bees. Waas Yes, we want freedom is continue like your region and continue. And let's call this database Bauxite, continue Summit are This will take some time and we'll create your service. This is in progress. Okay, this is complete. We have completed blocked site. So this is a cape that we build using our on fake kids start? Yes, but let's create a jet habitues and who's disturbed ofhis? Usually you can name anything, usually 1 to 3. The password used one country. We have wreckage or do individuals successfully. So copy the link basted in our case judges. So course we have to explore the link and using sort order. Jess, for smart You'll don't export this Mickey Mambo You are I He s telling here. So what is already terrible User, that is user name The passport that we made is user 123 Let's make a database connected in support Our jails make Davey variable. We have toe goto the conflict slash keys and access that more would you know We have toe connect database us. We have toe import models Mongrels are Jews Object relation modeling Mom No Also import party Bossom restore data database We need a body possum. Get the data and storing the data base. We need a body Bosses require body brush so force connect him already give it meant Devi connection Monasteries method Mongols Draught connect What you're going to pass the TV is true promise because it is requesting the third party to connect. That's why it is trying a promise who connect to the third party It will take some time. So the line that he used defended up from the silver or the third party Whatever it is, it will throw a promise Injera skip. So first let's is all this promise with the job Dan statement in this If the data ways is connected successfully. We have just paint on the console that's obvious. Elected successfully if there is an ever gadget to be the Arab function and so look, there is an error. It will troll. Don't have you seen, uh, soul somebody's connectors successfully that a bit disconnected but destroying a warning. Let's air this line. Do our TV. A second argument? No, it's been restart our server service connected databases, Nick. So friends we have successfully connected or database that is on the cloud. In the next video, we will make a user schema and define users road that is adding their dark Patching your dad delete and update data until then. Goodbye. Thanks. 16. Blog Site Server Side Code With NodeJS MongoDB And ExpressJS Part 3: Hello, Fran. So we have successfully created our database connection. Solar's implement you the scheme open a user GS While it was important moles gone. Longo's require Momo's So let's make a schemer. That is more moos dart scheme No commended Create user judge up that is Konst new user or you can call it users Scheme on that is new scheme up like this first women store using information like so I do this will be required and this is a string. Will that drive off it? The stream Okay. The next week builds Joel in order. Best is the image would be user image. It could be anything required is acquired same as the drive image string The next thing the description off the title and the image This is also required. So I will be a stream So you're the schema is created So we have toe create a user variable being created immortal off or scheme Mongrels dodge mortal. It will get immoral name users and passed it ages the skin. This will create girl model. No, you have tow export this file because we will use this well in our users, George years probably create user roads to model Don't exports user. So we have Great. It's just this funny you the schema. So let's make you the roars so forced we have toe. They weren't this foil user. We're from door dot slash It means we are in the FBI. Older No daughter again? No, we're in the main fold in the mortals. Slash used. This is the way off requiring the user more so forced. We have toe right, a curing to fetch data from the data. This we're getting something so we have toe right a curie user dot find it points all the record off the user and returned a result as an area. So this land throws a promise because it is searching that up from the databases. So it will take some time and this function having a line that is trying a promise. So this is a sink function because the function containing align their destroying a promise , this land trying a promise. So this will be a weight keyboard. So there we will be right. A keyword like this, this land will it on a user, then find it. So we have to check if it is empty because it will return on area user dot flange. If you didn't go to zero, it means there is enough to send their arrest. Our Jason and the error is so make it in God only break it. Cherries user, No usar exist like this. This dean's okay. If there is lent exist, then simply. We're done. User in adjacent for practice. So we have toe right this score in a dry cash block. Let's try controlling me. No, If there is an entering Dr Log, there is a catch Statement e simply sending our theories in error. We can write it in a back. Takes like this error is jeweler Hey like this. So this is the big off writing your function in javascript 2017. The latest technology. So this is how you can fit A from the date of is you also destroyed a postman. Well, we check our regrets less open a bushman again. There's make a new request lead. The previous one also over is running on local host by Poland. And the road is slash ap slash users. And this is a get request there sent this request. Okay, No use because we haven't added. Use it to our fetching all user route. Successfully running. Let's create another long that is add data and user data into our database rotor Dark post Get the usedto felt better and post he used to add data There are will be the same This is another request with the get giver And this is it another request with post you the road will be this thing. So there is an arrow function. Okay, less for get all the introduce from or request toward party waas attribute is DiGel and the second is image. The 3rd 1 is description. We will get this on the request start before because we will fill the form and get it to the request Your party? No. Get the data from the phone and make a news user. This is where you can create your new user object And Bossio Digit was won his title image and the 3rd 1 is description No, Its function also saves the data into the database also through a promised it is also is facing function so right in a dry gatch block cost user. So this is the function user door. See, this been saved your data into the dead ofhis. So you have to create a const user. It put new issues. This will create your new user and you have toe. It's like this. There will be a tie too. Image and description. First you get the data from the better body and create a new user with the usar object that is here. It will have a title image description. No, we have toe see? Unusual new Your door said this would throw away from you so of your keyboard. Good to be here. See if the you look and just Sen did Just informed if there is another gadget, just copy there and visit here. So we have successfully created on a new user around. So let's see. What is the error? Asked to user, I think. Okay, now we are good to go. You haven't used the request George party in our main. So we have import but never use. We have to make in middle there for 40 buses less after use body Balcer, Daut Jewel and record it extended falls This line will secure or body boards or data. The 2nd 1 in abd ought use three Borssen Georgeson like this. So somebody's running in that second and second cat request seeing their diploma with the risk election and to practice over Waas Connect That's German eared and champion runs over . Okay, that what is nothing. Database successfully connected. So that's for us. Checked out. Get request. It is no use it. 17. Blog Site Server Side Code With NodeJS MongoDB And ExpressJS Part 4: Hello, friends. In this video, we will start implementing or other roads. So in the previous video, we have added a party Parcel Miller were so our databases and servers running so less test these dolls in the Bushmen. So opposed. We have toe. Send a get request. The send it. Okay. This with John. An error. No use a leftist. Which means it is working. So no nurse sent a boss request. Forced attributed DiGel. The 2nd 1 is image, and the 3rd 1 is description dollars Mega title draw menus for image And that's why did block no son. Dis regressed. Finally, we have succeeded our request. So the user i d Is this on? The title is floor images, more image and the description Is this so? No, Let's get the regressed. Oh, there you go. We're getting our data bag in the form off area. We have found that up before using Okay, These other tours, The 1st 1 is getting your diploma databases and inside that into the bread A bills. Let's check that out of Is the cloud so reloaded in the little me is There you go. We have a collection with the users there have one document upon it. There you You're is a record with the title image and description. So we have succeeded in making our two most value the roads. I guess so. In the next, really we will create or other lords like delete someone debtor and add it. Debtor, they learn. Goodbye, Thanks. 18. Blog Site Server Side Code With NodeJS MongoDB And ExpressJS Part 5: Hello friends. In this video we will create or wrote that is a getting a letter from a user with the specific idea. Let's make it water dot get and the party slash Poland I did. The colon is means the road will be slash ap a slash users slash And here is the Ehrlich will be anything like this like this. In this way, we can get our user that of it, the specific gaiety and second argument is an arrow function. Let's make a dry get block. They're a user. The post is request and the second is a response this mentioned also you think because it is doing a promise user dot find bi I ity This is a curie that we're using and that is regressed dot bear arms dot od We will fetch our user there dot With the i d. There will be in parameters in here. Solar is completed and then you don I use it like this if the reason ever catch it and built this length here. So all goes well. So let's check this road, so get yes, we can get it. So let's make another user your floor. No it could be anything. Yes, we have connected successfully. Let's get all the user list. This is the user list. No, this is the idea. Let get the user with the specific I. D these other items off this user diary. Okay. Converting circular structure to Jason. Let's check what is there? Okay, we have found a user Binda. Heidi, let's check if they user job link zero, then the same procedure. Is this just best kiss in the You know data doesn't take this. No, you there exist the this idee. And if it exists, you just You're done using less. Check it again. Oh, sorry. A for Gort writing a bit Que Because this line Jolan promise. So let's justice again. Yes, we have phone results off. Single user Let hard something else. Yes, there is an error because this already doesn't exist. Okay, so finally we have created our single use around less implement it delete user wrote. So just copy this and just right instead, off Get right, delete The user will be deleted with the specific i d. Because we won't delete all the Houston so on its user of eight user dot find by i d this bill dot Find my idea and removed. Okay, we will find already like this. Remove this. Okay, You're drunk. A successful message here. Loves it, John. Success message. Use it. De rigid success. Women, if there is an error, draws an exception. So let's just this user Okay? First, we have to get all the user. Lastly, this rule with the title floor flower, you get single user successfully. There's delete this user. Okay? Jewell duties successfully. There's you told a user if it did exist or no, no. The U N delegates successfully tested or databases the Lord. There is a single user with the title try. So we have implemented or three lords successfully no four rows. The 1st 1 is vigil the letter and the 2nd 1 is our data. The third is get a user with the specifically and the forties Do leave the specific Use it with the specific idea. No, the last road is and it all user data so less implemented to delete. We juice Notre title it to get better with Jews. Get and toe ad we use Post added that we will use put and the roads will be specifically we will I didn't have in the specific rd grist a response The arrow function. Okay, so let's you dry Catch block This is also using function Who wears Konst User? The very key word. Don't forget, right User dart find by i d and update like this No, we have to find by already underscore i d that this is the key like this No Poland request jar their arms the authority access to this idea. And the second argument is grass start body because we want toe update or border that is in the Yeah okay, just send a successful message like this Just go be use Ah opportunity did successfully You did it Annettor Just copy the catch Young Okay, we have implemented or boat request lords or on it this air and other user. Okay, We have added successfully There's get all the user okay Lives added this use we have toe give a specific I d and sent a put request. No input with best we have toe Abed the fine art party like this We will Oh, good. And the 2nd 1 is image. One is description. Yes, light up. Did it right here, up to two Joe who were sent user abraded successfully. So let's get this user. It is a 1,000,000,000 or not. They're stick. Okay. Successfully updated. So we have a duty user data. Okay. I hope you have understand all the logic behind fetching. They're targeting, deleting and getting single user data. I'm setting up solar or to use mobile TV databases on the glowed. And this is it for our server side. According I hope you are the stand still then good bye. Thanks. 19. Blog Site Frontend With ReactJS Part 1: Hello Frames In this video we will set up our client side. So in the previous videos we have completed successfully our solar side. So they're start and set up our climb cider. So first, please make sure you are in the block side folder First we will install or react at globally installed reactive globally. Right? And pm Install desk G dash G stands for you in stall reactive globally. No, right. You yet react? Yeah. No. If you have been no user, this is the command group. Install reactive globally. If you are a mad user then right on the start of the line Suitable like this. So I have already installed. If you didn't please install it. No offer installing the active globally you have to navigate a react. A folder just right created. He egged app and the name you want to create. So I named it as client and no, it enter. It will create your the act up with the name of older client. So please make sure you are in the block side directory so it enter. It will create your reactive automatically. This will take some time. No, it is creating a reactive. Look at that. This is the blind folder that we call here. So finally, guys, we have completed or blindside installation looking that the happy hacking message. So we're good to go now. Celebs open a client folder. This is all the stuff that we have in starred. There's a source, Fuller. All the JavaScript wells are here. This is the public polar bear or index Dart is German file. Get it? This is the stuff. The Blindsight. So let's go to the blindside. Derek Crete Just die CD goto blind. See you D Stands for Jane directory. No, we are in the climb side. No! Run the climb sites Ever, right? NTN start. It's want build. Run your client side server So it will take some time and run your so guard these and open after Jesse's It is a Abdur GIs while is the main component off our Arab were all the component will be displayed. No large skirt. This gold. All right. Hello. Word was right. Each one here. Right? J Hello. What? No, just waiting for the elements over. So guys finally whosoever it started. So let's open chrome. And there you go. This is our server. So it is running on the board Three Toland, This is the result. Hello. Work. Let's explore some polar structure. So this is the is general page. This deal is important in the index. Your Js file and rendered in tow EP Look at the document or get element by route. So, in HTML and exhortation gamer file diaries do't No, it is render in the index your jails while and also it rendered a f Well, this is our men app That's that. It better grow here. Let's drive something over some very easily started. Yes, it is trying a warming because logo is defined but never used. Okay, Just got this and open the broader Look at that. This is the result. You'd see that hope waas is react. Yes. So this is it for this video. We have successfully creator blindside set up toe. See you in the next video. Thanks 20. Blog Site Frontend With ReactJS Part 2: all our friends in this video we will design our block side. So the library which we used in this course to design our blocks I tab is some Indyk. You it it is same like bootstrap. So in my bigger scores make you do bad with the egg, Jess. For absolute big nurse, I have used it. Bootstrap. So I have decided to use semantic. You wait in the scores. So let's explore what is semantic cueing it is the same, like bootstrap to design user interface. Celeste's search semantic you a Syrian. The danger. So this is the link were bundling. So, friends, this is the Syrians off semantic you a Let's go alone and grab or bizarre Sudi in. You can check the other different students like button cars. Job done manual from so what we required. Okay, we required Semitic door ceases solar's If you want to grab this one, it is okay, so I grab many ified version off semantic door. CS is Syrian. Their scope it is Oh, well, not via scored and no open index stories. Jimmy, Why So let's bless this sling here Link. This is whole willing or Syrian. Okay, let's check our browser or reactor is loading. Let's see what is the result now? Look at that. It is changed a little bit. So we have added our semantic You a CSS Syrian. So let's install some extra packages. So I have already installed. It's some extensions. It is reactive. L petals and Redox. Definitely. So let's install these tools. Open the new job and good webs. Web stroll. No search for the react Chrome extensions. So this is react developer tools you can air like this. Why have already I did so you can add it. So the next is Rips De Abdul. This is the Redick step tools. So I already in strolled. You can click on it installment These other two extensions you have to add in your reactor . You can also check these extensions, right? Click and inspect. These are the two tensions nobly can react. This will show your app elements. So I have two elements. This is H one and this is a paragraph. Let's see And this is a deal. Look at that in your Abdullahi Ettus. This is a deal and these other two components the forces each one and the second is paragraph you can see clearly. Enjoy your closer. This is a deal. Each one and paragraph. So lives ad some packages or some dependence is in Beckett Georgeson File. Let's quit December. Please make sure you are in the climb directory. No install some packages and b m install. React redox because we use in this air bread apps toe manage all states RINOs really looks tongue and react voter don't. There is another dependency that is excuse which he used to hit our server side roads. Now he tend to Israel install and take some time. So, friends, our dependence is installed successfully. You can see in your Beckett Georgeson while exiles the predicts reduction clicks tongue. And no one thing you have to see is Then we run our client side at we have to goto the client directory and right NPM start. That is one thing. If you go to those your main directory that is block site. You have to start your express server. You have right and bm run death. So get rid of this problem. You have to start both the servers on the same time. Dude is go to your package. Dordt juice and file that is in your but blood site. Also the blind directly. Okay, go to your package or Justin file. There is. I have installed concurrently. That's why I have insured concurrently. Because to run the board the server concurrently. So let's add some scripts on a dust group ski. Okay. The four scrip is a writer. Declined. Install Sweet Will install your NBN right and bm install Dash, dash three figs. Okay. Right. Comma, These two lines will be the same. No. Define declined script like this. No, right. A coma there. Dr Declined. Scrape it is and b m install their stash. Three peaks. So it is the client. Install your music Blanked. Just a client. Okay. No use that. Concurrently, dependency. Let's ride this G I, Joe. Okay. No. Right. Gone currently Next lash and B m Ron. So what? Backslash double course space. Then again, black Fresh trouble Goard's and B m Bron blind, then backslash two double course. Okay. So ballistic that we have solved the problem or not? Could this Okay, you are in the blood site. No. Run mpm Braun jet. Let's see, were successful to run our boards over blind And so you danger It is running. Okay, there isn't enter Let's sick being run. So are well, game I miss Billie Is npm Stark Because when we run a client's that what we write NPM start less. Run it again and I am running depth. Okay, there we seem less Jake A whole We're forgot. Toe right. Double Gore's somewhere else. Check the depth. Yes, it is. We have forgot. Right? Double goals, no less. Take it again and run and bmdo No MP and runs over and PM start or server running. Blame. Same set of it and our beckoned settlers. Okay, start the developments. A load that is same. Sever. Yes. Or Blanchard said where is running that have is disconnected. You mean we're good to go? So I think we have connected Are both the server? The main thing is our client side salaries. Any go on board five Parliament and are backend server running on 3000. So we have to aired a proxy. France Troy, the proxy go to your package or Jason file that is in the client folder. Open it. Just come here and write a proxy. Yes, DTP Golan's less slash local host, All and white told it. So this is our proxy. So we have set up or proxy and concurrently, successfully, Or somebody is running on the poor pipe organ databases connected and are plain states that where is also Lanie on the board. Local host, three talent. So I hope you have understand all the video, then. Good bye. Thanks. 21. Blog Site Frontend With ReactJS Part 3: Hello, friends. So we have set up our client site AB successfully. We have also integrated or Syrian. So if you want to see the semantic you ate dogs. You can also write semantic you a dogs. This is the first link. Open it. There you go. It is all the documentation off some interviewing. You can jack that there are so learn a lot from this. This is important. That's open it. And these are the buttons that we can use in your APP. Click open it And this is the source score to use buttons in our app. So let's implement or navigation. So for us to go to your source folder and creative folder here components in react Everything is a complaint. Solar's in a component for look, create or never jazz flight Open it. Okay, There are two types off cos there are functional components and non function companies. Functional components are used when when we used stairs and like cycle methods. So in their bar we don't need to use lifecycle matters or states. So we have to use functional, not functional. It is non functional component. So right, a non emotional component. Just I react. Absolutely. This will create your function component. Okay, lets effectively export default. What is the name off your complaint? It is never but no Yes, Jan to your neatness, Joe. Script cost never to make an arrow function. Okay, so this is the set up off or never bar. Let's share some classes. Let's change to nap in now Bar lives additive and named the class you I fixed in war dude. Manu. Okay, inside this Steve, make another day. Give it the class name you like on Jenner in this container you have to make your never items. So as create another Dave with the glass name I heard it item and that is block site. This is our harder item and no create doings. Greed lings in react There is another matter. Let's make a default in contracts that is home. Um that is new user or new post on new block. Let's see new law. No, we have created our nab our successfully so less important on men component No important import. Never throng dot Door means is a Koran directory to the components and never No, you'll diss component. That's get rid of this Never by like this. This is whole. You have to use your companies and your main component. Let's open the brother. Now. See the result? Okay. We have successfully created or block site. Never hurt. There is issue. So we have to make a link clearly with the glass name. All right, Um, the last name. Because these item off never let's check it again. Nor it is okay. Oh, yes, it is open to use and I can hear you can use that. Go to your cemented. You a dogs and such for icon. Okay, this is the icon upon it. You should be learning. Okay. These are the least of icons. You can choose whatever you want. Waas open their core. Hope you can use the scroll down. This is the method to use your icon so less and and I go on, I given the class name. Let's at a I can hear globe. Michael, Let's check in your browser. It re Lord hunkered. You have successfully created your globe icon, your blood site. So I hope you have understand how to make the components and use them into your ABT RGs fine. So till then Good bye. See you in the next radio. Thanks 22. Blog Site Frontend With ReactJS Part 4: a lot of friends in the previous video we have designed are never bore successfully. So let's check it again. So let's make this like, on a little bit bigger. That's their supporter here. Style in this folder. Make ISS child are seizes foil. Okay, less. Select this. I go on and make it bigger. I mean, last Dodge. I can't. There's a full size. Make it. It is Stewie. Okay? And the phone to it, It is normal. So no, no import sterner seizes. No, it isn't so. Schooler style slash CSS So we have added or style. RCs is while indoor. Never bar or somebody is running solar sick. What is the results? Okay, it is good to go now You have successfully make sure I can figure with a custom styles. Okay, let's make another compliment. That is users where you will show the list off. All users no force make if while uses Georges No, we will use this component as a functional component. So right, RCC, This will get a social component, no less. Explore this well, users, This is how you can create a functional component because it is a class based component. Okay, Let's designed this glass. Last name. Let's make a you white Mantex It is a man container in your main containers. Make another jail Los name huge headed. It will be your header or Harding less hard. This is a blood site or block site. Make it capital. No. After heading. No, make another deal with the class. Name you I dog Dad. Signature. Okay, In this class there is another day. You I d wide it by gems. So no, we have toe Define our items. You know they do. Last name is I gems in This items what items we have. First we have a deal with the class name image. There will be an image. Okay, let's add an image. Let's make a folder in source. Yes, I am G in this folder You can pay us an image. Just You have a random image from dextrose. So friends I have added this image into my I am defaulter lives import, but I m g from it is in I am d bowler and thirties or image. So let's source off. The image is image that's at the Olds property. That is. You'll image That's name is usual image. So we have added our image in the next day. If we have to define our content, that is also another deal with the glass name calm Jen and our content ease. Okay, less. May God do the glass. Name Maja and Mick is found. Lives are something like this. I'm lips at another. Do with the gloss, name, description and description. Let's and it there ago like this Often these dips we have toe add another do with the glass now extra No, in extra. We have to define and good haggling in incurred haggling. You have to define the lost lamb. You will interferes. What it boil it button? That's name it Ridge. Let's add. And I got here the glass now. Right, I got okay, I think. Let's check the result now. So there is no result why it happened because we haven't defined are component in a main component. Celebs import use us. So component slash users like this friend slips. He wanted the results upon the brawl over. Get that It is not very good. I think something is wrong. Let's check. Let's check that name of the losses. We might something wrong I think it is us named item. Let's check it again. Do you really solve the problem? Reloaded? Yes. We have solved the problem little bit. I think we haven't had a title here. Let's at a dreidel. The the Jack. The lost name is header. It is Detoyato. Left signal. Run it again! Yes, we have seen that. I don't Yes, we have to style it a little bit more because it is right behind the never there. Styled in your child are sees a spoil. Just make the margin from the top dog container dot mean margin Dog salmon. Yeah, it's mean 7 a.m. from the parents let sick. No, on it again. So yes, it is blocked site. We have got the margin, right? I think less sexual. Abdur Jet is well. Just remove this and no less sick. Your result. Well, that's reloaded. Okay, so you have done your stylish users list. So this is blocked site And this is our result, right? Top its title. This will be replaced with stage. And this is a description. And this is a raid, More butter. So I think there is a problem with read more, but antlers with the button. Go to your gold users. It is right, Joey. Gone with the floated bill. Sick button. Let's check. Reloaded. Okay, We have got our basic read. More burden, not the icon. Stick it again. And it is. Jebril is right, Jerome. Icon words one or so. But again, Yes, also the buddies. You know, Ernie, look at that, guys. Is the burden that we want Design? Nobody's done user list that will display the data is done. So let's see you in the next video Until then. Goodbye. Thanks. 23. Blog Site Frontend With ReactJS Part 5: So friends, we have successfully created our users this data. So let's shoot this icon. So there it was. Guard this. I go on and write it here and no checked the result. Yes, it is looking beautiful and reloaded. Yes, I think it is much better. Know the picture is right. The title is under. This is spam and this is the Perego. So let's design another component that will show the single user data. Single user George is Let's get class based company. Let's make a class bias company because it feels use lifecycle Matara later, Let refectory eight. Export of oil Single user. Okay, so let's design this user first. Big day with the class name You are a man Katrina segment There is another David That title on the glass name you a huge harder It will be the title on There is another day with the close man. You were a dog. Judge lives at another Jew. The glass name I jumped. This is show our item. So first we have to show an image The source off damage well defined, let up and alternative reality And the glass name for this is U Y center. It will be shown in our center of the paid center Image lives at another day. Very shoe. Our date, the class Name on gent and spend or date. Okay, So in the next, after showing content, we have to show the description. That's your another. Do with the gloss name. Just growing Shell did the virago. That's right. Something. Okay, After that we have toe make another do for buttons. These buttons will be the added button on the delete button on the class. Name is joy in. Worded are in Virgin and the name is had it. Let's make another button with the gloss name you I inward read better Nanda delete Where does that delete button? So I hope we have pretty much done or single Jews A. Lote we have exported as well unless air in our men at involved single user fall Compliments slash single user No use year single user What? This? I hope there is something going wrong. Okay, we haven't given a source. Let's give the fake source like this Corporate is infested here Give the source image So friends, we have completed the single user road. Let's see the result Okay. This is the result. I think we should hurt a nature here. Why? Cheering at a nature? Okay. U s entered. Let's make a wrong did laundered image. And you? Amen. Tex con dinner. It is a text con dinner. I have seen no result. Yes. All the result is more beautiful. This is our title. This is our image. This is Andy Burton, and this is our delete button lives. And it's your after title. And after date, it is our after try to to make it more beautiful on day after Did is like this that see? No. Okay. After it idle. This is a major. And this is the church and paragraph or description. So I think this is pretty much it. But this food you I hope you understand. Well, see you in the next video Till then. Good bye. Thanks. 24. Blog Site Frontend With ReactJS Part 6: Hello, friends. In this video, we will create a farm where we can add our shoes of data into the database. Alerts make form the denim off New York Dorji years. Gender. It will be Ah, last year's component colors explored these with the name off New Euler. Okay, so let's start making this with the name. Oh, you are a man. Next gone dinner segment. No, this is a man day, so make entitled live here. The glass name it is you. I huge, I don't Let's make a name. It is new Block the title of this. Let's make a form like this with the glass name you I in this fall, we have to make a class with the name off field. That's make a deep post the gloss name Well, and in this feared, we have to go at the label. The label is joy to, and we have to do and a title in our input field. And this simple fear will be the type or eggs in the place. Holder will be dry, Jill and the name off this food is dry gin. So this is the field force field we have to create another two years for image and the description. This will be image. The placeholder will be image the tight the name is inch. The type will be the same. So in our description feed we have toe add the title. It is description and instead of field, let's add a text area here. Jax area. Okay. With the name off description. So I think this is the text area. No lives at a button. The button will be the outside of the Dave. This wouldn't will be used to summer the farm laws. Name is you. I in the word dirt royal. Let big. I mean, it is a big Bertha with the name off. So many. So this is that Parton for our new user component. Let's add into our main component import new user from Copeland slash new Euler at it here . Do you look so friends? We have added on you. You the road like check on the browser. It is our user list. It will be our single user wrote. And these are the new uniform. Look at that. It is the new user form. It is the title. This would be the image and this is our description were right And this is the submit or something. But so we have already added a new user. Let's add addict, you the block. Let's make a new while here. No, it is in the component here and its user George years. Okay, this is our new user. Please go. Bit is all while and bastard here. And just Jeanne the name How did you love this will be And it block the title and all bills will be the same No important me and have like this no lips are into or Mina recusing. So this is John. Let's check the all putting the browser on the brozova This is our new more Let's reload. It is reloading digital It is our early block title image and description and loose really in this Pardon with the update me Waas judge only loaded. This is a broad site. This is our hotel. This is our new law And this is our Aryan blocked page. This is title Imagine description and this is updated and changes slips at a place holder here with, uh destruction and year order. Do it description. No, let's check again. We loaded the jewel ditches or placeholder. You can see that. And this is placeholder you as well. So I hope you have understand all the video. So in the next video, we've been link on make different routes in our client at the Union extremely. 25. Blog Site Frontend With ReactJS Part 7: Hello, friends. In this video, we will define our roads in all the active. So if I click on this button, we will go toe. This wrote on this page. Or if we click on this button, we have to go to the this bitch. If we click on edit button, we have to go. Harry Blob. It slips maker roads. So go to the Abdur Gs well, and import spec urges from the yet rotor don't slurs import packages, browser rotor a little bit as rotor and another package is around. Wrap this horrid live read road because no, we're using routes. Let's bleed these components. Okay, so we have to define are wrong. The first argument is part if we go toe the slash toward the Fort Road, we will display. The component is user. If we go, the parties slash new. When we make unusual Arone a new user into their database, the component will be the new user. Okay, and let's stick into the browser. Let's reloaded. So France, we are on the default road that is your slash out. So the page we are showing his blob side, So Lear's go to the road. New So this is the road Gente and we are on the new block as well, but there is a user's wrote as well. Sue alerts. Get rid of this problem. Please add exact keyword exact. When we on the slash park, we will sure the users company. If we owned up new user thought, we will show a component new users. Let's check this again. No, it is good to go. We are on Lee showing in New Blob If we click on this, this is not working. This is also not working. Let's go to the park wrote This is it. And the problem that occurs is all no. So there's make these items working properly. There's Goto, the Nair Bar and Import in Link. Wrong React rotor Dom. Let's remove this incur tag and replaced with the link and at another variable is, too. If we on the home page, we have to go to the default page. If we are on the new law but and we have to go two slash new no elastic. It is working or not, but with a browser and go to the new block. Okay, it is working. Yes, we around the new block Nurse Go bag. Yes, it is working Were on the user's component. This is working. We've been playing with that. This is whole. We can define our roads in react and we can go for one based weather page In the next, we will make another component as single una loht. So in this way we can move from one component to another from one place to another. Let's make another single user components wrote and that is will be the exact and the part will be the slash users slash colon idee and the component will be the users. Okay, Okay, go to the users. And this is the read button. Go to your up and import Nick here, born from the ect Dom place this in contract with the link on. This is the link so we have to goto slash users slash fallen idee already could be anything but we get this idea from the dead ofhis Then we go toe are single user road successfully. So let's check. Selects reloaded. Yes, there is. That's sick. Okay, we haven't close this road. Lear's check No. Okay. Lets like this better. We're going toe users all. And I d Yes, This is the area of user. Then we have to go to the users wrote No, it is not you. The roar status single user like this like this This is the reason if you go to home, click on the new war. This is the single user route. So we have successfully maker Homepage New Blawg We can click on the read more we can go to the single user wrote So I think I hope you have understand how to use links and roars in the act. So you in the next video we will make other dicks integration in or up Thanks. 26. Blog Site Redux Integration Part 1: friends. We have implemented our plan site and suicide according successfully. So in this video, we will implement Relax Framework. So the first question is, what is Relax Lyrics is used to manage the stage at application level. So this is the workflow off freedoms. So there is actions that perform actions and store usedto say the state and there is reducers that will return. People stayed with the action and the new state and the computers Will you be stayed and show on the problem? So let's good Obama He is good. And first we have to You'd or actions and reduces. So first make a fuller there with the name off actions and there will be another folder with the name off reduces. We will create our store GS foil like this. And in order producers, we have to make two files are rude reducers. The name of the file is indexed Rogers and another foil will be Are producers Beach reduces These introduces is a user reviews is dodges okay? No, it is time to create piles for actions. These are the user elections, the Js file and the dive off the actions we have to create it dives. Jess. What? So no. Let's implement our store first in the store, we have toe import our kids store from readers. Let's import It is foam rinos in boards create store and a middle. Where and the thing is compose. Compose is used to enable or red apps extension in the browser. So another thing we have to import year is hunk. This is the middle there for a drugs weird ex tunc and our route reducers import lord reducers Wrong reducer. Okay, so no. In our store we have to pass are rude reducers and initial state. So much force make initial state This will be an empty object And our middle were with the Dagestan No boss and lives door. Okay, this is a time to create a straw. The post argument is rude, Producer. The second is initial State celebs make it more beautiful like this. Okay. And the third argument will be a composed enable our extension income bold. We have to play our middle where with the spread of raider we don't wear okay in the next we have right accord for enabling or extension window dog worried Uggs depth tool extension The and operator Another window, you know, step jewels, extension like this. So this land, of course, will enable your extension. So we have grated our store successfully in the console there is no error. Everything is goes well. Let's export this store explored. Default strong. Okay, so in the index jazz, we have two great are rude realism. So let's import a combined reducer from the Redox. It will combine are all reducers and another in board is user reducer And this is the file off you the radio sir. And it is from user abuser So no export a function default mine reducers And the reviews er is user be the key value pair or meant users radius sir So in this way we have implement our introducer and our straw We have great leader store and our index real user There's mean rude producers So we will implement or user user shortly Waas import embroider which will wide a store to our men head Waas Import Why there from react Rude eggs? No, I got this whole thing in a rab These with the border like this No business. So in the border we have to pass a stroke? No, we have to import our store. It is from Corrine. Directory on. That is his store like this. Everything is fine. We have implemented or provided store and Rudra User. So let's implement or user reducer no First define air. Initial state object value will be our users. This will be a list of users because we're getting all the users in the form of lists. And the second is a single user object that we will get from ordered of is no explodes our actions, The post argument will be stage and this is the initial straight. And the second argument will be the actions that will be centered by our users. Actions. Okay, the actions. This has been an arrow function in the arrow function we have toe get this ridge with the action dog dive. It will define what type of action we're sending on the user action. So our host case in this ridge is fetch all users. It's all uses data from the database and this field return the current straight and a list off users with the actual dot payload. Okay, So we have to define our users actions and our types or dives will be explored. Gougne's its users. So this is our first try No fasted and change the name single user. And also add user, these are the men functions that we have implemented in our side Coat fetch users. It's mean Rachel the user data single user. You mean we have toe met a single user from the database and air users mean you should get into the databases and know the other are delete users and there is another. And that is a a potential use we have defined are different dives that we will get from the dead abyss. No, we have to define our types in or producer. So we have to import are types. The 1st 1 is that users from it will be in actions slash dives. So this is the type we have defined here. The force case is fetch all your data and before case will be john a issue instead like this. So we have firstly defined or initial stayed. Those will be in list so far is the user is a single object. Then we have export 34 function. There are two arguments state and actions. We have defined a guess it fed users filled return a period straight, and our user stature and default argument is done. The default state er's go action use election. Let's rename. I think there is a problem in the name use directions like this. So in use elections, we have to define our actions. So first we have to import exiles. Examples EG use will request, or so over that, and we'll get better from the database. Good. The fools explored the function with the name off that users. No, we have to fudge all the users. No, this is the method, right? If function. So we have to dispatch because we're getting better from the database like this. This is the format writer function. No eggs ills dot Get all the users in our server side. According this is the user roads. We are hitting a road with the eggs ooze. Is this because we're getting for all you? They're dead. So let's go to use directions And the request is god slash FBI slash users, and this will throw a promise. No, handle this promise with the then Street meant it's Miller done a response. No despaired. This response to our you, sir. Before us, what will be the type we are sending? The diet is hedge users, so it automatically important that I will be the fact users. And the Gaylord is rez Dodge de Gea its main or data. This is the structure off react and red X. Remember, dealers go through what we have done before. So first we have already great little components. We have to grade these Oh, action creators store and reducers. Plus, we have created our actions folder and two files types. We have to define what types of data we're getting from our databases and our user actions . The first sections we have defined here is French users. It means we are fetching all judicial record from our database and hit the road with the help off eggs ooze and no dispatch. This data with the type of fat users and dis regress will go to our users producer here. No, it will fetch all users in the list and it will see what is the action. The action is that users. So it will action dot payload that we have sent from the here. This is the the Lord Minorities are users data. And this will pause our user data to our users list that we have defined here. So I hope you have understand. I know it is very complicated, but this is the structure Ofri lows. Oh, another thing. We have also created a store here. This is the basic border braid. Don't worry about it. And another thing we also created Index Index we have combined. All are really users and buzz A simple value to our users. No. In the next video, we will integrate our user producers did Our users are jazz fire. I hope you have understand Didn't, then good bye. Thanks. 27. Blog Site Redux Integration Part 2: Hello, friends. Defense. We have successfully created already. Explainer played. No. It is time to show our database data into our block. So we have showing our dummy data into the block side. So let's start According first, go to you that are Js file and in board connect. Neglect will connect your component with the real drugs. There's import connect. This is form react Redox No, Also in board your user action that we have defined and function fetch uses data No. Get this function into your using Argie as well. That is feds users form it is in actions and that is use directions. So no, connect this users. So this is the Sunday In the post argument, we have to boss a function map instead. Do broth this function bill map. You're straight into your properties so you can easily get your properties. And the second argument is catch users. This is the function here. No implement map street to broad function. This is a narrow function like this. So in these function with Bill access, our users users like this. So access the users with that keyword stayed as state dot users door users work this line will do. We are getting Aneta with the giver stayed This will goto ST dot users. It means it is going toe your you would review said Here, stand your dart users often that this door users means it Access our users list that is here. No, it is time to extract data from Are you the key word? Goto Right behind. Render bones declared eight users nurse the structuring users No, you can access the state of it, the properties and also declare a variable user de job. Okay. No, If you have to go a function that is getting the better from the server or anything else, you have to all a lifecycle mattered card component did. Mom, this is the method. So you just component did mount. This is the method used toe Fresh data from the server or dead of is like that. So for us, call the function Here this start cross dark feds uses this will call your user function. No, we've insured, uh, in our you are in the morning item. Celebs grab the whole thing from here from my gym coated and based here no leads. I'd trade your user data for us, Jack. If the users list is empty if users job lang Well, 20 years mean there is no that up. Just return a user Dirda with the hurting. It's one learning. And if there exists a data because it is an airy so I trade the area using I'd redder using debt up is going to users dart mad. This will be a narrow function. No beds. Your hard core here know what is the first index question? Next is title. This will be in car. Liberace is because it is a job Script gored. So user dot titled on Duh. Second argument is image. So there will be a user door image. And the 3rd 1 is description. Use a dark description. No, we will set the date later. I think everything is fine. Now let's check the result. There is nothing to show because we haven't at our user data in our do. So there's air user data like this. So no last sec did we get our desired result. Open the roser. Oh, yes. We're got a result. Congratulations, guys. You can see there is a boss blawg in the database with the title cam and the image link and the description. We get it. Congratulations, guys, or it hurts to also working. You can see the data here. This is our user data on the index Zero. This is the irony. This is a title. This is image. This is that I doubt that we show in our block. So congratulations. You have implemented your first short getting all use, underdog. Because we have only one use undertow. So that's why we are showing one using their diner Broza. So in the next video, we will implement or read more button where we can show our specific users data. I hope you have understand? If there is any question Coury, please ask me till then. Good bye. Thanks. 28. Blog Site Redux Integration Part 3: Hello, friends. So we have successfully implemented or fat Youlus. So this is a time to fetch single user data, open a user action and define a single user function. Here. They're the same process. So let's copy dysfunction O P. Eight and Basit here just changed the name Fitch. Single user. No, we're fighting single user. The denied. So the argument will be the only. So we have to send a get request bird with the specific idea Lear's and a back kick here and send a get request a b i slash users slash Be the already No, the rest of the same. But the type will be different because we are fetching a single user. Let's open or types charges we have defying a single user. No, replace this with the time single juicer and also inboard from the types. No, we all learned bid are fed single users data so no leads. Use this function into our single user door. Just boil waas inboard you connect run reacted eggs and the thing is function that is bench single user lives all in defence. Single user not users All beings and juillet year No, it is vom exertions. You elections So there's connect or single user like this. The first argument will be our master too broad Sun Jin And the second order When will be the single user? No employment master to prevention? No, we will get our single user. So we have to get a user object. They're so also define a gays here and the guest is It is sing go user like this It is also automatically in bordered. I was single user we have to return new straight and it failed. The Gaylord will be sent to, uh, single user object not the whole list. That is action Dar billowed No, we'll all done with doing producers and user actions Goto single users and get the data here State dark users because we accessed a door Users from or index This is users and no Xs are single user like this legs the structure This user here also involved the method with the lifecycle matter component eight mt like this So the function is the start props dot That single user wrote No, This function takes in parameter and the parameter is a Heidi. What is the Eid? We will get this irony from right here that will show e. R. Such are the brother and we also see there is a error E child in an area or traders should be a unique ready. We will handle that letter Solar's force implement are single user function? No, All we can access the I did this start Ross Dart match Dark Peron's dot idea. This way we can access the idea because in the under Js we give the keyword already here. So in this way we can involve the function. Let's d structure the function in the render goes user and this is vom broke. No, you'll this do your dim In this day we will excess our user Daud dijo in the image with Bill Jews User jaw image on in the description, we will use user dark description like this. Oh, let's check. Did we get a result or not? Go to brother, click on a raid More Burton No, we haven't get a result goes. We haven't added a link to our burden. Read more burden. Go To use our Js file here we have to sirte the link like this in a back takes This will be users slash and it will be a party. And the party is user dart underscore already This is the irony off specific user also handle this error. Give a unique e to each item here G, that is user underscore already because I It is unique for every user unless sick the Gordo results are not upon the browser. Okay, there is error because we haven't had a dog. Okay. Here You their daughter under school. I d okay upon the rose and no, Yes, we got or all you little is data. No, let's hit this burden. And we also resolve our unique key error. Open the rain. More border whole Kurt. Congratulations, guys. We have successfully got our single user data. Look at that. We are God, our camp title image. There is description and there is a date. I know it is an immediate because we haven't added attribute in the database. We will add a little the door, nobody. Till then, enjoy these. So I hope you have understand we have successfully implemented Oh, are all Ulis data and a single user data. Congratulations. I hope you have understand then. Good bye. Thanks. 29. Blog Site Redux Integration Part 4: Hello, friends. So we have successfully created Are all you lose data and single user data. You can see the result we get. Are all Euler data on? No, You click Read more burden. We get a single. You're their job in the specific Heidi, look at that. OK? In this video, we will end that they're trying to order. Atom is here, so let's gored Open the V is good and go toe user actions we have to define it meant Third to wear that kind toward Adam is less scope. It is because I am very lazy. Okay? Yes. You tear and Jane the name and user. Okay, we are adding a user. Been the data. It is new user Did. Uh okay, what is the boat? We have a road Binda Post request because we are adding entered into our database exist are posed and the road is FBI slash users And pause your user data that is new user in this bay , we will heard or user data. So where did the time? The DYP is and user Let's go a bit and best you tear And also in bold like this. So in this way within gauge our end user function and also create our Adit user wrote. There's Copied and Pasted Jane the name and in June other and we added our user with the specific irony. The argument will be Heidi and in new user data. So what is the route? The roads will be like this in a back kick A. B I slash users slash with the specific ironing like this and no boss it a new user data after editing. So what is our type off data? The types will be updated user. That's garbage and paste it here. So in this way we will define our end user and a edit user. UPS celebs first implement our end user door GS file that is, new user no import, a connect from react critics and also a function that is, the function is, let's say, good Erin user This dude here and it is from actions, actions use directions. So let's implement, supposed to create a constructor year with the properties argument and also declare a straight off this component. So what are the components we have in this components? We have three our demands. The post is DiGel, the second is image, and the third on is a description like this. Okay, so Lillard's define a method here to submit our data and getting the data from the form in the form we have to implement in the third on change that is this dot on change like this or beings and based it on all, uh, religion input. Fears in image on title on in description. Okay. Also implement a method in a form because we have to submit the bomb. It is on summit this dart on summit. Define these methods on change. Also a on demand. You meant the short form is e don't get the data from the form and set our street there The stayed like this e George get so he Dordt Jaar get dark Name this baby. We will get our debt are from the farm and this will be a list. And also said the state Ijaw target dart value like this. So in this being we will get our data on the farm That is a targeted value. We will put indoor form and certain our names in the fields also implement on some mere method the argument event and also revenge their defaults of mission like this After preventing before submission, define a new user does Joe and then object? The post is dijo and the 2nd 1 is image. 3rd 1 is description No, boss. The data on the state this door stayed Dog dijo like this is dot image So it is from strayed on. The last one is dot Did our description like this in this big we will define our user data and no, After defining, we have toe us a data into our function This start cross dog and use it And Baas the whole object here, new and user and also next like this We're Nord getting data from our producers. So there is no need to ride master to props. The second argument is at user or function No, I think we have all done last Checked the browser? Yes, there is an error updated user is not define that's secular direction orbit and also on it here After adding here also add in your reducer you find a new guests that is and user and re John that going street and a billowed that is action door like this. Okay, so no has checked the closer. What is the result? Yes, we got everything. Fine. Open the new block. It is another North set property state off undefined. Okay, we have said our stairs undefined. Also, inspectors on lives at a value attribute in our fears. You're value. That is this dot ST dot title because it is a title field or copy it on based on other fears. It is image. It is description, no less jig. What is the result? Getting there is still same. Oh, I think we write a super cure here. Jake. Yes. We're good to go. No, we have really old are enter. No, earned a letter. Lives air something like floor. Okay, there isn't better in the line on change these doors substitute that is he dog target our name genius. Do an arrow function. Let's change dysfunction as well. You know, friends, we have implemented all the necessary gored. Let's go through. First we have is dead than implemented on gene. Meh third, then on some made. We have cream end before submissions. Please make sure you have spelled correctly default. After that, we create a new object and pause our function. That is in users Action here. Good, no less check that is owned. And we succeeded or not Open the browser. Go to reactor The legend learning everything is fine. We also God are single wrote Go to new block and add I am Do me data. There's at this u R l uh description is new image So Mitt did Okay, we have some material. Let's go to home and we added or not. Yes, we have added a new record successfully. That's reloaded. Guys, Did you go? There is a picture on and a new image. I think we haven't get a die idol Nurse Jack in the user's dark Js file. Oh yes, there In the mistake we write users. It is user north Users go to brother and Jake again with flooring the oh, there you go. We are successful in adding the data. So, guys, if we click on summit burden, we have to redirect to our home directory sellers. Implement is first go to your Riesco toward new users and after this method right, these dar drops jarred is joy and bars slash slash means it is their defied wrote We have mistake this door Rob's dark history and dark push Please write it like this. This will redirect toe the default wrote. Okay, open the roads are no Jack. What is that is a It is lording. Yes. No, higher. Something new Don't know. And the Emmy winning prescription. New image data. You know some meat? Yes. We have successfully redirect your home bitch. Let's reload it Regard Are there going to the dirt of is or not? Yes, this is Don t r u m a Jetta. We have successfully despair are dead up and to our users list. You can see in the database as well it reload it. Yes. Oh, there you go. You can see the record you're is a result on. We are accessing this data directly into our This is Blogger. Okay, We can also go to us Pacific User. Blawg like this, you're is an image with the Jijel with the specific already and description on the two functionality is still remain. We will implement these function everything in the next video. I hope you have understand. If there's any question, please ask me. Well, then. Good bye. Thanks. 30. Blog Site Redux Integration Part 5: France. So we have successfully implemented are three roads adding data fighting all usual data and single You'll debtor and all are working perfectly fine. So in this video, we will implement Sorry for that. So in this video we will implement our average functionality. If we click on this button, it will go toe added functionality. Okay, let's first go to our main component that is our AB and could be this road and just write and add it Here. This is the part for average budget and the company will be added User less Go to the browser less right at it. Yes. Did you go? We have got successfully Are added Law Complaint Sue Knoller's Goto Our riesco owed toe are single user file so no legs wrap This added burden in a link must import link It is from react Roeder dome like this. Right? A link year, please. This added into the link tag and write it do property. So with that too. All right, take early bases with the back takes. We have to write users slash our user i d that is user dot underscore idee And the last month is addict Goto added user gs file because we haven't implemented or juicer data here . First Import connect and is is form reactor index like this and also imported function that we implemented in your direction. You can see that. So it is a reddit user wrote so the best will be exist Dark. Would you please make sure that everything is fine? So go do that. And its user file inboard in any user there is from Exum's use directions. Okay, also, rapid interconnect like this. The first argument will be mad State do props and the 2nd 1 is and a jeweler function flares implement a function First argument is strange like this Access the user letter with the studio keyword dart user start user like this No. First make a constructor here the the argument drops the super giver Don't forget, right Rob's and define history. It's here. Did this same like or air user data functionality. The post is dijo on the 2nd 1 will be image and the 3rd 1 is description like this. So please extract your user debt up here. Okay? The structure our user here from this star drops in this way you can the structure your daughter and also assigned your data like this Titles user God image. Andi, your description like this In this way you can define your state and assign your user data so the rest of the functions are the same. So please go be from the new user like this. Come on, Opiate and based it in the end user. And also implement these matters in the, uh, on cement and also in the import fears this George on Jane or being he's got beyond all of ears and also Jane dysfunction toe added user. So ended user Bill, take two arguments. You can see there. The 1st 1 is idee, and the 2nd 1 is usually lurks at the second argument is Diz Jarred Rome Stud match Dark Firearms because we had getting better from the perimeters and the idea. This is the first argument and this is the second argument and we have to add it better on after reading, we goto our main default brought like this so also implement the value off the feels given the value attribute these dot state dot Jijel because it is a it is a title or be it and visit here it is an image on it is an description. Change the name ladies. It is giving an error. Stead is nor define. Let's check in line 65 Oh Saudi! This is a narrow function like this. So friend, everything is fine. Celestic the browser. You rely on it. Yes, we got the result. Go to read more Barton Okay? Please Daddy Burton, It is working or not. Oh, it is normally so let's take what is there? I think there is in link. So there's juggling? Yes, we haven't. And it slash here. That's why is there occur? So no. Open the brother again on Henry Lord. Yes, We have got the result. Everything is fine. Go to read more. Barton Yes, The totally scam. Beautiful campus Their description. Go to add it. Yes, we got our title. Beautiful Cam. Everything that is get from the database. No, there's a bell. It fried Updated like this. Sorry, my spelling streak, ladies. Okay. It's a bed. Oh, there is an error. The error is we haven't guard the function name. Right? Let's fix this error. Go to your addict user. Yes, this is the function. No, Go back those energies again. Go Dreaded Everything is fine, Can abdicate it and updated. Okay, let's see. Yes. There you go, guys. Congratulations. Who have successfully implemented your and it user out So congratulations. Have you seen that? How Foster's react? Yes. We have just changed the data and came back to our before road debt are is shown strictly. I hope you have understand What are you have thought? If there is any question and curie, please ask me then. Good bye. Thanks. 31. Blog Site Redux Integration Part 6: Hello friends. So we have successfully created our roads The last road is delete user So let's create in delete user go to Yes Gored Goto user actions There's implement here I hope it is and basted here Jean the name delete user So we have to delete the user Be diet e like this There is no need to pass it better And also chain the regressed exudes dart delete This is the delete regressed So what is the time? The Diab is de lead user like this so also in board Please make sure the spellings are correct Corbett is and import it from the dives. Okay? No in the payload we have whose end The irony that we are getting from the parameters in this way. So this is the delete user matter now Goto user reducer and define the case If the case is deleted User, please make sure in the dives it is deleted User, it is Dinu chooser We are right. No return. You turn the Garden Street and the user which is diligent. No map through each users from the user list like state dart users Dart filter? No. In this we will use a filter method. It will filter all the users if there is exist and i d. It will send back and delete this idea from the database. So, user, there's an arrow function. If user dart underscore i d. Logic is, if it is not equal toe extra indoors, be in order. If it is Nordic, pull them. Delete this Heidi from the databases. So we have create user reducer for our delete user and use directions for our religious know Let's go toe single user Dark GS file and implement the method here in the delete button. Make a function on plague on leg it Is this docked on glee and pass an argument I d re jaidi, This is a user ID. Please don't forget this is user dot underscore idee, which we are getting from our juicer like this. So Knoller's implement on bleak method here on Clegg make an arrow function and plus an argument. I d okay Lillard's call our function Desert prop start delete user and we haven't import. There's important did each user and Basted Year And the argument that digs is idee. No. After deleting the user, we have to go back to our divide road in this day. So also at this delete user to our connect Metter Landes. So I think everything is fine now. There is no problem, no error Friends We have implemented function here before jacking. Let's see the action. If there is any error these clear it. I think everything is fine. Jack Your added you there out? Yes, please write is slash before every note like this You're as well. No. Go to your user Dark jazz file be check there and also correct this road as well. No, I hope everything is fine. Yes, the message is good. It's affairs after correcting all the necessary changes My thing. All our good. Let's check the result opened the browser There's heard in New Daja like these Lear's added this link on description Off submitted? Yes, we have argued successfully. There's read. Yes, we can read. There's added to this Yes, we can added Okay, there's Oh, great weekend edited as well no less. Lead this in the late. There you go. You re Lord. Okay, It is delete now so we can delete order that successfully So friends. Congratulations! Enjoy the block site app you have successfully created all the roads in There is one thing that we haven't added a day dynamically slurs fixed this problem. Open the year's gored Go do morals using our Js file A friends, please add indeed property here date and the type will be dead Do bald did it will be Did dart No like this in this The day we can add are dead property into our databases No, there's access this day Property Waas go do your user door gears while is here Okay for reading a did on front side We have to install some packages to show our date bust We're deserve our After quitting you have to goto your choline directory like this No right NPM install react moment and went These are the libraries that we used or showing are dead into the client's side Huge enter and install these libraries So friends we have installed or all packages that we required butchering dead successfully Solar TSI Where did the packet is in store opened backing Georgeson filed And here are the practice movement and react moment. So no, There's Goto our unit RGs file on and import a package here inboard movement. Wrong. It is from react moment. So no leads you this all We can use this baggage to you. This we have to. Right? Gum. Bonin, This component will take a four made to show our dead like this. We will show this dead being dead and monk and your form it. So no plays, User Jord did that removed here, ladies. And also I hope it is and go to single user and best it year as well. Please don't forget to inboard like these. So this is whole we can Jews dead. I think we have in close. This is a moment. We're no good to go, Jake. There is an error. No, everything is fine. OK, go to your man directory That is Blob site and the command and PM Run, Jeff, it will run your server so our silver is running. Let's open the Roeser. There you go. Boom! This is our date. Every day mulled. And here. So, guys, congratulations. You have completed a full fled block site gun regulation. So I hope you have in a strain All the videos and lectures and then goodbye. Thanks 32. Blog Site Application Final Review: Hello, friends. So you have successfully created block side. Congratulations, guys. So fares in this video, we will add in order to our dockside. So in we re lord our block side ab, you can see there there is alluding message. So lets air in order instead off just lording message. So in the user dark GS file in your condition. There's ad in order here. No redone. You're JSX score here. Make her do you and give a loss name. But this deal you I that gave dimmer No, make another Dave. And this new even glass name you are a large next water. So in this way you can ADL order into your app. So less dust this Lord er no. Open the browser, Adri Lord, you can see that here is not murder. We have successfully. And our Lord er no. Let's give the name, toe all order like this. No one that over again. Look at that, guys. You have successfully at your Lord. So in this way you can air in order to your application. Okay, Real order again. This is your result. So, friends, congratulations. You have created successfully a complete blocks like friends. I hope you have understand. Oh, that I have taught in these course till then. Good bye. Thanks. 33. Free Paid Resources - Bonus: and the friends. So our Brock side step up and running successfully. This is the bonus video. So in this video, I've been sure you the books that I don't provide you totally free gray. So friends, these are the bed free resources for you. And I will abroad you all these books for the future. And these books Villa Bride with a strong grip on React Nord Mama TV and express. And you will enjoy a lot by learning these books So friends do then enjoy by learning these books. Good bye, Thanks.