Name: React初心者チュートリアル - オートコンプリートテキストボックスを構築する (React Beginners Tutorial - Build an Autocomplete Text Box)
Uploaded: 2021-01-14T10:23:58.000Z
Duration: 45 min 9 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

未来進行形

in this video, you're going to be getting started with.

React up all the way to building this reusable real world component, which is an auto complete tax box with suggestions that filter as you type.

React is a job script library created by Facebook for building user interfaces.

It allows you to build in combine reusable you I components, much like creating your own custom.

Html tax These components are declare it'd views which update as the data in your application updates i e.

They react to changes in your application state.

You need a recent version of note for this to work, So if you haven't got that installed already, go and do that first.

When that's done in the terminal, I want you to type NPM.

Install dash G, create dash react dash app.

This will install and NPM package that creates bare bones.

React taps for you with all the wear pack configuration on required modules already set up for you so you can start coding straightaway.

After that's done installing, you need to do create dash react dash app in a space on the name of whatever you want to call you on you up.

First dash up on this will set up your new react up and install all the necessary dependence is that will take a little while.

After it's done, you need to go into the directory that's just being created.

On and you'll see here it's in store than NPM application for us.

This will compile the APP and run the Dev Server.

It opens a browser window and runs the app in it for you.

Um, so it's still just loading is still probably compiling in the background.

Andi, you can see here it tells you to goto SRC at J s edit the code and save and it will all to reload.

We're just gonna fly through building a really simple component with react just as a taster after that will move on to the auto complete tax books, which is more useful but also more complex.

Open the code in an editor of your choice.

Go to the SRC folder and then you want to go toe up Jess on this is the main top level up component that renders what we saw in the browser.

If you remember, there's this text here about getting started.

Let's just edit this and change it to say Hello world.

And if we save it and go back to the browser code re compiles hot reloads on, we get Hello World.

So now let's create our first react components on.

Then we'll be able to use it just like a custom HTML tag.

Really, we're going to make a component, which is a button on some dynamic text.

When you click the button, it's going to toggle hiding the text.

So in SRC, I want you to create a new file.

We're going to call it high double text dot Js.

Then we're going to export as default a new class on.

We're gonna call that high double text, and it needs to extend the reacts dot components class.

You give a constructor and the constructor takes an argument caused called props thes adjust properties for the components and they could be passed in like attributes are past two in HTML tags.

And we do just need to call super in the constructor passing through the props and super just calls the parent class constructor.

Constructor thatjust ensures the classes set up properly.

Next, we have a very special function called Render.

Now, whatever gets returned from render is what gets rendered in the browser for this component.

It's called, which is XML within Java script.

It did so it's just like doing HTML tags with the natural biscuit.

Really, it's going to be a div, and then we're gonna have a bottom on dhe or call it a struggle on DSS.

We can go ahead and imported into our app components.

So we open that foil on, We just import it import high devil text from height of all text.

Now we can use it pretty much like a custom html tag.

So if we go within this day of class name at content, we just go high double text like an html tak we save it on, Then we'll have a look and see how it looks in the browser.

We've got our button that does nothing At the moment on our text reacts elements can take arguments called props that are a lot like attributes for HTML tags.

It's called text on As the Valley Justus a string we will put dynamic tax.

Now we go back to our components on that text prop will be available in the component within an object called this stock props.

It comes in violet constructor here and is passed to the super class.

If you want to output the result of an expression in JSX, you just wrap the expression in curly braces That's completely wrong about the expression in curly braces.

So we're going to do this dot props, doc text on that will be the dynamic text we just passed in is the prop.

So if we save this and take a look in the browser, the text should have changed.

So as we can see, we've now got out Dynamic text on the bottom does absolutely nothing.

Props are one form of data available to Iraq components their past in from outside the component, as we saw on our immutable.

But we can also store internal mutable data within a component on this is called state.

We will define this within the constructor so we'll go.

This stop ST on state is a special property on react components that has to be called ST and it's just a plain old job script object.

So we can just define it as an object literal, we will add on is hidden property defaulting to false.

So obviously if is hidden is true, the text will be hidden, otherwise it will be shown on.

We can achieve that by going down here and during not this stock state dot is hidden and props stop text this means the tax will only show if it's hidden is true.

Let's create a new method on the class called Toggle Ace Hidden.

I didn't take any arguments on this is going to use a special method which is inherited from the react stock component class on this is called set staked for reasons I won't go into now because it's beyond the scope of the video.

This thought state should never be altered manually after being initially set up in the constructor.

To recall this DOT set state on this takes function is an argument, and it gives us actually the current state as an argument to this function on.

The changes we want to make to the state object in the form often object, so we'll return an object, and we want is hidden to bay the result of toggle ing.

The current is hidden so current state thought is hidden and again for reasons I won't go into now because it's too complicated for the moment, you must always you get the current value of any state object when you're doing a set state from current state, not from this thought state, you'll have to watch my entire react course to find out why.

His head and function will do exactly what we want.

字幕リスト動画再生

React初心者チュートリアル - オートコンプリートテキストボックスを構築する (React Beginners Tutorial - Build an Autocomplete Text Box)

entire

expression

instance

wrap