React from creating a skeleton.

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.

So what is react?

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.

Hence the name of the library.

Enough background that's gets started.

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.

Let's call it my dash.

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.

Andi.

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

That's my first Uh huh.

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

It's created our bare bones react up on.

We just do an M.

P m start and this will.

This will compile the APP and run the Dev Server.

It's also in a moment going toe open.

Here we go.

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

That's very convenient.

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

And there we go on.

This is the bare bones react up.

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.

So let's do that now to start off with.

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.

Ah, NDE.

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.

We're going to import react from react.

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.

So it's cooling the reactor component.

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.

So we're going to return some Jair sex.

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

On this dress, sex is just going to bay.

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.

Um, just some hard coded text for now.

Now we have this component.

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.

And there we go.

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.

So too, are Heidel.

Text will add one.

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.

So we want to out put this here on.

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.

Let's fix that now.

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.

Next we need a way to Tuggle is hidden.

So let's go up here.

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.

Then this function has to return.

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.

I think it's a bit more complicated.

Put this talking.

His head and function will do exactly what we want.

Next comes the task of hooking.

Toggle is hidden up to this button here.

It's actually very simple.

It's a lot like in HTML and Java script without react.

How you would have how you would add.

Rather an event handler.

You just put it straight on is an attribute on Click.

In this case, it's going to be an expression.

So we want the curly braces again.

And then we just put a narrow function on.

All the Sarah function is going to do is call this Doc Tuggle is him.

Let's save that on Dhe.

Check this in the browser first.

I have just noticed a big error in Total is hidden.

I set The new value is hidden to be exactly the same as the current value, which is obviously wrong.

We want to negate it, so it's struggled on dhe now it should work, so in the browser we have the talk about and we have the dynamic text we click toggle on the text disappears, we talk again and it reappears.

So that's working as intended.

So what's happening here is when we initially render the button is hidden is false On dso the text is hitting and when we collect the bottom toggle is hidden is called set state is called and it sets is hidden to true Each time we update the state of react component the component rear enders So the render function is called again on So when we click for the first time in his hidden is set to true This function is then called again This time is hidden is true on DSO the text isn't shown Now we're gonna move on to building a more useful riel world component.

I'm going to be teaching you how to build this auto complete text box using react.

It's one of those text boxes we type and get a list of possible lightens you can select which fill in the tax box a bit like the auto suggestion search boxes on most search engines.

What I really like about this is that it has really a world uses.

It's a very simple component, but by creating it, you'll learn about reusable react components, props, component state and using CSS with react.

You'll first need to set up a new reacts up by installing, create, racked up, greeting you out with it on, then run it by going to the director in the terminal and doing MPM start.

Alternatively, you could just put the code within the app you previously created.

It's up to you.

I opened the curd in an editor.

We're going to create a new component.

First, create a new foil for your components and call its auto complete tax dot dress, and it should be in the SRC folder.

Components are the building blocks of any reacts application.

They can be configured using something called props more on that later in the series, and they can hold their own mutable data.

Called ST.

They could be used to represent anything in your your eye from small things like a standalone you in widget such as this auto complete tax box we're going to create right up until you something large, like an entire Web page.

Components are reusable, so you can use the many times on one page or even across different pages.

There also compose herbal.

You can think of them like Lego bricks.

You can fit them together to build other, larger components.

First, we need to import the reactor module.

You need to do this for every component you create.

Then we create a class to represent our components on.

We're gonna call it auto Complete Text.

It needs to extend the react dot component class in order to make it a component out Sex box will need the list of all possible lightens that it can order, complete with in the future video.

I'll show you how to make that configurable, but for now we're just gonna hard code a list of names to do this.

First, create a constructor react component Constructors must take an argument called props and called the super class constructor passing the props argument to it.

This just ensures the component is set up properly.

Let's add a member variable called items, so it's this store items and it's going to be an array.

We create a member variable so we can access it from anywhere in the class later.

So let's add some names now to the right, These will be what could be shown in the order.

Complete drop down there.

All the possible items to auto complete with now the mark up for our component at the heart of any react components is the render function.

It will examine all of the components data on based on this will render the mark up the component.

The idea is that when the components data changes, that markup changes.

So the user sees something different.

So we define our end of function From this, we must return the react elements.

We want to represent our components.

Some magic called J air sacs lets us write them directly written in Java script as HTML tax.

So we're going to return a rapid Dave on inside it a text inputs.

This is going to be our textbooks.

We're also gonna put on a kn ordered less toe, hold our water, complete suggestions.

We'll worry about showing only items that match the text entered later.

For now, let's show all the items in the list.

So we have.

This is an array.

So we've been just output and l i for each item in the items of rain.

Now, this is going to be an expression on dhe to mix expressions into our markup.

Using JSX, we need to wrap them in curly braces.

Anything within curly braces will be evaluated on dhe, the value output within our markup.

This could be anything from a simple string to the results of a function cool or even other react elements.

We want one ally per item in the list.

So inside those curly braces were goingto map over the array an output an ally for each item within the ally.