Name: 中級ReactとFirebaseチュートリアル - Evernoteのクローンを作る (Intermediate React and Firebase Tutorial - Build an Evernote Clone)
Uploaded: 2021-01-14T10:31:45.000Z
Duration: 1 h 49 min 50 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

程度の副詞

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.

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.

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.

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.

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?

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.

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

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.

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.

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

Just make sure you click it under cloud fire.

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.

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.

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 I want you to copy this object right here.

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

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 once you get to this link, you'll see instructions on how to install create rack react app.

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

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

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.

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.

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

字幕リスト動画再生

中級ReactとFirebaseチュートリアル - Evernoteのクローンを作る (Intermediate React and Firebase Tutorial - Build an Evernote Clone)

stuff

access

material

basically