Placeholder Image

字幕列表 影片播放

  • all right, guys.

  • So in this tutorial, Siri's we're going to be creating an ever note clone, and it's going to be almost a fully functional Evernote clone.

  • There's going to be certain features that we're not gonna be implementing in this tutorial, such as users, although I do have another video previous video that I created where we do go over that.

  • So if you'd like to learn more about that, there is a link in the description below for that video, Siri's.

  • But in this video, we're just gonna focus on Evernote.

  • We're gonna be using fire base, and we're going to be using a library call to react Quill.

  • So I think it's time for us to go ahead and demonstrate what it is we're going to be making in this app so I can come over here and click new note.

  • Enter a new titles.

  • Call it new note.

  • I submitted the know, and as you can see it, select that automatically, and over here on the right, we have a text editor and we can edit the title or just call it like new note, too, and then I can come down here.

  • You can see it updated live, and I can go heading one.

  • This is a header.

  • And again, you can see it updates live over here.

  • And so I can, you know, just this is some Maur text, you know, just a show that we can have different size texts and everything.

  • Great.

  • Another note would just say test list and come in here and create a list.

  • You know, one, that two three agency, we can create lists.

  • We can make text bold.

  • Um, and it updates live over here, and I can go through and select each note.

  • I can also delete my notes and it says, Are you sure you want to delete note to a click?

  • Yes.

  • And it goes ahead and select the previous one automatically for me, and I'll delete this one as well.

  • And that is what we're gonna be making in this tutorial, Siris.

  • So I'll come over to here to Firebase.

  • You're gonna want to go to console that firebase dot google dot com.

  • Make sure you create a firebase account.

  • You can just go to firebase creating account.

  • And once you have the account, goto consul dot firebase dot google dot com and you'll be presented with this.

  • Go ahead and click add project and inside of here we'll just call it Evernote Clone.

  • And make sure you check this box and this box and click create project.

  • Once that finishes, go ahead and click.

  • Continue and you'll see this dashboard screen over here on the left click database.

  • Now, Fire Base has two different types of databases.

  • They have cloud fire store and the real time data base.

  • Real time data bases, their older original database and fire stores there.

  • Newer database.

  • So that's what we're going to be using when you click.

  • Create database.

  • Just make sure you click it under cloud fire.

  • Sore and not really time database.

  • So let's go ahead and click.

  • Create database.

  • Go ahead and start it in the test mode.

  • Click next.

  • Go ahead and click the, um, select the location nearest you and then done and then wait for that to finish.

  • Once that finishes, you'll be brought to this screen right here.

  • This is going to be basically a data table that shows a visual representation of your data inside of the database.

  • Now, if I click this rules area here, you can see that it's very similar to Java script.

  • It's a little different, but it's got similar syntax and you can see here says, allow Reed, right?

  • And what that saying is, you convey both read and write from this, no matter what.

  • If you're not authenticated, that it doesn't matter who you are or any of that you can read and write to this database.

  • So in a production environment, you're not gonna wanna have this you're gonna want have very strict access rules, and you're gonna want to set up authentication for your app.

  • But we're not gonna be doing any of this in this tutorial.

  • I do have a video where I do go over authentication, creating log in forms and sign up forms all through fire base.

  • I will include a link in the description for you to watch that tutorial.

  • Siri's, which includes those topics.

  • But we're not gonna go over that in this particular video, So just keep that in mind.

  • And so when we use and we set up our firebase within the APP itself, we're going to be exposing our a p i ke.

  • So if anybody were to get a hold of that.

  • They could just use your, um, your fire base.

  • So what I do is I delete my key once I'm done with the tutorial, Siri's Or just don't show anybody.

  • You're a P i ke either to either of those.

  • You'll be fine.

  • Just make sure you don't give away your a p i i ke to anybody.

  • So now that that is now that that's been said, we'd go to project overview here.

  • And then you go ahead and click this this little icon right here, that looks like to html brackets.

  • And when you click that just, ah, name this Evernote tutorial.

  • Leave this unchecked and click register app.

  • And then once that finishes, go ahead.

  • And I want you to copy this object right here.

  • Don't include the script tags.

  • Just copy what's inside of here.

  • And actually, you don't have to copy it right now.

  • Well, uh um, just keep this in mind.

  • Keep this window open.

  • Keep this right here, and we'll get back to this shortly.

  • Let's go ahead and install all of our dependencies for the project first, and then we'll paste this into our application.

  • So we will be using create react up in order to initialize the react application project.

  • So go ahead and go to this link.

  • I will include it in the description.

  • So once you get to this link, you'll see instructions on how to install create rack react app.

  • It's extremely simple.

  • And it is a Facebook tutorial on how to do it.

  • It's very, very short.

  • Very, very simple.

  • Go ahead and install that.

  • And once you do have that installed, open up your terminal window.

  • I'm gonna be using windows.

  • You can use any terminal window from either Lennox Mac or Windows to follow along.

  • But let me increase the font size of this really quick so you can see all of this.

  • Okay, that should be quite a bit better for you.

  • So go ahead and navigate to wherever you want your project to be, so I'm gonna be inside of my documents folder or actually drop box.

  • So go ahead and just navigate wherever you want your project to be, and I'm gonna say, create react ap just like that.

  • And then you're gonna want to put the name of the app, so to say, ever note Evernote tutorial.

  • And then you click Enter.

  • It's going to actually go ahead and install this.

  • Ah, this project directory tree, Um that's basically ready for you to get started on react.

  • So let's go ahead and wait for this to finish.

  • Okay?

  • So once that finishes, we're gonna want to go ahead and install our first dependency.

  • We're going to be using material.

  • You I for this, which is going to be a library that allows us to make styling very easy.

  • It's gonna handle a lot of things that just includes react components that we can use that makes things look pretty by default, essentially so that we can focus solely on react and not have to worry about writing a ton of CSS.

  • So let's go ahead and start.

  • We're gonna say NPM install at material hyphen u ie slash core.

  • So go ahead and install that.

  • And once that's done, go ahead and do NPM install at material hyphen u ie slash icons and this is going to give us a ton of icons to be able to use, which I think we're only gonna be using two icons the trashcan for delete and the pencil on paper for edit So go ahead and wait for that to finish.

  • Okay?

  • And for our text editor will be using a react quill, which is an open source library.

  • So we will say npm install, react, hyphen quill, Q u i l l Go ahead and install that.

  • And finally, we're gonna go ahead and install fire base, so npm npm install fire base.

  • So let that finish really quick.

  • All right, so that's gonna be all of our dependency is here.

  • So I'm gonna go ahead and clear my console and actually just type in N p m space start to go ahead and get react up and running just to make sure everything is running smoothly.

  • So once this pops up also, go ahead and open up my console just to see if we have any errors and we do not.

  • So it looks like everything installed properly.

  • So over here, go ahead and let's make sure we have this.

  • Ah, this stuff copied here.

  • And now that we have our firebase config copied, let's go ahead and put it inside of our app just to get that part knocked out.

  • So I don't have to worry about it in just a moment.

  • So I've got my directory opened up now and I'll go into my source folder here, and you want to open your index dot Js file?

  • So we're gonna want to do a quick require.

  • So we're gonna say const firebase is equal to require and then inside of here, we want to put inside of quotes firebase.

  • So a requiring firebase.

  • And then underneath this, we want to just go ahead and say require and then in quotes, firebase slash fire store hopes.

  • There we go.

  • Cool.

  • So under this, you remember we copied that stuff from fire base, so make sure you have that copied and let's go ahead and pace that here.

  • Now, I'm gonna change of Arctic const.

  • And I'm gonna get rid of these two comments right here, all right?

  • And what I like to do just to make it it might not actually be cleaner, but this is the way I like to do.

  • I like to get rid of this variable here, scared of variable, and then just take the actual object itself and paste in between the parentheses there.

  • That's just how I like to do it.

  • But you could do it either way.

  • So now we have firebase initialized inside of our application.

  • I'm saving it right now, and I'm coming over to the react up just to make sure I don't have any errors and says here it looks like you're using the development build a fire based Js sdk.

  • Now, this is perfectly fine.

  • This is saying we're using the development build, which is fine because we are in development now, we're gonna be getting this message throughout the entire tutorial so we can safely ignore this particular message.

  • So as you see it here in the council as we work through the tutorial, just ignore this.

  • It's fine.

  • All right, moving on.

  • So the first thing I I like to do is I'd like to come in here and delete all this default stuff that comes with the default react app.

  • So I go into ap dot Js here and inside of this return.

  • Actually, I'm gonna get rid of this whole thing and make it a class, so we'll come in here and say class ap extends react dot component.

  • And now we have a class instead of a function which the class needs to actually, um needs to implement the render function and inside of the render function, you have to return some HTML.

  • So for now, I'll put in a dip that just says hello, world Cool.

  • So I'll save that.

  • And let's see what we end up with really quick.

  • We have hello world here.

  • Cool.

  • So as most of you probably know, the way that this works is inside of the index dot Js file.

  • We have this app element which is represented by this AP class here because we're we're importing it right here.

  • And what this is doing is react dom dot rendered takes whatever's inside of here does some react magic to turn it into actual code that, um basically we write it in a react way, and then it takes that react way and turns into actual code that the browser understands.

  • And then it pushes it into document dot get element by I d route.

  • And if I come in here, you can see if I go to elements.

  • Do expand this scared of this, go inside a body here.

  • You can see there's this div here with an idea of root and everything inside of the react application is going to get injected inside of this Div called route.

  • So you don't actually have to.

  • You know, I really want you guys to understand, react.

  • So let's go into the public here.

  • And inside that index dot html, you can see that that div is actually right here with route.

  • So what I want to do just to kind of show you and get you really comfortable with this sort of idea is instead of call it route, I'm gonna call it, um, ever note container.

  • So go ahead and call his Evernote container and I want you to save it.

  • And I want you to take that, copy it and paste it inside of here.

  • So now we're injecting it inside of a difficult Evernote container instead of route, and I want you to save both of those files and come back in here and notice that it works.

  • Still, if you come back over here, you can see that that did has an idea of Evernote container.

  • So that's just to kind of get you a little bit comfortable with how react is working in that it's not entirely magic.

  • You can actually come in here and change some of these things.

  • It's not mandatory, and you can actually extend it to This is all open source.

  • You don't have to be afraid of react.

  • All right?

  • There's actually one more thing we need to add.

  • So inside of the source folder, create a new file call that helpers dot Js and inside of here, we're gonna pay some stuff, go to the source code.

  • The source code is going to be linked in the description of this video.

  • Go ahead and go to that source code.

  • Find the helpers dot Js file and paste this in.

  • So what this is going to be we have a D bounce function, which is going to be helpful for us, because what, When we are typing inside of the text editor, we're going to want to update the database alive.

  • However, we don't want to send, um we don't want to send requests.

  • Every every single time we type a a letter.

  • We're gonna want to wait for the user to stop typing for about a second or so, maybe two seconds before we update the database so that we're not just going crazy on the database with all these calls is http calls, So we're gonna be using a deep balance function right here.

  • And then we're also gonna have this export function.

  • Ryu removed html tags.

  • That function is going to be for our preview on the left sidebar.

  • Whenever we see the list of notes were going to, um, we're going to remove the html for the preview and basically react Quill, the text editor library that we're using actually stores its it displays as actual HTML.

  • So we're gonna be saving HTML as a string to the database.

  • So when we display the preview in the sidebar, we don't want to show the HTML tags.

  • That would just look weird.

  • So we have this function here that's going to be removing the HTML from that so we can just see the plain text previews.

  • So for the majority of the application, we're going to be using something called with styles, which is actually going to be from material.

  • You I instead of writing plane CSS.

  • But there is gonna be a little of plain CSS for the AP level project.

  • So go ahead and open up your app dot CSS and we want to go ahead and remove all this stuff.

  • This was just the default CSS that we saw when we first started up our react application with react create, react up.

  • It had the big, you know, react logo.

  • It was spinning around and doing cool stuff.

  • We don't need any of that.

  • So go ahead and remove all that.

  • Go to the source code and in the source code, you'll find app dot CSS.

  • Go ahead, copy all of that and paste it in here.

  • We don't want to worry about CSS and this tutorial, so we're gonna be copying all of our styles from the source code and pasting that stuff in.

  • So go ahead and save your app dot CSS file.

  • Cool.

  • So we're ready to go ahead and get started.

  • So let's go and remove this import logo from the SPG here.

  • We're not gonna be using that.

  • That's just the react logo that's included with the project.

  • So what we want to do is start with the constructor and inside of this constructor, we have to go ahead and implement the super.

  • And then what we'll do is create some initial state so we'll say this stuff state is equal to and inside of this object, we're gonna have three slices of state.

  • One is gonna be called selected note index and that will be sent to know by default.

  • These will be no by default.

  • So selected note as well that'll be no.

  • And then notes which will be the array of all of the notes that we have and that will also be no.

  • So now that we have our initial state, what we want to do is underneath the render function.

  • We want to go ahead and implement the react hook called Component did mount.

  • And what that is is whenever the this particular component, the APP component, is loaded successfully inside of the dom.

  • This will get called automatically by reacted as a life cycle hook that is built into react.

  • So let's go ahead and implement.

  • Component did mount, and we want to go ahead and go into firebase, grab all of the notes, and then set our state with the notes this little slice right here.

  • But in order to do that, we actually have to come up here and import firebase really quick.

  • So underneath all of these imports.

  • Let's go ahead and say, Const firebase physical to require and then fire days cool.

  • So now we have access to Firebase, so we want to say Fire base.

  • And then that's gonna be dot fire store.

  • And I'm actually going to put these on individual lines so it's easier for you guys to see so dot fire store dot collection.

  • What collection is is.

  • It's basically very similar to a table in a database.

  • Our collection.

  • We're going to name notes, so we'll go ahead and name that notes and I'll show you in just a moment what that looks like in that little table.

  • Visualize her on fire base.

  • But for now, just follow along.

  • So Doc collection notes dot on snapshot.

  • Now, what on snapshot is this is actually very interesting.

  • This is very powerful on Snapshot is goingto automatically get called whenever this note's collection is updated inside a firebase.

  • So whenever something gets updated inside of the notes collection and firebase, the function that we pass into on snapshot will get called and that specific function is going to be passed a an argument automatically that we're going to be calling server update.

  • So that's gonna be the argument for the function that we're passing into this.

  • And let's go ahead and create a constant old notes, which is gonna be our array.

  • So we want to go ahead and set that equal to server.

  • Update dot Docks and Docks is a property of the server update parameter.

  • I'm sorry.

  • Doc's is a property of the server update object that's getting passed into our function, and we want to map it.

  • And so, if you're not super familiar with the map function in Java script, I've got a really good tutorial on that.

  • Go ahead and look in the description and watch that tutorial is very short, but it's got a visual representation of how map works inside of JavaScript.

  • And if you're not very familiar familiar with that, I highly recommend you watch that tutorial really quick because we're gonna be using it a lot in this tutorial series.

  • So let's go ahead and say for each doc we want to create a concert called Data and said equal to doc dot data, which is a function which grabs the data from the dock, and we want t o add a property to our data object that we're creating called I D.

  • So data I d will literally just be equal to doc dot i d And then we're going to return that So we'll return data so we successfully have an array of all of the notes, and then we want to go ahead and update our state so they stop set state and inside of here.

  • We want to update the notes slice of our state with our notes that we just created right here.

  • So we're setting our notes state equal to this array that we were just mapped right here.

  • So we don't have anything inside of We don't have any notes, so we can't really see what this looks like yet, But what I want to do is go ahead and create a console dot log statement, consul dot log notes and want to save it because I want to show you guys what this looks like.

  • So as you can see, we come here and when I go to the console, we have an empty array, and that's simply because we don't have any notes inside a firebase.

  • So let's go here to Firebase and I want you to go back to your database and you can see this table here.

  • So when we add a collection, remember, we called that collection notes, okay, and we click next.

  • And then for each note, that's going to be a document.

  • And it'll have this auto I.

  • D and the doctor.

  • The notes are gonna have to Well, actually three properties.

  • The first property is going to be a title.

  • And what is called a test note from Fire Base, It will also have a a body, so we'll call it body, and then that's going to actually end up being a string of HTML.

  • So in here, I'm just gonna put an H one tag hello world and at closing h one tag.

  • And then it will also have a time stamp.

  • But I'm not gonna worry about the time stamp here in this particular case, because we're gonna automatically generate that time stamp.

  • So click save, and I can see that we have a note here.

  • And if you remember, when I said whenever the notes collection is updated, it's going to automatically call that on snapshot function that we're passing a function into so Let's go back over here.

  • And as you can see, it went ahead and actually ran that function automatically simply because I updated the notes, Uh, the notes collection.

  • So you can see here now that we have a title I d and body of a single note that we just created inside a firebase.

  • So with that being said, I'm gonna go ahead and keep this council dot log notes here just for reference.

  • And then let's move on.

  • So I'm gonna actually remove all of these tabs.

  • Appears so I can keep everything clean and inside of the source folder.

  • I want to create actual want to create three other folders.

  • So we'll call the first folder editor the second folder we will call, um, sidebar.

  • And then the third folder will call sidebar item.

  • Now, let's go ahead and get rid of, uh, let's go ahead and knock this boilerplate stuff out.

  • So inside of editor, create a new file called editor dot Js and you're gonna want another file called stiles dot Js.

  • And you're gonna want to do that for each of these.

  • So new file sidebar dot Js and a stiles dot Js and then finally.

  • Sidebar item dot Js and a stiles dot Js for that one as well.

  • So let's go inside of each of these and just create the classes and the imports that we're going to need for each of these so that we can start focusing on the functionality.

  • So start by going into your editor dot Js and I want you to find the editor dot Js file in the source code and which had a copy and paste these imports here.

  • Once you have those imports, go ahead and come down here and typing class editor component.

  • That's what we're gonna call this class.

  • It's going to extend react dot component and inside of here will have a constructor that calls super.

  • And then we have to go ahead and have the render function and lips, and the render function has to return some HTML.

  • So what I will do is inside of here.

  • I will just simply say hello from the editor, and that's gonna be our class are boilerplate code for our class.

  • And what we need to do at the very bottom here is actually export this, but we're going to use with styles so I'm gonna explain how that works.

  • Just give me a second.

  • Let's go ahead and say export default with styles which you can see we are importing right here from material hyphen u ie slash core slash styles.

  • So export default with styles, Which takes a argument because it's a function and that is gonna be styles.

  • Now we're passing styles into with Stiles with Stiles is actually going to return yet another function.

  • So we'll go ahead and immediately invoke that function that it returns with our editor component.

  • Okay, So what styles is is it's actually gonna end up being a function that we're going to put inside of the styles that Js file here.

  • You don't have to worry about that.

  • I'm actually gonna have you go ahead and copy that and paste it inside of here from the source code.

  • But I want you to understand how this is working so inside of here, there's going to be a function that has a bunch of, um, a bunch of classes that are gonna be there going to represent CSS styles here.

  • It's taking those styles and then basically creating an object called classes or a property and react.

  • It's actually props, so it's creating a prop called classes, and we're gonna be able to access those classes from the It'll look like this.

  • It'll be classes.

  • Will this stop prop stop groups?

  • This not props dot classes dot class name, so that's gonna be really helpful for us shortly.

  • So go ahead and save this.

  • Let's knock out the boilerplate code for the other two components, so go ahead and go to your sidebar dot Js file and inside of here, go ahead, go to the source code, copy the imports, paste the imports inside of here and then class side bar sidebar component extends react dot component.

  • And again, we'll want a constructor here that calls super and then under here.

  • I'll just copy from my previous file here the Render function and then, instead of hello from editor will say hello from Sidebar.

  • And then again, we'll say export default with Stiles.

  • The first argument will be styles, and the 2nd 1 will be our sidebar component.

  • Okay, and let's knock out the final one so under sidebar item dot Js.

  • Go ahead and go into the source code and copy the imports for it.

  • Paste the imports inside of here and then go to go ahead and typing class sidebar, item component extends react dot component.

  • And, of course, it's gonna have a constructor here with super and then the render function, which I will again copy from the previous one and instead of sidebar will say sidebar item.

  • So now we have the boilerplate code actually need to do the, uh, the exports of export default sidebar item component?

  • Nope.

  • That's gonna be with Stiles Styles is the first argument.

  • And then the sidebar item component No.

  • All right, so now we got all of that done.

  • So the second thing that we want to do is you want to go into the source code, grab the styles dot Js file for each of these three components and paste them in.

  • So I'm gonna go ahead and do that right now.

  • You go ahead and do it as well.

  • So I'm gonna start with my style's dot Js file for my editor.

  • So under under editor here, inside of styles dot Js I simply paste this.

  • And as you can see, um, Stiles is a function with a, uh argument called theme that's passed into it automatically by material You I which returns an object of basically CSS classes and styles.

  • So go ahead and save that and then move on to the sidebar styles dot Js file.

  • Go ahead, copy it from the source code paste that in and then do the same thing for the styles dot Js inside of the sidebar item.

  • And once you have all of that, we have all of our boilerplate code so we can actually go ahead and get started on the fun stuff.

  • So inside of our app dot Js file I'm actually gonna get rid of all these tabs inside of our app dot Js file inside of render.

  • I want to actually render out our new components.

  • So in react, we can only return one component, but we can have components inside of other components or weaken.

  • Let me rephrase that we can only return one element, but we can have other elements or components inside of that element.

  • So well, great one parent element and it'll be a death here, and I'll just go ahead and give this a class name of let's say, app container and then inside of here.

  • Let's go ahead and put in our sidebar component, which we are gonna need to import.

  • So let's go ahead and import sidebar component from And that will be dot Ford slashed sidebar slash sidebar.

  • Might as well go ahead and do the same thing for the editor.

  • So import editor component from dot ford slash editor board slash editor.

  • Okay, so we don't need to import the sidebar item component because the sidebar component is going to use the sorry sidebar item component.

  • So we don't have to use that inside of ap dot Js.

  • So we have that.

  • And let's go ahead and also put our editor component inside here.

  • Cool.

  • So let's save this and see what we end up with.

  • All right?

  • Cool.

  • So the whole bunch of nothing, it's still compiling on my end.

  • Let me There we go.

  • Cool.

  • So, as you can see, here we have hello from Sidebar and hello from the editor.

  • We also have a few warning messages, but we're not gonna worry about that.

  • That's just saying, Hey, you have imported some stuff, but you're not using it says no unused bars.

  • That's because we went ahead and knocked up all those imports before he wrote the code.

  • So just don't worry about these warnings right now.

  • But as you can see, they are importing and displaying the components as expected.

  • All right, so what I want to do now is I want to go ahead and demonstrate the react quill.

  • You know what?

  • It comes with the features of it and how we're gonna be using it inside of this application.

  • But before we do that, I need you to go to the source code.

  • So go to the description, go to the source code going to the public folder, and then the index dot html file and then what you'll see in the source code at the top of inside of the header tags at the very top, you'll see a link, Um, a link tag with I'll show you exactly what it looks like here.

  • Um, So you it'll be right here.

  • And this is what this is is it's the styles for react, quill.

  • It's the style feet.

  • So go ahead and paste that in exactly where you see it.

  • Here, save it.

  • And now we have access to the CSS that we're gonna need for react, Quill.

  • So now that we have that, I'm gonna go ahead and move this window over here and actually bring it a little bit further.

  • Oversee can see everything.

  • Go ahead and have your editor dot Js file open.

  • And I'm gonna start moving this html onto its own lines.

  • Just make it look clean.

  • And I'm gonna get rid of hello from the editor.

  • Okay, So the first thing I want to do here is inside of this render function at the top.

  • I want to go ahead and d structure out.

  • The class is variable.

  • Um, so I will do that now, so const classes equals the stock props.

  • So now I have access to that class is variable from the stock props, and I want to go ahead and use that here.

  • So we're gonna give this parent, def.

  • Here it claps name.

  • And the class name is gonna be equal to classes dot editor container.

  • And now I want to go ahead and throw in this react quill element and save and let's see what we end up with over here.

  • So, as you can see, we have a text editor inside of here.

  • Now, it looks kind of wonky at this at this moment, and that's just due to the styles, because we're gonna have a little extra room for the sidebar.

  • But this sidebar will be over here, and, um, right now we have Ah, hello.

  • From the sidebar above it.

  • So it looks a little weird right now, but that's perfectly fine.

  • We'll get to that in just a second, but I just wanted to come in here and kind of show you what a react Quill comes with right off the bat.

  • So as you can see here, it comes with all of what you need in order to get started with a text editor.

  • Now, it also has some built in functions.

  • Um, so I'm just going in here and just kind of showing you that has all this stuff built in.

  • All right, Cool.

  • So, um, it comes with some functions that are gonna be really helpful for us when trying to use this inside of our application.

  • So now that I've kind of demonstrated what that looks like, I think it's time to go ahead and start implementing some of the functions.

  • Now I want to go ahead and start implementing these functions.

  • While it does look kind of weird.

  • So we're going to be using the console to do a lot of logging here.

  • So just go ahead and have your consul open.

  • And, um, let's go ahead and get started implementing these functions.

  • All right?

  • So the first property we're going to utilize from react quill is value.

  • So the value we will set equal to this does state that text.

  • And, you know, we've got this state variable here.

  • So what we're gonna do is whatever the state, whatever the text state is, it's gonna be the value property of React quill.

  • So as we update the state, it's gonna update the react quill value property.

  • The second thing that we're gonna throw in year is on change, and we're gonna have a function called this update body.

  • So I'm gonna put this stuff on its own line really quick, make it look clean.

  • So we have value and on change.

  • Now, this dot update body is going to be a function that is going to be a synchronous that's going to set some state, and once the state updates, we're gonna call an update function that is going to do some stuff I don't want to talk to far ahead, so let's go ahead and implement update body.

  • So I'm gonna put update body directly under my return.

  • Sorry on her my render So cocoa to my render function and create a variable called up a body which all set to a function.

  • Now, this is gonna be in a synchronous function.

  • So go ahead and add your racing keyword, and it's going to accept a value, and we're gonna do stuff with that value.

  • So, like I said, we're going to set some state, but we're gonna wait for that state to update.

  • So we're gonna say, await this upset state and the chunk of state that we want to update is gonna be text.

  • We're gonna update it with Val.

  • And once that state is updated, we're gonna call this dot update, which we do not have yet.

  • So underneath update body, we will create a function called update.

  • Now, this is where things get a little, uh, somewhat complicated.

  • So I'm gonna do my best to explain it for you.

  • So we have a function called update and we're going to set it equal to de bounce, and we're gonna pass a function into the balance, which is gonna be the actual function.

  • So I'll explain this just a second.

  • I just want to get this out of the way.

  • Okay, so D balances and our helpers.

  • So if I go to helpers, that Js we imported, um, we imported that right here.

  • So d bounces in our helpers here.

  • And what we don't want to do is every single time the value changes go to the database on fire Base and update it because what that means is has the users typing in their text every single time they type a letter or character are a backspace or anything at all.

  • It's going to make an http requests to the database, and that's gonna get a little crazy.

  • So what we want to do is we wanna wait for their user to stop typing for 1.5 seconds before we call the database.

  • And what this allows us to do is be a lot more efficient with with Our resource is So this is called d bouncing.

  • And we are basically this helpers.

  • Let's go back to us.

  • I can show you this helpers function.

  • De bounce is going to take a function.

  • Okay, so that's why we're passing our update function to R D bounce function.

  • And what's gonna happen is whenever we're typing, each time it tries to call update again, it's gonna basically, in essence, cancel the last one until the user stops typing for at least 1.5 seconds.

  • And when they stop typing for 1.5 seconds, the function will actually go all the way through and update will complete.

  • So hopefully that makes sense.

  • So the second parameter that we want to pass to this day bounces the amount of time.

  • And like I said, 1.5 seconds, which is going to be 1500 milliseconds.

  • So what is it we want to actually do with our update function?

  • Well, for now, I just want to So we'll say.

  • Come back later.

  • For now, all I want to do is log locks and stuff so I can demonstrate the D bouncing effect so we'll just come in here and say it counsel that log updating database.

  • And let's see if this works the first time through All right.

  • So I'm coming in here into my text editor, and I'm just typing some stuff, typing some stuff, typing, typing, typing.

  • And now I'm gonna stop typing.

  • Okay.

  • You saw that.

  • I stopped typing for 1.5 seconds, and then this function appeared.

  • It did not appear 20 times since I typed, you know, 20 times or whatever.

  • It only appeared once, and it waited for me to stop typing.

  • So that's, um that is something that I wanted to teach you guys is de bouncing.

  • And it's very important for this tutorial, especially because we're updating a database, um, through the use of the user typing so that could, you know, if we have hundreds and hundreds or thousands and thousands of users and we're updating the database every single time a user types of key, that's gonna get out of hand.

  • So we're gonna use D bouncing in this tutorial.

  • Okay, so now what I want to do is start making this look a little better.

  • So I demonstrated.

  • You know what react quill does and you know a little bit about bouncing.

  • So what I want to do now is I want to start focusing on getting the sidebar component set up, and we already went through getting items from the database on, you know, as soon as we load the app, we get all of the notes from the database.

  • So since we already have access to the notes, we might as well go ahead and start working on our side bar to display those notes.

  • So go ahead and go to your sidebar component.

  • Sidebar Js and let's go ahead and get started working on this.

  • Now the first thing that we want to do is go ahead and go under our super inside of the constructor and say this state is equal to and we want to put in adding note, and we'll set that equal to false.

  • And we will put a title which we will set to know by default.

  • Cool.

  • So let's go ahead and d structure a couple of property variables so inside of here.

  • Go ahead and prepare this inside of these curly braces thieve variables that we wanted to structure out are gonna be notes, classes and selected note index.

  • Now, we're not passing these props yet, So since we're not passing these properties yet, Um, it's we're probably going to get an error.

  • If not, then that's great.

  • But we'll go and we'll actually pass Knowles right now.

  • So let's go to the Let's Go to the ap dot Jazz.

  • Let's look, we have notes.

  • Classes is automatically passed in through with styles, and we have selected no index.

  • So let's go ahead and pass those two in.

  • Now we have selected note index so we can just go ahead and go here inside of our sidebar component element.

  • Weaken.

  • Say selected note index is equal to this, not state that selected note index.

  • Come on.

  • Put this on its own line and then the other one waas notes, which we also have.

  • So, um, notes is equal to this stuff ST dot notes.

  • So now we won't get an error.

  • Um, so now that we have these destruction inside of our sidebar dot Js file, I want to go ahead and remove hello from the side bar, and I want to give our, um our parents did hear a class name, so give it class name and we use the classes object classes, that sidebar container.

  • All right, so inside of here, I want to go ahead and add a button and it's gonna be a button with a Capital B, and that's because it is a big up here.

  • I can show you a, um it is a component from the material you I corps, and we're going to use that because it's going to just make it look a little better by default.

  • So we're gonna add a few things here.

  • We're gonna have it on Click and the on click function that we're gonna provide here.

  • We're going to write that function.

  • So for now, what's called a new note be tien click, and that's a function we're going to write in just a moment.

  • So keep that in mind, we'll get right back to that going at a class name and that class name will be classes.

  • The new note beat Ian and inside of here I'm just gonna put the text to say new notes will change this in just a second.

  • So let me go ahead and let's add this new note button click function underneath the render function.

  • So here we will say new note, be tien click physical to function, and for now I'm just gonna have It's a consul dot log and I'm gonna say new bt n clicked.

  • Cool.

  • So let's see what we ended up with.

  • So when we come back over here, you can see that we have this sidebar here, and that's because we already have the styles for it.

  • We just added the container class here, which are all inside of the styles dot Js file.

  • Um, so we have the sidebar container, and we have this new notes, but in here, I'm gonna clear this and I'm gonna click it.

  • You can see now it says new bt and clips.

  • So we know that button is working so below the button still inside of the diff container, but below the button, we're gonna put two curly braces.

  • And what we want to do is we wanna have the ability to add a new note.

  • And if we click on new notes button, we want the new note input Thio, show up.

  • So let's go ahead and say if this stop ST dot adding note for the question mark after we use our turn ery operator.

  • As you can see, we have this adding note slice of state which is false by default.

  • So by default, um, this is not gonna show up, so that's good, because we don't want the user to suddenly see at a new note unless they go and explicitly click that button.

  • So if this does state that adding note, we're gonna do some stuff, we're gonna return a div.

  • You know me.

  • Go ahead and get that.

  • Otherwise, we're going to just go ahead and return.

  • No.

  • Okay, so let's go ahead.

  • Go inside of this Div and put in the stuff that we actually want to return.

  • If this stop adding state, this stuff state that adding notice.

  • True.

  • So the DIV is gonna have an input input, and the type of the input type is equal to text.

  • And the class name is going to be equal to classes dot new notes input, and we're gonna have an on key up function.

  • But first lets out a placeholder placeholder and the place holders just the text that's gonna be inside of the input before the user starts to enter text inside of it manually.

  • So what is the Inter note title?

  • And again we will have a non key up function on key up.

  • And so whenever the user starts typing in there, whenever they lift their finger off of a Kia function will get fired and it gets past the event by default.

  • We want to pass that event to our own function, which we will call this stock update title, and we will pass an e dot target dot value, which is gonna be the target element of the event that got fired off that were passing in from here and the value of that.

  • So we're going to pass that to our update title function, which for now, come down here update title, physical to function.

  • That takes some texts.

  • So but text T X t And for now, just console doubt log.

  • And I'm going to say Here it is and I'm going to display the text that we passed update title.

  • Okay, so let's see here.

  • Go ahead.

  • And I think it's safe to save this.

  • Let's find out.

  • Clear this.

  • See what happens when I click this?

  • We got new Bt and clicked, but it looks like Oh yeah, that's right.

  • We have to actually flip that variable.

  • So when we have new bt and clicked.

  • We need to go ahead new note, Beatty and clicked.

  • We need to go ahead and flip that variable in this state.

  • The specifically the this dot state dot adding note.

  • Because otherwise if we don't flip that too true, this will never display right here.

  • So we need to go ahead and do that.

  • All right, this stuff said ST and then inside of here, we want to go ahead and update adding note and what we want to set it.

  • Thio is not this dot state dot adding note.

  • So if that's false, it'll flip it to true.

  • If it's true, it will flip it to false.

  • It's just saying whatever this stop state adding notice.

  • We just wanted to be the opposite and we also want to reset the title and the reason why we want to reset the title is because when we're adding a new note, if we start typing in a title and then we want to stop adding a note when we go to add another note, we don't want that previous title to still be in the input.

  • So we're just gonna reset the title and save.

  • Let's see if that works for us.

  • Okay, come over to new note.

  • And when I click it, you can see Now I have this input here, and when I start to type inside of it, it's saying it is actually logging it here, as we expected.

  • And then when I click new note, it makes it go away because we're flipping that variable.

  • When I click it again, you can see it's empty.

  • That's because we're resetting that title.

  • That's exactly what we wanted to do.

  • But here's the problem.

  • When I click New Note, it still says New note.

  • I wanted to say Cancel.

  • So I wanted to say a new note here because it makes sense.

  • I want to click that.

  • I wantto create a new note, but now I don't want it to say new know anymore.

  • I want to say cancel.

  • So what we want to do is we want to go inside where we put the text for that button where it says new note here.

  • Let's put some Java script in there so to curly braces, and we want to do a turn ery operator and we'll say that stop state adding note.

  • So if that's true.

  • We want to go ahead and say Cancel, otherwise we want to go ahead and say new note So let's save that And it says new note.

  • And when I click it now, it says Cancel.

  • Okay, that's that's exactly what we wanted to do.

  • Cool.

  • So let's go ahead and move on, All right?

  • So now what we want to do is we have that input.

  • We have the enter note title input.

  • Let's go ahead, Go directly underneath that.

  • Let's create another button with a Capital B and we want to greater submit button.

  • So let's give a class name that equal to classes dot New note submits be tien.

  • All right, put that on its own line.

  • Make sure you guys can see everything.

  • Um, and then I want to add anon click function, and we're gonna call this dot new note whenever we click this button and we have to create this function.

  • But for now, we'll go ahead and put some text in here that says, Submit, note.

  • Cool.

  • So let's create a function called New Note and for now, just council dot log.

  • Let's just logged the entire state, okay?

  • So we'll save this will come back over here.

  • Clear this council.

  • So it's clean.

  • New note.

  • Now you can see the submit button is here.

  • I'll start typing in a title and when I click, submit Note.

  • The state is Ah, adding note is true and the title is no.

  • The reason why the title is no is because inside of update title, we're logging instead of setting the state.

  • So let's go ahead and set the state.

  • All right, so the title title, we will simply set that to text and then we will save.

  • Okay, So let's demo of this one more time.

  • Say this.

  • This is a title and I'm gonna click.

  • Submit note and you can see now that the state is properly updated.

  • Cool.

  • So there we go.

  • Cool.

  • So, um, I want to come in here and I want to go ahead and start working on the list of all of the notes on the side.

  • So let's go ahead and do that.

  • So what?

  • Where we wanna be is outside of these curly braces right here.

  • We want to go beyond that, and we want to add a list element with a capital L and then inside of the list element. 00:51:13.390 -->

all right, guys.

字幕與單字

單字即點即查 點擊單字可以查詢單字解釋

B1 中級

中級React和Firebase教程--構建一個Evernote克隆版。 (Intermediate React and Firebase Tutorial - Build an Evernote Clone)

  • 0 0
    林宜悉 發佈於 2021 年 01 月 14 日
影片單字