 What's going on YouTube? Lee Brant here from Octa developers today We're going to create a reusable react component one that you can pass data to and consume in many different pages So let's get started Okay, so the first thing we're going to do like we do with any react app is Staffel the react app so we can use create react app for this I don't know if you know this but this is fairly recent new to me as of this recording anyway Create react app and no longer supports global installs So if you've installed create react app with like npm install dash G You may want to remove that and you're going to use npx to run it From the web now. I guess so it's just npx create react app and We'll call it Brewster and this is going to get all the metadata for the app for the scaffold It's going to scaffold the app get all the dependencies for you and when it's all said and done It should say give you instructions on what to do next like Changing directories into that directory for the app. You just created and running it with yarn So you can use npm just fine But it comes with yarn by default so we can see here go ahead and change directories into Brewster and then run Yarn start so we're going to actually change directories into Brewster But then we're going to run code and dot Because I have the command line thing for Visual Studio code installed So this is going to open this up in Visual Studio code And I can see with Visual Studio code. I've got my scaffolded app here As well as my node modules folder and all that good stuff So now you have a basic react app with create react app no longer supported from Global so it'll still work But what I got was that you're using an outdated version of create react app And this is actually easier. So just you don't have to have anything installed globally just using npx. It's fine So the purpose of this Component we're going to build is a star rating component We're going to build an app called Brewster that allows users to rate craft beers So we're going to use this star rating component in several different places But we want people to be able to get to their ratings their specific ratings So we're going to need an authentication component. We're going to use octa for this So you can if you don't already have an octa account You can just go to developer dot octa dot com click on sign up the sign up forms very simple It's a free account. No credit card or anything needed. It's always going to be free Once you've created an account and logged into it, you'll see something that looks like this This is your octa dashboard. Let's go to applications Click on add application and This is going to be a single-page app, obviously And we're going to call it Brewster not Brewster Brewster We're going to want to change the port that it all runs on and comes from Because by default this runs on port 3000 and we're going to want to change this from authorization code to implicit flow Because it's a client-side only application So once you click done you'll be taken to the General settings for this application. You'll see implicit is there localhost 3000 implicit callback is the login redirect URL localhost 3000 is where you initiate it and you'll have a client ID and Pixi or proof key for code exchange to make client-side Authentication a little bit more secure than just the regular old implicit flow There's a couple more things we need to make octa work Come back over here to our command line We're going to need a couple of packages, so we'll do a yarn add at octa Octa react And we're going to do it at Somewhere about version 1.2.3 We'll also do react router Somewhere around version 5.1.2 And this will install these two packages and we'll be ready to come back over to our code Once those are installed We'll come back over to our code. We're going to create a new file in here Called it dot env dot local and react will pick these up as environment variables so Instead of making you watch me type all of these since I obviously can't type today I'm going to poke these in now these you've got your react app octa client ID, which is what the react SDK or that that npm package that we just installed That's what it's looking for and the react app octa org URL and I'll show you where to find both of those So if we come back over to our client app, here's our client ID, obviously, so just go ahead and copy that Come back over to our code and we'll just replace that in here Now To get your octa org URL Go back up to your dashboard, and it's actually right up here at the top the right-hand side So just copy that Come back over to our code, and we'll replace this whole thing now We've got my octa org URL and the react component in there The last thing we're going to need to do is come into here into source and index dot j s and Right at the top right below the import statements We're going to bring those into a config So here's my octa config we're going to bring in those org URLs and We're going to need to add a couple of imports To our index.js file I'll put them right above here We're getting other stuff So we're going to bring in the browser router from react router dom and the security package from our component from octa react SDK and In this react dom render we're going to replace this with some stuff Because we want to be able to wrap this app in the router dom and in our Octa security component, so we do the rack react router Dom or the rack dom render With a browser router around the outside of it With security and we'll use this spread operator to spread all of the values from that Into our so be this the same as passing this whole section in As one thing this is just a little bit cleaner looking and then we're going to put we're going to wrap that around the app Component that we're brought in from app Now that octa is actually set up to handle user authentication We just need to let the app component know that it's going to be using security So come over here to the app component and we're going to bring in some stuff from react router dom and the react package Again, I'm going to cut and paste these in here So you don't have to watch me type all this stuff, but we're going to bring in link and route so that we can do some routing in here We're going to bring in secure route in the implicit callback So that we can create the implicit callback route and so that we can secure a specific route with with octa Then let's go ahead and replace this whole app function here And then we'll walk through what I've done So I created a nav That has the home page and then the rating page. I Also did a route to the home page with the exact path of slash and then I just said use the component home page This is actually a short way of saying this is the actual component It's just going to output the text home page Secure route. This is from the react or the react SDK from octa The secure route for the exact path slash rating make sure it's secure and we're just going to do the same thing component We're just going to output rating page for now. We'll create the rating page in a little bit but then for the route Implicit callback this just says that the implicit callback component in the octa react SDK is going to handle that route So that's how we actually end up with the ID token spread into a user component for us So now that that's all done octa is ready to handle Authentication so you can test this out by running yarn start and logging in with it. So let's do that now Okay, so now we're going to test and make sure that that secure route and everything set up, right? So from the command line in that folder you just say yarn start and it'll start up and this is going to Take me to my browser local host. We'll see we've got home and rate We'll get some styles in there in just a minute. We just want to make sure that the security set up, right? So we're on the home page doesn't go anywhere when you click on rate should take us to octa and have us sign in when I sign in with the Now I haven't created any other users But it did create one user for me when I created the account and that's my admin account so I can go ahead and log in with that When I log in with that we can see that we're on the rating page Okay, so now my home and rate page are actually there and Rating page is secured and we're ready to move on to adding a Firebase database of this thing so we can save some Okay, since we're gonna want to save these ratings somewhere And I don't really want to set up a whole database or anything like that. We're gonna use firebase It's actually pretty good for smaller projects like this I know some people who are putting some pretty large projects off of it So I assume it works really well for large projects too, but if you don't already have an account It's just firebase.google.com You just click on the getting started here now. I already have an account So once you get your account and you get signed in you'll go to this page And we'll click on add project to add our Brewster project. We're gonna enter a project name So we'll call it Brewster Brewster and We'll click on continue. We want to disable Google Analytics for this project just because it's a test project if you're doing this for a real project You're probably gonna want to enable this And which go ahead and click on create project and this a great this old state This will take a few minutes. So I'm just gonna pause the video here and we'll come right back So once it's all done created You'll see a screen like this. It says your projects ready ready to go click on continue You'll be taken to a screen like this and this is what we want to take a look at here So we're gonna add an app to this firebase So you need an app to be able to talk to the firebase database So We're not using iOS or Android app. It's just a regular web app. So we click on web I'm gonna call this Brewster And we don't need firebase hosting. We're just going to be doing this locally. So we don't need to do any of that and Once we've got that we'll get this config down here. So we're just gonna Copy this part of the config inside the script tags We'll copy this and I'll put this off onto a text file so that we can copy some of those values back out later All right now We'll continue to the console Now we have Brewster and we have this app here. We're gonna want to add a database to it. So we click on database We're gonna click on this create database down here Don't be fooled by this. This is the cloud firestore. We want to use the The real-time database. So you scroll down here and they'll say or choose real-time database So we'll go ahead and create database there And we'll start it in test mode And what this does is it turns on read and write true for everyone Now so it's obviously not what you're going to want to do for production, but this is good for testing When you get ready to go to production, you're gonna want to put it back in a locked mode And enable your app specifically to be able to read and write to this database because right now Anybody with the reference to this database with the URL can actually read and write data from the database Obviously not ideal for production, but in this case start and by default I think it sets it up to like Disable in 30 days So even if you forget in 30 people, you know hackers are only gonna have 30 days to write data to your test database We don't really care that much about this anyway So go ahead and enable that now we've got a database that we can ride Read and write to and it says your rules are defined as public You probably don't want to leave it like that. So but that's okay now We can go back to our code and we can put in those Config values so that we can connect to this database. So let's go do that Okay, now we're ready to add the configuration for Firebase and connect to the Firebase database So what we're going to need to do is remember those values that we got from the Configuration that I copied off onto a text file. We're going to copy those into our in v dot local file And I'm going to copy all the settings Shell over here It's just react underscore app underscore firebase underscore API API key off domain DB URL project ID Storage bucket and message sender ID and the app ID Now these are all there in that config file that we That we copied from So if I copy mine from my text test file that text file that I copied it into I Can go into my my API key There's one called off domain. I can copy that one out and all of yours are probably going to look pretty similar the database URL The project ID Storage bucket the message sender ID, which is your app and the app ID now We got all this stuff set up in our environment local The only other thing we need to do is we need to bring in the npm package For connecting to firebase, which is just yarn add and it's just called firebase and we're going to use At 7.5 point oh It's pretty close to the latest And this is going to bring in our firebase package Once that's all done. We can get back to our code And we're going to add one more file to our application Inside of the source directory. We're going to create a file called firebase.js And this is just going to be used to connect to the firebase database And so we're just going to bring in the firebase package And we're going to read in all of those keys that we just set up in the environment local We're going to initialize the application with our firebase config We're going to get a database reference to the database and we're going to export the our Brewster reference To the ratings collection that we haven't created yet But now that that's all done We should be able to run this thing and connect to the data store But we don't really have anything saving or doing anything like that yet So let's go ahead and start creating this star rating component that we set up to create from the beginning now I know this may feel like a lot of Config and set up and you don't have to use octa. You don't have to use firebase but they're very simple ways to get those things done and If you've never used octa or if you've never used firebase You came here to learn how to write react components and you're getting a three first Okay, so let's start creating this rating component Whenever I start creating components. I like to go ahead and create a hierarchy for them. So we'll call it components the folder inside of Source components. Yes And inside of the components folder will create a new folder called a raider and Visual Studio code now does this thing where Since there's only one folder in there, it doesn't create the whole Folded out folders. I I don't know So right click on raider and we'll just add a new file called star rating Dot jsx Star rating dot jsx make sure I type that right. Okay. We'll also create another file in here called star rating CSS so you have a little we can style it a little bit So in the star rating dot jsx file This is what we're gonna put it in. I just Copied a whole bunch of stuff in there. It's a lot to unpack. So let's just take it piece by piece. Okay Before I forget I'm gonna save that file We brought in react component from react like you always do pretty self-explanatory We're also gonna import star rating CSS file that we just created pretty self-explanatory, but here's where we start getting into stuff Okay, so we've got our our class. It's called star rating It extends a react component like you do The constructor takes the props in passes them up to the stupor the props the page that can be consuming component and It's also gonna set the state Because we're gonna be able to pass in this thing called current rating This way when we load that rating component We can set a current rating for it like if it's already been rated if you're Setting up this raider on a on say a list of beers and they've already been rated Then you can go ahead and set that rating and you don't have to wait for somebody to click on something to set a rating So we're gonna want a current rating for it And we'll go ahead to set the current rating In the state of the prop state of the component from the props current rating Okay, and in the component did mount we're gonna run this dot set rating Now what this does is it takes that current rating that you passed in and it does the visual part of it Where this goes through and it gets all the stars out of a Reference to a component called star with a it's gonna get every every element With a class of star inside of a reference to a component called rating now if we look down here Here's the rating component and we've got a ref to rating So when we say this dot refs dot rating that's where it's going to start looking and it looks for everything with a class of Star inside that then we're going to create an array from that That's just a collection by default an HTML collection, which we don't want we want an array from those stars For each one of those stars. This is so we can loop through them We're going to set the stars style color to either yellow or gray Depending on whether the current rating is greater than or equal to the value of that star Now this may seem a little bit Opaque right now just because we haven't talked about the stars that are going to be showing there But just know that this starts looking through the stars and it takes the current rating and it goes hey, this is Set one of the star Is the rating higher than or equal to that if it is make that one yellow is the rating? two or higher set that one yellow and once it gets to like three or whatever whatever the rating is if it's below that or Above that then we're going to make those gray so that we can see our rating of two would have the first two stars highlighted yellow and their last three or however many stars we tell it are going to be gray now When I say however many stars we tell it that's because there's one other thing that we actually pass into this component And that's the number of star ratings we want to have no we all might be used to have like a five star rating system But you might want to have a one out of ten rating, right? And we're going to use stars in this but you could that's just because when I put this down here We can see this is our array and we're going to create the from number of stars this little thing here Just converts that number of stars to an integer instead of being a string by default The props are going to be passed in as attributes So they're going to be coming in as strings some people might call this a down and dirty way of doing it instead of doing like a two-inch or whatever But this is just an easy way to convert it So whatever the number of stars is that you passed in let's say it's five because you're used to a five star rating It's going to loop through those keys Which is the first part of that and it's going to map it out to a bunch of spans With this hex value in it, which is the hex value for a star We're going to give it a class name of star We're going to get a give it a key of n plus one by default arrays are zero based So we want it to be one two three and four We also want the data value of that star because we're going to use that in how they're rated We're going to make the data value one through whatever We also have a couple of things here the on mouse over event is set and the on click event is set for each one of these stars So as we hover over this we're going to want this hover handler and star click handler So let's take a look at the hover handler So here's the hover handler and all it does is the same thing that the set rating kind of does Except for as you hover over it it checks to see which Which star you're on and it gets the data set value This data value here It gets that and it does the same thing it says if you're hovered over number two Then we want to set number one and number two to yellow and all the rest of them to gray And if you move over and hover over three Then the first three become yellow and if you move back and hover over just the first star Then only the first star is yellow and all the rest of them are gray, right? Just the way you would expect a star rating system kind of component to behave The last thing is this star click handler So when they actually click on one of those stars What we want to do is we want to get the data set value of that star that you just clicked on And we want to set the state of the current rating to that rating And we're also going to do We're going to prop this up. So we're going to send this back to on click We're going to emit that event back up to the parent So the parent can do something with it because we don't know if the parent wants to save it or not But the first set state this current rating all that does is that means that when you mouse off of it It goes back to whatever the current rating is Okay, and the current rating is now Whatever you've just clicked on so let's say the original current rating was two So we had two yellow stars and three gray stars assuming that the number of stars you wanted was five Okay, we've got two yellow stars and three gray stars now when you hover over it it's going to hover up and One once you hover over one one is the only one that's going to be highlighted It's the only one's going to be yellow and there'll be four gray stars And as you hover up two will be turned yellow three will turn yellow Four will turn yellow and if you click on four Then it sets the current rating to four so that when you hover off Four stay highlighted and it doesn't go back to whatever the current rating was by default If you don't click on anything and you hover over it it'll turn them yellow as it goes But then when you move back off of it It's going to set that rating back to one or two or whatever the whatever the last rating was that was clicked on But we do want to tell the parent. Hey, they've checked. They've selected a new rating. They've checked a new rating Do whatever you want to do with that and pass the rating up to them Okay, and in this case our page is going to actually save that to a database so That is the rating component in a nutshell um We'll do a little bit more with it Um here in just a minute when we start to consume it All right. Now we've got our rating component. Let's go ahead and put this on a page now This is just my personal preference, but inside of source what I'm going to do is I'm going to create a new folder here called pages And this will hold all my page components In this case, this is going to be They're going to be Dealing with rating pages So I'm going to create another folder called rating Then I'm going to create a file in here And we'll call this rating page dot jsx And we'll also create a style page to go or a style Sheet to go with it So we'll call it rating page Dot css if I can type all right Now and the css We'll get back to that in just a minute, but Let's use let's see how we're going to Um Consume this rating component again. I'll just cut and paste all this in and we'll talk about it So I'm bringing react component from react Um, I'm also bringing in that bruster ref from the firebase um Thing that we just set up I'm bringing in the star rating component from components radar star rating than when we just created I'm also bringing in the rating page css So let's go ahead and take a look at the css real quick because it's pretty self-explanatory And I don't want to get bogged down in the css for it But I do want it to I do want it to be there So I want to get it in there and then you can copy it So it's just pretty straightforward. I've got a rating form a heading for the rating form that I want the font size To be a little bit bigger. I'm going to set the background color in the heading to black and set the color to white So I can make kind of a for me looking form. None of this is Super out of the box thinking Um, I'm not a designer Just wanted to look nice enough that you can actually tell what it is Now back to our rating page We've got our rating page class that extends components We're going to get props from and send props back up to whoever's consuming us Like you do I'm going to set the state to these initial values the name description rating and the user So the name is going to be the name of the beer that they're rating the description They can put anything they want in there like really spicy Stout or this is a really citrusy Hoppy IVA whatever The rating is going to be initially set to zero, but That's just because we don't want any of them highlighted And then the user we're actually going to get from the octa react SDK, which is why we brought in with off Okay, and we'll see that at the bottom If you've never seen higher order components before with off as a higher order component They're going to wrap this whole rating page component in when we export it so We've got our component did mount and one of the first things this is going to do is it's going to make a call to an async operator on the off package that we just brought in the with off So we're going to run this get user and it's an asynchronous operation So component did mount needs to be asynchronous asynchronous so we can use await And then we're going to set the you set the state's user to whatever the user's email is That way we can get it back out later We know the user's email is going to be unique. So Now Here's our basic component. We've got our form rating form. We saw that from the css This is going to be wrapped and we've got a heading that's going to be black background with White text that says rate of beer It's got a beer label and then the text name is on this change This input is going to run this handle change event And same with the description it's going to run this handle change event and i'm just using a text area Same thing with this The class name is going to be the rating and then we're going to put the label in there that says rating But we're going to put the star rating component in there And we're going to say the number of stars that we want to use remember that was a problem We passed in the number of stars is going to be five So it's going to display five stars the current rating is going to be zero when we when we display it And then the on click event is going to handle this This dot set rating. Okay, so that on click event that we had in here that gets bubbled up This props dot on click The rating page is going to say whenever that on click event is bubbled up from the component Handle it with the set rating Okay, so now We've got our Our submit button for the with the on click save rating We'll get to that in just a second. But none of this is groundbreaking except for this This is the the only stuff you're going to care about for the rating component that you've just created So we've got star rating We've got number of stars current rating that we're passing in and we're also passing in a handle to this on click event So that the star rating component can actually bubble that thing back up that on click event call it with the rating Okay, now Let's look at some of these events So we've got the handle change and all we're going to do is we're going to set the state In the state whatever the event targets name is to whatever the event targets value is This is a cool little trick if you have a bunch of Forms that you want their names to line up with their values in the state It's pretty straightforward because this has a name of name And it's going to line up with this here. So all I have to do is say This dot set state whatever the event target name is and the value Okay, so pretty straightforward But it's a neat little trick instead of having to say handle name change handle description change that sort of thing It would be okay here because we only have two fields But if you had a bunch of fields it'd be kind of rough And then we've got a set rating that just takes in that rating and sets the state's rating to whatever rating you just clicked on And that event because that's what we did we set the on click event to run the set rating And the set rating is going to pass up whatever rating we clicked on In this case like four if I moved over and clicked on number four It's going to pass four up And then the Set rating up here is going to run with four and it's going to set the state Now the last thing is this save rating that's going to get that Brewster rough And it's going to push a new value on it And it's going to set that value to whatever this dot state is because basically what we're going to do is take this state as a JSON document And push it onto a collection of JSON documents in the Brewster in that Brewster ref ratings collection in firebase And then we're going to actually push onto the prop histories. We're going to on the history We're going to move over to the ratings list page, which is what we need to create next That's going to take us so basically once you've added your beer name you've added the description You've clicked on whatever you want it to be Then you click save it pushes it up to firebase and then it takes you to a rating listing page This is this shows you all the beers you've rated to date And so that's the next thing we need to create is that ratings list page Okay, so the last thing we're going to do is we're going to create a listing page for all the ratings that this user has created So up in our pages, we're going to create a new folder I'm going to call this folder uh rating list and this is where all the Stuff for rating list pages is going to go in this case We want a rating dash list dot css file And we want a rating list rating Dot jsx file Okay Now in the css All i'm going to do is i'm going to set some styles for this table That we're going to display the ratings in Voila nothing super complicated here. I'm setting the table with 80 percent blah blah blah Okay now Here's the actual component So let me go ahead and cut and paste this from My clipboard over here So again, we're bringing in with off because we're going to want to wrap it with off Which I probably didn't mention when we exported it before we just exported that default with off and wrapped it wrap the rating page with the with off that way we can get to this props dot off dot get user Same thing here We're going to wrap this in the with off and when we export it We're going to export it as a with off Then we've got the bruster ref To get access or a reference to the firebase database And then we've got our css file So we've got a props. We've just got an empty array of ratings and we've got the user So the first thing we're going to do is we're going to run this const You're going to get this const user again. This needs to be async so we can use a weight And we're going to do props dot off dot get user Again, this comes from this with off component. It's built into the react sdk from octa Then we're going to take the bruster ref and we're going to order it by child user And we'll make sure that it's with the Where the where the user is equal to the user's email Okay Then on value. So this is the way Firebase works It's a real time asynchronous database. So Here we're going to Order by child and on that value. We're going to Get the snap value And we're going to put it into a response Then we're going to loop through each one of those ratings that we got in the response And we're going to push that onto our ratings array So push that onto the ratings array Now you might think Dude, you already created a ratings array up here in state that was empty Why create another one again here and then set the state down below? This is just because remember that React is set up so that anytime you change the state It's going to update the ui and we don't want to do that We want to push all those ratings into an array and then push all the ratings set all the ratings in the state All at once So that we only redraw the page one time if you've got 100 ratings in here you're gonna if you push into that State ratings array you're going to redraw the page 100 times You don't want to do that. You just want to redraw the page one time with all 100 ratings. Does that make sense? so Now that we've got the ratings in the set state All we need is our component. So we've got our table here We've got the beard description the rating and we're just going to loop through each one of those ratings and map it right out So with that rating we'll do the rating id for the key Remember if you're looping through anything in react you need a key for it Okay, so we've got our rating name our rating description and our ratings rating Our rating rating Okay So Now all of that all of that should be Ready to go we should be able to display this page and log in and start making some beer ratings. So let's check it out Okay So if you decided to stop the video there And try and run it by yourself. You may have noticed We don't really have any ratings to all of this. Remember in our app We just actually output rating page as a text thing, right? We didn't use the actual component So now we need to go back and actually add the the routing to these components So the way we're going to do this is we're going to go back to our app.js file And we're going to change it completely Well, not completely Let me just save this before I forget So in our app.js This is what it should look like now. So we've still got our route secure route and all that stuff But we brought in the rating page and the rate ratings listing page and we've got our rate Link to go to the ratings and the rating list to go to the listing of the ratings because I don't necessarily want to have to go Through the ratings page to get to my ratings list. I mean, so I want to log in and go to my ratings list, right? So we still got our home page component that doesn't really do anything but Output the text home page Okay, we've got a secure route to the ratings and we secure route to the ratings list We've still got our route for implicit callback But the component's going to be handled the exact path to slash rating is going to be the rating page component And the rating list path is going to be handled by the rating list page component Now the only other thing we might need to do Just to make it a little bit prettier this app.cs We don't actually have a whole lot of styling in here that goes with our stuff So let's just delete all of that and we'll put in some stuff to make Our page looked just a little bit nicer So we're going to set the background color of the nav to 3333 We're going to Set the font size of the navigation to one and a half Set a couple of link colors Nothing super groundbreaking here, but this just will make our our app look a little bit nicer So now you can actually run this thing All right Now here's the moment we've been waiting for If I haven't screwed anything up, we should be able to run this thing and start rating some beers So if I run a yarn start It should fire me right up into my application Now since I had never logged out before I'm not going to need to log in again So but you can if you want to you could come over here to your octa Organization and run a log out And you could log yourself out of the application But on a Let's rate boulevard wheat since I'm from Kansas City This is a good Middle Of the road wheat beer Not too Sweet and here's my rating now when I hover over it, you can see it turns if I come back off I haven't actually set a rating yet I set it to four Then I can submit the rating and it takes me to my ratings page and it gets that stuff from the database And if I come over here to my bruster database, we'll see there's actually a new rating and created the ratings collection for me Um, it's got my good little the road beer. Not too sweet boulevard wheat rating for and a leverant at gmail.com. That's me Okay So there I am with my ratings And I can come back here and rate a couple more I had uh bully porter in here, which is a good It's winter time here in kansas city. Porter's are great for winter time. So, uh Porter Nice creamy flavor with good And I will give it a three out of five Nice So now what you've learned is not only how to create a react component that you can reuse In several ways because you see we're reusing it At a couple of different places But you you've actually created this component that you can reuse You've hooked it up to a firebase real-time database And you're saving and reading to that database And you've set up authentication using octa Very quick very simple very easy to do Now the challenge for you Reuse that component again And just put it in here in the rating allowing the uh not allowing the The person to change the rating and having to go in to the form to change the rating That's the challenge for you. Um Other than that, um we create content if you like this content here, um Make sure you hit the like button down below and subscribe We release new content every Tuesday and Thursday So, um, make sure you subscribe to the channel hit the little bell icon so you get notified when new content is coming out And uh, we'll see you next time