ReactJS and Redux - Build 4 Web Apps [4/4] | David Katz | Skillshare

ReactJS and Redux - Build 4 Web Apps [4/4]

David Katz, Software Engineer - Coding Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
18 Lessons (1h 29m)
    • 1. Introducing the Course

      1:33
    • 2. Wireframing GoalCoach

      1:27
    • 3. Setting up the Index

      5:04
    • 4. Navigating with React-Router

      3:07
    • 5. Adding Firebase to the Application

      3:53
    • 6. Setting Up Sign Up

      8:21
    • 7. Writing Sign In

      4:15
    • 8. Adding Redux to GoalCoach

      3:18
    • 9. Logging the User with Redux

      7:47
    • 10. Developing the App Component

      8:57
    • 11. Creating a GoalList Component

      4:59
    • 12. Reducing Goals in the Redux Store

      3:41
    • 13. Combing our Reducers

      5:40
    • 14. Mapping the Goals List

      5:09
    • 15. Completing a Goal

      6:32
    • 16. Removing a Goal

      3:23
    • 17. Adding Completed Goals to Redux

      6:24
    • 18. Rendering Completed Goals

      5:55

About This Class

Become a highly-demanded software engineer by following this tutorial on React JS and Redux. As one of the most highly-paid skills for web developers, learning React will open doors and jobs for you.

 

This project-based course will have you coding right away. Building four carefully thought-out example applications in this course will sharpen your skills in modern web development.

 

First, learn the principles of React JS by building two applications. One introduces ES6/Babel, and the other how to handle HTTP Web Requests in React using an API. With the third application, learn how to manipulate browser cookies. Finally, you’ll create an entire app with full authentication and a real-time database to finish it off.

 

Also, learn the engineering of Redux. You’ll find that Redux boils down to three simple steps!

Don’t worry if you’re new to web development. Some JavaScript experience will help, but this course makes sure to explain every new concept thoroughly.

 

Take the dive into React JS and Redux. Let’s get started coding!



Also, here’s a link to the online repository for this course: https://github.com/15Dkatz/ReactJS_VideoGuides

Transcripts

1. Introducing the Course: welcome to an excellent resource on how to learn reaction. Yes and Redox. Congratulations. Learning react will put you one step ahead because it's one of the most highly demanded and paid for skills in the software industry. I designed this course with one overarching goal to get you to have reacted in a Redux on your resume and prepared to build your own react projects from scratch. In this course, you will build four applications. One will get you up and running with the principles of react and introduce JavaScript es six syntax. The next will using a P I and show you had a deal with Web requests In react. Third, you learn Redux. It builds an application that also stores information locally on the browser. And finally, best of all, we'll have a Redox app that has full up education for signing up users as well. As a back came database, I will explain every new concept precisely checking and measuring every fresh idea. That way you have a thorough understanding of the coat and engineering. Also, I'll let you in on a secret right now. Redux can feel complicated at first, but you can boil it down to three basic steps. All right, if you want to finally unlock the key to react and redux and add them to your skill set or you just want to brush up on your Web development chops, then this course is perfect for you. So what are you waiting for? Let's get started coding. 2. Wireframing GoalCoach: hello. Welcome to the final application that will create together with React and Redux. Go Coach with this application will move on from single page APS to rub app that features multiple views. It also has authentication with a full server hosted by fire Base. We'll have this default signing page as well as a sign up for. Of course, if you enter some faulty data, such as a bad email, I will say this email address is bad before mended or a really short password, uh, test dot com. Here we see the password should be at least six characters, but once you're in, you find a very neat dashboard. Here you can share golds with everyone else on your team, in application for someone else to complete. It shows who submitted the goal and, of course, who later completed the goal once someone on the team finishes it. So let's go ahead and complete Take the ring to mortar submitted by photo, and there we go. Our Aragorn actually completed that, so we'll learn even more principles and concepts with reduction this one, as well as how to handle multiple page applications with react. I can't wait to build this one with you guys. So with that being said, let's start coating 3. Setting up the Index: Let's set up goal coach. Once again, we'll take advantage of React up to initialize our application. Run the command, create react gold coach. Now go ahead and posit video until yours completes, because I'll jump ahead to the finish of my installation. Great, you're often should look very similar to this. Now don't forget to navigate into your new project directory by typing in seedy or change directory Golden. Now we'll have a few known modules to install. Let's Run and being installed. Redux React three ducks, react router and Fire Base and save. All of these will employ all four of these packages as we develop our application. So once again, go ahead and pause a video until yours completes Great Once at all finishes, go ahead and open the project in your preferred code. Editor also launched a project as well. If you want to see it running in the browser or already launch it by running NPM start. First of all, let's go to the public folder and look at index dot html. If you made the previous applications, you'll notice that we have a very helpful CSS file, Mrs. So go ahead and navigate to new browser window or tab in search. React Bootstrap. Go to getting started and copy the modified CSS style sheet and paste it right above the title component. Cool. Next, as usual, will delete the entire source folder. As we deleted, you noticed that the default application will disappear. So now it's complaining that index dot gs does not exist, but not to worry, because we're gonna create our own source folder. So now in the source folder, I'm going to create index dot Js within index dot Js. I will create our default React CO two Important react from react. We need to import the react dumb from react down, and then we use a react down to render function. She returned. So JSX just is at for no. Then we'll target the element by D, which is root, and then it won't work just yet. We need to re launch our development server because we crashed it head back and it's waiting for local host. It's reloading. And there it says, Great. Next up. Now that we see are did Brenda ring. We can move on to actually setting up our three main pages already for this application So within source create components folder. It was declared three new funds. The 1st 1 will be at the JSX. The next one will be a signing dot Js x. So Capital s sign in camel cased JSX and same with sun up JSX. So the S and the U are capitalized. So bear with me here we're gonna write some default code for each one. So for app, with import react and the component from react, they will declare a class of which extends a component rendered some JSX return jsx that says, Yeah, don't forget to export it. No one need the same exact code basically for sign in and sign up. So usually it's not a good idea to copy and paste, but in the interest of time, let's just go ahead and change both of these to sign in and sign up. Now we need Teoh import each of these components so it's import at from components slash at same thing with signing slash signing and last but not least, they're pretty much all equal. So can't really say was the best that the least of the worst of the greatest Great. We've done a lot of setting up. So let's move on to the next section, where we start adding some new logic and react code that we haven't even used before in the previous applications. See you there. 4. Navigating with React-Router: Let's turn this simple application until multi page application right now. To do so, we'll take advantage of the React Writer package that we insult previously going in poor three Things from react Rough What? The router, the route as well as lower case browser history from react throughout. React Rather works pretty simply. It takes pads that we set of strings, and that's 12 components that we pass as props. So we've already created three components that we can map as routes to our application. Let's first declare a Ratter tag instead of his death. And since this rotter tag usually just sits at the host, a path of Slash will work for now. Now the router itself, rather than having component, has a special key called a history. And the argument is what we important earlier. Browser history Browser history in History in a rounder allows us to navigate to different routes that we specify in different components with methods like push, pop and replace. For example, the push rather just adds navigation to the couple it from running route to the next and adds that navigation to the history so history will come in handy as we handle redirecting our user to different pages based on whether or not they're authenticated or signed it. No one said a par three rounds signing sign up, and our 1st 1 will be the apparatus, which will mata slash the component that we specify will be no forget to add the space our next route will be signed in. Let's do slash sign in all over gates. The component will be signed in Great in the last one, as you can guess, is going to be slash Sign up. They could put it will be side save another. We had this logic in her application. Let's test it out. So I'm gonna reload on the at, and then I'm gonna change the route to sign in and there's a sign it. So let's go to sign up and there, sign up. And now, finally, let's go back to app. Cool. So as we saw, we tested each new path in the euro and we can see that we have different components purely based on our route. Amazing. Now it's at firebase to this application so we can get the user to only see the at page if there truly authenticated 5. Adding Firebase to the Application: Let's add some fire base authentication logic to this application. First, we need to create an account on fire base dot google dot com If you don't already have a, so go ahead and navigate to Fire based on google dot com. Now there's a difference between firebase dot com and Fire, based on google dot com. Firebase dot com is the old consul, but we want to use a new one, so make sure firebase dot google dot com looks like this for you. Once you hit this site, click get started for free. No, once you're in, it should look like this and will be able to create a new firebase project so it's creating new project. Call it gold Coach. Let's check it out. Once you're in your new project, it should look like this. You can check out all of the useful features and information that firebase provides for you , but for now we're interested in one link. Add firebase to your weather. You should see a conflict variable pop up. You see it. Go ahead and copy that JavaScript object. Now let's declare a new file next toward index RGs called firebase dot Js at the very top. We want to import everything from fire base. So imports star as fire base from fire bits. Now you want to declare a new configurable that just looks like the one we copy. So cost config equals the one that we cough feed from fire base. Great. This info holds RGB ikey that we use access Firebase, our storage bucket for storing files and importantly, the off domain which hosts all of our authenticated users. Now we still need to actually initialize are fire based application. So let's declare another concert called firebase at was just equals firebase dot initialize at on our college thick variable. Now, other files will be interested in this constant. So let's exported. No one said back to index dodgy. Yes, We won't need Farmers Council necessarily anymore. Not right now, at least. And then at the very top. Let's import that firebase app variable that we declared in our fire base five. Now we need to add a little logic for authentication. What we're gonna do is at a listener that tells us whether or not a user is authenticated. Now let's declare over here on our fire base at that we want to look at the offsets and then we're gonna add a listener on off State changed. It's a turns and promise which we can handle with a user very and very simply, For now, we're going to check if there's an actual user. If there is, that's consul log that a user has signed in or up. That's long what that user actually is for now. Otherwise, we'll simply council dot log for now, but the user has signed out. We're still needs to sign it now. This will be useful because if the user has signed in the making bill head and navigate them to the dashboard or application, whoever if the user has signed out, we can redirect them to the sign and component whenever they're not signed it awesome. Now all of this logic is great, but we still need to write up the actual sign of component that allows a user to trigger this listener. So let's right that component next 6. Setting Up Sign Up: Let's set up the JSX for our sign up component. So head back to sign up the JSX. It will take advantage of some Bouchat class names to speed up the design process of our applications. First, let's changes overall, def. Call it form in line for the class name or in. Then we'll have a simple header to component with the title of Sina. Now we'll need a form group, and this is gonna be our actual form where the user signs up and enters all of their information so we'll have one input. Who's class name will be formed control. The type will be text, and then the placeholder will be email. Now we need another input. This class name will also be for control. This type will be password, which will be useful for disguising character keys as bullets to protect the user's information. So let's have another place holder and say password. They'll have a simple button. This button will say, Sign up in the class Day for this button will be bootstrapping, which is simply BCN. And then we would have a button primary. It's gonna have a nice blue color. Because of that, it's a type will also be button and let's save and check out how that looks cool. So that's really big, because I'm zoomed in right now. But at 100% it looks just like this great. And I just have a safe password for local host already, which is why mine is showing up. But your should be blank just like this. So now we need to set up some state for our react class. We'll have a constructor with props. First line will be super props, and then, as many of you will recall, this DOT State is an object. And then we'll have email with a blank string, the password with a blank strength. Now we'll have to unchanged functions for inputs. So on change equals anonymous era function. With our event variable well, said the state of email, first to the event, not target value. And then, of course, our password will also be event the target dot value. Finally, let's make a sign up helper method, which, for now simply consul dot logs the state. So this Stott state this starts day, Then we'll attach his helper method to the click of our button. Let's save, inspect the element and then I accidentally type. That's wrong. So on change should be on change, not change. And then let's add some new information here. How about Harry potter dot com and then Harry set up cool. We see our state object. We have an email of Harry potter dot com, and a password is just Harry. Great. So now let's add the actual logic that handles creating the user with this email and password from Fire Base. So the very top we'll need to import our firebase app from Firebase and makes you go back one directly by doing the dot dot slash head to your sign up Foshan. And once again, we want to look at the off domain. Let's create a user with evil and password and has two arguments, email and password. So it's RG email and password. And before we move on, let's declare that email and password and these are he is extraordinary. It's in tax upon this dot state, and then within here. That should be enough to create a user, whoever we want to catch any air that might happen during that process. But for now, let's simply council don't log those hairs. Let's make sure we spell it correctly. Save all right now, this is exciting. That should almost be enough to sign up, but there's one more step we need to add. You need to head back to fire based council right now. Go ahead and resize this head to your authentication page, and then before it works, we need to go to our signing method and enable email and password. Sinan. Let's enable that save. Now we should be able to sign up in your user so I wanna make this smaller again. So let's try Harry at potter dot com and Harry Potter. Great. So now we have a user has signed up. Listener. Remember that listener? We had index dot Js. That's the one that's actually logging. And we see that on off state change. We actually got a user and we have an email we have Whether their email is verified, which is false. They display name, which is nothing for now and a lot of fire base debt. Cool. So know what if we actually I don't have a good user signing up. What if their information has an air? Well, we need to be able to handle that and show that to the user in case a badly format that email or their password is insufficient, for example, so it's creating air object in our state with a message of a blank string. And then if we get in there, let's just simply set the state of air to the air. Cool. And then at the very bottom, I'm gonna have a div, which simply has the state of error dot message. I'll save. There we go Now Let's say, for example, that we sign up with an incomplete email. So how about Harry? Very potter. It says the email addresses Valley formatted. What if we have a valid email? But our password is just two characters. Password should be at least six characters. But what if we have the same user trying to sign up twice? Great. The email address is already in use by another count, so looks like everything's working. Let's just add a little styling. So that way not everything is touching each other, so we can simply give us a style of margin 5% and that's looking better. And for both of our inputs, let's give it a style of margin right of 5% as what margin? Right? Five pixels. So as you resize this, it'll start looking really nice. Awesome. Now that we have everything logging correctly for our side of component, let's move on to also creating the sign in component. 7. Writing Sign In: Now let's write our sign and component. The actual J sex will look 90% identical to what we just wrote in Sign Up Personally, When I'm developing a project, I usually prefer writing things from scratch because it allows me to think about what I'm writing and improve my memory for future coating. But with that being said, copying and pasting does save a lot of time when done correctly and in the interest of saving time for this video. And of course, I'll simply copy and paste the component. But if you'd like to give yourself a challenge, go ahead and write this file from scratch and change up the necessary things to make it look like a sign and form. Now pause here if you want to do so, because right after this will simply change the sign and helper function to use the right firebase method. All right, let's go. That's copy and paste this side of component. Pace it within a sign it cool. Now we gotta change is necessary things from sign up to sign it. So rather than a class name of sign up, let's have a class name of sign in and at the bottom makes you export sign in and not sign up. Then our Texan header to Element will not say Sign up, but sign in and then our button as well should say Sign in and not sign up. Now we got a look at this helper method. It's calling sign up, but we wanted to say signing, and they had to change the name of that helper method to beside in and not sign up. All right, that's it for just exchanges. But we need to actually change our method now. And instead of calling, create user with email and password. There's a method from firebase in the off domain called Sign In with email and Password. Awesome. Once again, we'll keep catching any errors that are based throws at us and said it as state cool, Let's say and then not to get too are signed in component. Let's sign in with Harry at potter dot com or whatever user you created for yourself. Inspect the Omen Before we call siding, we'll sign in, and then we'll say the user has signed in or sign up, and we see that the email is harry at potter dot com. Great. So everything is working with our sign and component now. So there's one more thing we can actually add to both components now. A link to both forms, links and react Router simply happened, but importing link from react rather so the very top. Let's import the length from we act route. And then it's a simple as having a div underneath our air message with a Lincoln Side to our sign up page. And then we'll just say, Sign up instead. Let's save, and here we have our link. When you click it, it takes up to the sign up form. You can even navigate backwards and navigate for its now. You could probably tell what's missing from this one. We also want that link at the top once again will import link from react router and at the bottom. Let's have a debate after air message, which is a link this one will be, too. Sign in. Then this one will say already a user question mark. How about we assign it instead, but save signing instead and cool both links work. Sweet, yes, some redirecting inter application. So now we actually need to add the redirecting based on authentication, and we're also gonna add some redux logic next. So let's do that now that we have authentication fully set up. 8. Adding Redux to GoalCoach: Let's have the user redirect to our application component purely based on their authentication status. Now, to handle redirecting, we can take advantage of the browser history component, which allows us to push routes onto the navigation of this application. So what, we're consul logging that the user has been created or signed in weaken simply also call browser history. Don't push on our APP component to navigate automatically into that at Pidge, as we save the application might already redirect you to the APP page. This is because the fire base code includes logic for saving info on the browser in a similar way to cookies. That way, the user is still signed in if they revisit the application. If they haven't signed out yet, so are on off state change. Listener returns about user because fire base for members that user through this browser. Great. So now that we're in app, however, we need some way to get back to the authentication form and unauthenticated the user. But first, let's add another browser history method of replace because if the user, ever on authenticates, will simply need to redirect a sign it cool head back to abduct a sex, and now it's handled on authentication. Let's add a Sino button. It's a simple as adding a button. Here it's class names will be B TN and BT Endanger, which gives it that dangerous red color. And then on the click, we'll call a method that simply says a Sino the button will say Sign up cool. No need to declare that sign out helper method within her class. Sign out, and then we'll need to add some code. So it's import firebase from Go Back one directory to five days and then once again, we're gonna find that fire base at automate and then this time will simply call a sign out . Let's save and there's that big sign up and let's click it and there we go. We're back to you. R sine inform need beans so the next step is having our user information actually accessible within. Our application would be helpful to have the user available in props, because the email, information and other info on the user will be particularly useful for to achieve this, let's add some redux logic to this application that allows a component to access the user info whenever it needs it. So let's move on to finally adding redux to this application. See you there 9. Logging the User with Redux: We want the ability to access to user information from fire base and whatever component we create. Because who knows when that email information will come and head? To add this functionality, we can take advantage of the relax library and at a user producer. Recall that with adding Redux logic to an application. We think about it in three steps that's at a constant, an actual creator and add the reducer. So first, let's add a constants file right next to index such as and Fire Base not, Yes, constants dot Js We'll export one constant for now called Signed in Now we still have to set up read X itself within our index. Dodgy as fuck, we need a provider component. So let's import provider from react Redux. Also, we'll need to import that creates store function from Redux itself. Let's make sure I spelled it correctly as well. Let's go ahead and wrap everything with that provider component. We gonna wrap this, I take it, Place it within here. Here we go. As I save, we're gonna start seeing some areas within her application. So the prop store his mark as required in provider. So once again we need to call, create, store and give our provider a property of store. So we'll say it's store is equal to store. But now our store is expecting a reducer. So let's create a new folder within source calling producers and then within reducers. Let's declare a index dot Js file. Now, before we create this reducer, let's first define inaction creator that our producer can handle. So also within source. Let's declare a actions colder, and these actions will have a index Sochi s fall and that we need to import that signed in constant from are constants. So make sure you go up one directory with the dot, dot slash In our first action will be a function called Log User. It'll have one email in the parameter for now, and this action creator creates an action so we'll have a plain JavaScript object whose type will be signed in and remember each action within readouts needs that type property and for now, will simply return an email key with the email that we passed in our long use. So that should be enough for actions. Now we can actually had to reduce er's and define that producers to handle this action creator, so we'll also need to import Sign in from Constance Constance and let's declare a user variable with Let cause we're gonna modify later with a no email for now. Then we'll export by default anonymous arrow function with two parameters, the 1st 1 being our state, which would be the user right here. But we automatically initialized and then her action. And remember the pattern with producers. We switch on that action dot type. We'll handle the first case of signed in. Let's go ahead and grab the email from her action. Then we'll say our user is now equal to the new email that we find within here when we use music shorthand, syntax, and they will go and return this new user. Remember, with switch statements, we always want a default case, and our default case will be to return the state, which is initialized to this user right here. Great. Now that we have defined reducer, we can import it with an index. So let's import our producer from our producers component and then argue reducer within create store, which should get rid of that air. Cool. Now there's another thing when we push our application when the user is valid to the at page with browser history, we also want to lock the user with the action creator we just defined. So let's important log user from our actions and then to call this function, we don't have a whole component as usual to Matt Dispatcher props and bind our action Creator. Therefore, we can call this stop props don't log user because, well, we don't have a class. However, we do have the original store object accessible within this spot, so we can actually even do one better than called the stop props and instead use store dot dispatch log user and send our action from the very bottom off our application. So remember, we need to pass our email variable. Then we can find this email variable within our user object. That firebase gives us what saved then seems like in or actions we actually have to return the action. You guys probably caught that so once more, let's go back to index Sochi s. Let's try signing in. So harry potter dot com. We made him earlier. Let's sign in and it seems like everything works So now what we actually need to do is quickly hook up map state to props to this component and connected to a Redox to see if we actually have a user within our Redux application. So let's import connect from React Redux. Let's quickly define a map. State to props function map State to props passed the state argument. Let's council don't log this state for now to see if we actually find a user there turned an empty object that way. It doesn't throw inherit Atis. Let's connect it up. We'll have our map State to props were not mapping any action creators, so we could just have mill for a second argument. Let's look the whole thing up, Let's say and as we do, we notice we have something within state and it's our object with our email within it. Spectacular. We just spent a lot of time hooking read ups for application, and it works. So let's move on to the next video where we start structuring our actual ad page 10. Developing the App Component: let's develop this application structure. We want to have a title do, first of all with a header. Three element tag that just says goals. Let's take out this app partner here. Seven. Div. Let's have a head of three oma tag that just says goals Cool. No, what's attitude lives? The 1st 1 will say, I'd go and the 2nd 1 will say Goal list. Let's save now. Of course, these two days severely lacked functionality, but we'll handle creating both of these Daves as actual components one at a time. First, let's handle creating an ad gold component. So head to the Components folder and create a new file called ad goal dot jsx at goal dot jsx. No, it's import our default react code, so we'll need to import the component. This is gonna be a component from react. Let's declare they had gold class, which extends component. Let's export and go by default. Let's work on rendering and returning some J s excellent. So in her ad girl component, we're gonna have an overall div. Then we take advantage of bootstrap again and have a form in line where the user can type their goal. That they want the very beginning. We're gonna have a form group already some nice boots, shops structuring for us. Let's have our input field. It's type will be text. The place holder will be add a goal. The class name will be formed control, which will give it some nice styling. Then, later on, we're gonna have a button right next to it. So let's give it some styling already of margin right? Five pixels. So that way they don't touch each other when they're aligned side to side. And this has to be an inner object in here because the style property for input requires an object. Now let's handle creating that button. It's class. Names will be be tiene and buttons success, which I believe gives it a green color. It's type will be button in a subclass name. It is class name. Now let's give it an actual title so we'll say Summit. And then we're gonna want some state within this component. Let's define Constructor. Who's props will be the first argument super props. So we had that object oriented stop. Then let's declare our state object for the title that is a blank stream now we can add are on change function for the input field. We're getting pretty good at this. So let's declare an event variable. Well, said the state of our title to event dot target dot value This month's be rote memory for you guys at this point, would you? On click? We'll have anonymous para function. Call a helper method working to find right now called Angle. Let's do you add a girl and let's simply council dot log the current state to check whatever the user typed as the title. Now, as we save it won't chill. Get because we still need to import it within our actual. So it's import at goal from the same directory, so dot slash add go. Let's replace this div that recreated earlier called and goal with the actual ad girl, and it'll be a self in closing tag. So don't forget that extra space. Let's sit and there's a Advil component. So let's inspect element and see what happens when I click that submit button. Say our goal will be to outline the meeting and there we go. We have our state blogging. So before we add any new functionality, let's think about references in fire base. Go ahead and navigate to your fibers project and let's click on database. So to find it, go to the side than you and just do database. It's blank for now, but we can start populating our database with data by using a reference star component with any name that we like. Think of the database as one huge JavaScript object or on object. In general, it will have keys that either map two more objects or just values like strings or numbers. Each of these keys has a random name were name that we specified. So let's specify our first reference to this database. By now heading to firebase dot Js. Let's define a new constant called goalref within our fire base. Well said it equal to the fire base that we originally defined but called the database module. And then we'll start a reference by calling dot breath. Then we'll pass the name of her actual key, which will be goals. And, of course, if you want to export this whole thing so that other files can use it now in her at goal component, we want to import that goalref from our base. So it's important Goalref from Let's Go Back One directory to Fire Base Now in her helper function. We simply need to call Goalref Doc Push, and then we can pass any object that we want, and it will automatically update in our database. So for now, let's do a test email, so test that test dot com. Then we want our title to be this dot state dot title. Let's see what happens as I save. Let's head back to her application and once again, let's say, prepare the meeting or outlined the meeting submit. And there we go. We haven't logging, so let's check our database. And that's we have a new gold ski with our object, which has a random named to it. No, but with our email and our title Cool Beans. So let's make this code more efficient. We're gonna want to have our actual email over user. And, of course, we can use the Essex trick to grab our title from this, not state. We simply need to argue the title, and then we want to connect this to our read Excellence Import connect from React Redux. We'll declare a quick map. State to crops function, so function that stayed to props. State. Let's grab the email from our state and return the email. And then when you actually need to connect this component to re ducks, remember, are the map. State to props is the first function, and then we don't have any action creators, so no will be our second function. We're so close. But now we actually need to grab our email from this stop props because we should be getting that from Redux. And then we can use the exact shorthand again and simply push this. So let's save. And why not log all of this instead of just this out state? Because now we're actually manipulating props. Save once more back to the application and I spelled Connect wrong at the bottom so it saved once more. And there we go. How about prepare the luncheon? But submit that. And as we go to our firebase Consul, our email is now harry at potter dot com. Great. So now that we have our database updating with goals are application also needs update the goals on the user interface. So let's tackle that in the next video 11. Creating a GoalList Component: Let's create our component for the goaless. Now create a new file called Goaless Dutch X within components goaless dot jsx Let's import are react code so important. React component for react. Let's make a nice goalless class, which extends component. That's export by default. Our goal list. Let's render some J sex for now and return just a simple Dave like before that says, Go list. Now comes a new, exciting stuff. Let's import are goalref from five minutes. Go back one directory and find the firebase file that we have at a component. Did not lifecycle hook to legal list class. So at this point, we need to find those goals that we added on to our fire base goal reference in our database. So after our goal is component, Renders will attach a listener to our goalref from bar based that grabs all the adults. So let's call the goal refs on function. In the first argument of on, we can listen to multiple events such as a child added event, a child removed event to trigger a promise. Whenever these things happen within our listener, we'll use the value event to trigger promise straight up whenever something happens within our goal reference at all. So let's listen to that promise with a snap, variable and anonymous pharaoh function. Look at the snap object. We use Java scripts for each function to map over each goal within this net. But let's declare a goal object equal to the gold value. We find that gold value by calling dot on the go. Let's go ahead and log the object for now, just to see if our fire base reference is working. Cool. Let's say and remember, we still need to import it with an app dot jsx. So let's import goal list from our new goal list module and replace that div with go list. Don't forget the space said. Let's inspect the element and check it out. Please have some goal objects showing up, so we have our email of test at test dot com. The titles prepared, meaning we have a 2nd 1 submitted by Harry Potter prepared the luncheon hopefully run and her mighty are invited. Anyways, you'll notice that this is actually real time, too, So if I add another goal, attend Quidditch practice, for example, practice, submit and all of our goal objects automatically reload because fire base is all happening in real time, thanks to our listener Apostle. So we want to do in goalless Dajae X is prepare under Ray of goals. So let's make goals an empty array right here. And then we'll go ahead and push all of these gold objects that were grabbing from our listeners ever. For each function, let's simply council dot log our new goals with our goal objects and really with our gold object for only interested in the email and title. For now, rather than declaring a gold object, let's just go ahead and grab the email in the title from Golden Bell. Let's continue using our SX tricks and push email and the title. Let's save Our Council should reload. Let's go ahead and add a new go. So right now we have our three goals. It's in Quidditch practice for the luncheon during the meeting. No, it's at a new goal. Ask her mining, Kill the bill and there we go. We have our four goals breed rendering awesome. So let's add some readers logic now so that we can recognize these goals as props in her application for any component that wants to use it. See you in the next video 12. Reducing Goals in the Redux Store: Let's add some Redux logic to this application that handles setting our goals in props the same place as we currently logged them in. The constant essentially will have an action creator that sets the goals globally in our store. Recall that we should approach this in three steps. First, let's add a new constant head to constance dot Js. Let's declare a set goals. Constant set goals equals set goals. Now let's declare an action creator within our actions. Index Dodgy. Yes, we'll need to import new constant, of course set goals. I can see already. I still have to save the closets file, so make sure it's safe. And let's export a new function called set goals. You'll have one argument, the goals that we, of course, passed as a right. Let's go find a new action. It's type will be set goals, and then it's data. Little have a gold ski map to the goals that we passed as a parameter, and then we use our Essex shorthand so that we don't have to specify that the goals is gold because the key and value are exactly the same. So let's not return that action. Great. That was the second step. Now, time for the third step, adding a producer. Now let's take a moment to think how we're gonna add this reducer. We could just have another case in our default producer already that handles setting the goals with set goals. However, this would mean changing our initial state logic from user to something more extracted in global. So rather than doing that lets up for a different approach. Let's split the reducers into two reducers. One will be called producer user dot gs and another called producer Goals Duchy s. So let's rename this default one to reduce your user dot gs. Since we can see that we're handling our user object in this one, let's rename it to producer user dot Yes. Then we'll have a new file called producer goals dot Janice. Our goals of reducer will import sectionals from Are Constants file. Don't forget to go back. One directory to Constance. Now we need to export by default Anonymous era function. So here's that anonymous era function. It will have two parameters. First, a state parameter set to initial empty array because our goals will always be an array as we're making them in our fire based listener in goaless dot jsx, and then we'll have an action as usual for a producer. Follow the same pattern and switch on the action dot type. Then we'll handle our first case, which is set goals. Let's grad our goals from the action, and then we turn those goals as our reducer state for schools. I don't remember. Switch statements always need a deep all case in which will return our state, which is that empty array. Let's save and great looks like we have set goals set up for us now. There's one problem, though you may have already pointed out. Now we have no default index dot Js file, so our overall reducer is going to be missing. Let's fix that issue in the next video. 13. Combing our Reducers: now that we have to separate reducers in a reducers folder, need to somehow combined them into one overall producer. Luckily, Reduction Apps with a combined reducers function that allows us to do just that. So let's re declare our index dot Js file within producers in a very top Let's import combined reducers from Redux. Now we simply need to import both our producer, user and producer Gulf. Let's call our producer user user from reduce her user. And then our goals will be goals from producer goals. No, it's a simple as exporting a default. Combined producers function now in order to pass our user and our goals within combined reducer into one overall producer. We just created object. We'll have a user key map to our producer user, and it goes, Keep map to our producer goals us. Let's inspect the element. And as you can see, our producer is working fine because we're not getting any heirs. Cool. Now what we may have broke is our ad golden JSX and in fact, we're not returning email from ST anymore because, as you can see in our state object, we have a gold producer and a user producer now no longer the email. So let's go ahead and council dot log state in at gold dot jsx In ST. Let's check out what the state actually looks like. So as we see State and add Golden, JSX has our user object and our goals object as well. So we'll need to grab user instead of email and return our user object. And then if you tried to add a goal, it wouldn't work. We couldn't get email from the stock props. We need to get it from this stop prop start user, because that's what we're actually returning now in our map state to props. Let's go ahead and save. Let's go ahead and get rid of this council dot log. There's a lot of things plaguing our council right now, so let's also go to our index Dodgy s our global one and take out or just comment out these two consul logs For now, let's save and then, of course, safe at Golden JSX, and that's looking a lot better. Let's go at the JSX. Remove that council doubt log as well, so good and comments it out. You might need it later. Were deleted if you'd like. Cool. So it seems like it's working. Let's check if we can still add a goal. Remember that this is Harry Potter. So how about practice when guardian leviosa it's Levy Osa, not Livio saw those of you who have seen Harry Potter will get that little joke. As you can see, we're still adding new goals within our goals. Object. So let's head back to goal a stock. JSX. Let's actually take advantage of the action creator we defined earlier called cycles because now that we have these goals, we'd actually like to be able to access them within propped. So first of all, we'll need to import set goals from matches, and then we need to import are connect function from the actor Redux as well, because we're now gonna hook up this component to our Redux store. So let's connect it past no and no for now, just so it's connected. And then, rather than in clearing the whole map dispatch of props function, I know we'll only need the set goals function for now. Let's go ahead and add that to our props and then I spell set goals Wrong. You guys probably caught that never go. Here we have Segel's and now, rather than just consul logging goals. We're gonna call set goals from our props of Gold, we'll say. And then one way to check if this set goals function actually worked is to declare a map state to props, function that takes our state and then returns our goals from state as an object. Let's return goals and then within a render function. This is gonna really put a lot onto the screen, but it'll show what we need. So let's render this up, pops up goals and see if we're actually getting it saved. And then we still need to argue map state of crops in our connect function. Don't forget to do that, says we save it reloads. And there we go within prop stock goals we see all over objects from Firebase. Great. So now we can move on to actually rendering these goals onto the screen at last. See you in the next video 14. Mapping the Goals List: before we take one step further, let's add some style to our whole app dot jsx component. So that way, it's not touching the left side of the screen anymore. Remember, with style, we need to passion in your object. Let's give it a margin of five pixels, and it needs to be within a strength. Cool. Now let's head to goalless that James Sex. In order to render our goals onto the user interface, we simply need to call the map function over the stop prop stock goals. Now we'll need to wrap this logic within a diff in our JSX Stick out that goalless tag that would clear some curly braces where we can start using some logic. So we'll call this stop props, got goals, don't met, and then we'll map over each goal one at a time. Inferno. Let's just return. I do that simply, says gold dot title. For now, let's take it up. As you say, we can see all over goals rendering onto the screen. Let's inspect the element, and you notice that react is complaining that each child, an array, must have a unique key property. Now there's a trick that we can use with the matte function. There's a second optional parameter that we can wrap with Goal called Index. Then we can simply argue the key as index here. And then we'll have that number assigned from the index. And then that warning goes away. So we're gonna need a lot more information for each of our gold items. Yet rather than blowing up a render function with a bunch more JSX to make thes Golden's look nice. Let's declare a whole new goal item component. It will look something like this with goal item right here. It will have its key of index. Of course, they also want to give it the gold property just like this. So let's declare that goal item for now, right within components, The new file goal item don't JSX. And then let's make this a react component. So import react component from react and you know what's next. We need to make this an actual class that extends the component feature from yet were rendered some J sex. For now. Let's return. Did that says gold item. Let's export by default. Goal. I now we need to import goal item in our goal list so important from glide of It's in the same directory. So do that dot slash what's comment out Dave here and then comment in our goal item with Kiev Index and our goal off goal. Let's go ahead and remove that first did but safe. And as you might expect, all of our previous goal items with the titles were replaced with gold items that just say Go So let's go ahead and council adopt Log What this stop props Gold looks like since we pass it in. Each of these goals save and let's inspect the element. So each of these props has a goal with an email in a type cool. So it's declared female and a title constant that to this stop prop cycle. And now let's structure are actual JSX for each of these gold items to make them look really nice. So, overall, Div, first of all is gonna have some styling. Its margin will also be five pixels just like the component stick out tech school item. They don't want a strong element which just makes text. Both men will wrap our title with it. Then we want justice span right next to our title that says, Submitted by whoever the email is, Let's go ahead and wrap the email within M tag. So that way it's italicized, I would say and nice. It's looking a lot better already. Now that we have fully rendered our list of goals from Fire Base. With our combined Redux logic, we can move on to further manipulating Firebase and Redux by adding some complete gold functionality. So that way, other wizards besides Harry can actually complete these goals that Harry has submitted. See you in the next video. 15. Completing a Goal: before we move on to completing goals. Let's take another moment to tidy app dot jsx For one. Let's make this title. Actually, gold Coat, now that we have a list of goals, will declare another age four tag that says goals. So that way we have a nice header for a list. Now let's throw in some dividers inter component, which we can add with some self enclosing HR tax. We'll have one after ad go and one after goaless. Nice. That's looking a lot better. Now let's add the functionality to our application that allows users to actually complete goals. Completing goals will simply remove the clicks item from the goals list and move them into a new list called completed goals. Each completed goal item will show who completed it, not who submitted it or wrote it, but who completed it as the sun in user. So go to gold adam dot jsx and we're gonna add a new button. It'll be right next to our e mails Fan. The class stain for this button will be some Bouchat class stands beauty in Beauty and SM, which stands for button small and button primary. The text will say complete. Let's check it out. Should be a nice little blue button sweet and let's go ahead and give this span some styling. A margin right of five pixels. So that way it's not right next to it. Margin right, five pixels cool. That's looking better. So as we click it, nothing happens yet because we still had to add a complete goal helper method. So in the click of this button, let's call this stock complete gold. And now let's think about what we actually want to achieve with our complete goal helper method. First off, we need some weights. Add this gold to a list of complete goals on the database. I had to complete goals from the dead Api's. Next. We'll need to remove this goal from the goals reference. No, let's tackle the first problem. First off, we need a new reference now to our database. Let's export a new ref called complete goalref and just like before, with a ref for goals, you simply need to call Ref, Are you a child? This will be complete goals. Let's save the readings. Import that complete Goalref on our goal item components from back one directory too far bits. And now let's think about the data that we actually want. Of course, we want the title of our goal. But which email do we want? Do you want the submitted email that is rendering here, or do you want the email of the user that is currently signed it? Well, we want the user that's currently signed it. So how do we do that? We do that by connecting to a Redox store. So let's import connect from React Redux and hook up this component to our Redux store. So first we need our map. State to Props function passed a state argument. We'll find our user in ST, then simply return our user. Then we can argue that state to props within here, and they were not binding any actions. So let's just pass a mill as thes second argument to connect. Let's save Now let's find our e mail from this stop props dot user, and then we need to find our title from this stop props. I go in a similar way that we did to the render function. Let's take out this console log for now and then let's go ahead and Council don't log email as well as the title to debug this. So as we save but suspect the element but in the console, and right now it's complaining that are complete. Goalref is still not being used, but don't worry, we're not gonna use it yet, said complete an email to complete It is Harry Potter, and the title is asked for money to the ball. Let's sign out and create a whole other user so that we can see if we're getting the proper email because we were signed it as Harry Potter. So about Ron at weaselly dot com, the password will be run easily. What? Sign up. No, it's complete. Prepared the meeting and it says Ron Weasley, as you can see that, So now all we need to do is use a complete goalref and push this information to our fire based out of its. So we'll push the email as well as a title. Let's save. Let's say that Iran asked her money to the ball. Let's check our firebase database now. Then we have a new reference of complete goals with a new object in. The email is running easily, and the title is asked her money to the boat. Awesome! Now that we have one out of two things working with our complete gold method, we can move on to the 2nd 1 which is to remove the goal from the goals reference. That way we won't have to complete it more than once with more than one user. See you in the next video. 16. Removing a Goal: Let's tackle the second step in a complete goal helper method. We'll have to add the necessary logic in order to remove these items from the goal list once someone clicks complete on them. Because, of course, it might make an awkward scene if Ron already completed the goal as reminding to the ball. But someone say named Viktor Krum thought that she was still available. So to remove objects from a fire based database, we need to know their key values. However, we can't know the exact value of these goals by just looking at the coat. We need to check the firebase concept. Notice how the keys for each of these goals looks like our random string. That's because they are random strings. So how do we get the key component? Well, we need to start by adding more information to each of these goals, so head back to goaless dot jsx. What's at a consul dot log of these goals that we're getting from our snap for each function. So not gold out there now, but the actual goal. What's save back to your react application and check it up? We have that weird looking object with all the firebase information. But then there's also a key in here, and the key is the exact random shrinky that will need in order to remove the goal. So let's declare a server key constant and said It's a gold dot key. Let's say our constant servic e is equal to Golden keep. Now all we need to do is past server key, along with email entitled to our goals array with each gold objects, Let's say great. And now that server key should be accessible within the goal. So let's declare a server key constant right next to this stop props that goal once we're getting our title. For now, let's just council dot log those server keys. Whenever a user clicks on them as a save and it complete, you notice that each one has a new server key. Now the removal method is actually pretty simple. First, we'll need the reference to our goal breath, and then we'll create a further reference to the actual goal item by calling child server key. This will be a reference to her actual, and then we simply call Fire Base is removed. Let's remove this council lot save and Let's finally remove that. Ask her mining to the ball. There goes. It disappeared. So let's check in the firebase console. Now. We have only four items and goals. We have a lot in complete goals. Oh, because we clicked it multiple times. So let's go ahead and just clean up this data one of the time. We only want one. Otherwise, it's gonna look like Ron was really eager to ask her money to the ball. And let's go ahead and remove those, prepared the meeting and prepare the luncheon ones. They're not really relevant to the whole theme that we have going on here, as you can probably agree. Wonderful. It works. So now that we have complete goals fully working, let's move on to the last component of this application, which is the completed goal list that will render right after goals. See you there 17. Adding Completed Goals to Redux: Now let's take care of grabbing the completed goals from our database. Let's set up a complete goaless dot J sex component, so go to components. New file complete goal list, not JSX. This will actually be our last component for this application, so let's make it a react component by devote report. React component from react. Then let's extend component from react before we do anything else. Remember to export it by default. Complete goal list. Let's render some JSX for now. Just returned a div that says Complete goal list. But now let's go ahead and amend our app dot jsx component. We have another section. This time I'm going to say complete goals. And then, of course, you want to import are complete goal list. Um, complete goal list. Then let's include that new JSX within our render functions. Beat goal list would save and it's reloads. There we go. We have complete goals in a complete goal list. Cool. So now let's head back to our complete goaless component. I believe these other ones for now. And remember how we used Goalless to render our goals. We started with the component ID Mount Lifecycle Hook. Let's add that right? No class component did moat. And then we listen to our goalref. Remember, we created a complete goalref in our firebase fox. So go back one directory and find firebase pop. Then we use the on listener of every value event the fire base throws at the complete goalref. So remember, declared a gold array, we'll do the same thing with a complete goals already and then for each value in this snap , look at the Gold Wanted time. So similarly, we'll look at the complete goal one at a time. Let's declare on email a title on the complete goal. Die and then we'll simply push. Each of these aren't you are right female title. Finally, we use an action creator to set our goals. We use the same thing with set completed, but for now let's simply council dot log these goals to see what they look like. Go ahead and save. Inspect the element. As you can see, we have complete goals now and it's an array of one, which is the one where Ron Weasley finished asking her money to the book. Cool. Now we need to add the necessary Redux logic to get these complete goals available within props. So let's take three steps necessary to do so. First, let's define a new constant within constants. Touch. Yes, just like Sickles. Let's export a concept that says Set completed, Set completed. The second step is to go to our actions and make a new action creator. That's export. The function set completed. We'll take our complete goals. It's gonna look very similar to cycles. They're pretty much brother methods. So cost action equals type, which is the second pleaded before I go any further. Well, before I type this there we go. Before I go any further, I'm going to import set completed from our Constance. And now we can actually return our data, which is complete goals just like above an Essex shorthanded value like our goals. And then we want to return the action very necessary to have that. Don't forget to save constants. And now we need to amend our reducer. So we have a separate reducer for goals. So we're also gonna need a separate reducer for completing goals. So let's have a reducer competed goals, not jazz, and this will look 90% identical to our goals reducer, but it still short enough to write quickly without having to copy and paste. So let's import set completed, first of all, from constants. But also we get to practice writing reducers, which always helps. Let's export by default on arrow function, we'll have a state parameter set to a new initial empty or right the action as our second parameter. As usual, we'll switch on the action tight. Pretty cool. Switching on this, I will handle our first case, which is completed. We'll find our complete goals from the action, and then we'll also return those complete goals because that is the new array that we want . Then, by default, we will return state cool beans. Now there's one final step we need to head to index dot j Essman reducers and import complete goals as well. From our new producer, I'm pretty sure please tit goals to make sure everything's name correctly. Then finally, let's include within combined reducers complete goals. Let's save and awesome. We just set up the Redux logic for complete goals. So let's move on to the next step and hook up our complete goalless to the Redick store so I can actually see complete goals and props and render them 18. Rendering Completed Goals: we have all of our readers logic set up for completing goals. Now we just need to use it. So let's import the Connect function from React Redux. On top of this complete goal list Components Import Connect from React Redux and furthermore, let's import that set completed Action Creator completed from Let's Go Back One Directory to Actions. Now we simply need to hook up this component to our Redux store. So let's add the connect function at the bottom. Then we'll have no for our first argument for now because we don't have a map state to props function yet. But we do have in action those are you set completed in an object as our second primer. Now we simply need to call this stop prop, Stutts said. Completed, where we currently log are complete goals in the concept. So this stop props set completed of complete goals. Now we won't recognize a complete goals as props until we create that map state to props function. So let's declare it now. Function that state to props, takes state as the first parameter, and then we'll grab, are complete goals from state and return complete goals as our object now, rather than council logging, complete goals. When we created in our fire based listener, let's simply consul dot log props dot complete goals in a render function to see if our set completed Action Creator is actually functioning. Now, before we go any further, makes you argue Map state to props within your connect function. As I save and inspect the element we see this stop props dot complete goals as an array of one value, which is our email with Ron Weasley asking her money to the ball. Great. So now we simply need to set up the JSX to map over our complete goals. It works in a similar way to our goal list, so let's add some curly braces for some new logic. We'll map over complete goals, one complete goal at a time. We have a real phone ship. Let's take out this council log we don't need anymore and remember, with the goal list, we used the index so again will use art in next year. And with the goaless, we had goal items rendering for each one, but we won't need a complete goal item component necessarily because of JSX is so short that it doesn't demand its own component. Also, we won't be adding extra functionality at the moment specifically to these items themselves . So let's grab our title and email, First of all, from complete goal. No one wants to return some Jazz X. It'll be a simple div whose key will be that index that we grab from our complete goals in that function that will have a strong tag wrap around our title. We'll say it was completed by this person. Will have some M tags for an italicized e mail, Let's say, And there's Ron Weasley asking her mining to the ball in our complete goals list. Now, before we finish this application, let's put the cherry on top and add a clear all button to this completed list very simply at a button. After those braces, so have a button. It's class. Name will be BT n and button primary. We're gonna have a blue button. Let's say clear, all is a text. So here we go. Clear all and abduct JSX. Let's go and add H R. Tag after our complete goalless gives some separation between that sign out button and the clear all button rape. And then let's call a helper method that will define right now called This dot clear completed and then we need to define clear completed Let's do so right here. And the logic is actually very simple and short. We simply need to call the complete goalref, use the fire base, set function and pass an empty array. So this method will work by passing this empty array, which will clear the whole reference by resetting it to something empty, Let's say, and once it finishes reloading, let's say Iran also attended Quidditch practice so that we have another complete goal in our list. And let's clear everything. Boom, they're all gone. And as I reload, yep, everything is still the same. Excellent work refinished the last application goal coach in this course. Whoa, I hope you learned a lot about React and Redux while building this application and the three other ones. If you plan to keep working on this one, though, there's a summary and challenge portion coming up next but awesome work again. We learned so many new concepts in building this app like firebase routing, authentication and how to deal with the database. And now I'm so excited to see what applications you all make in the future. Go ahead and use these applications as examples are templates for your future ones. Congratulations. And keep Cody.