But if you've been learning job or skip for any time, you've probably heard of or seen react in some capacity.

But you maybe haven't really dove into it yet and are really confused as to what react actually, is why it's so important and why so many people are talking about it.

Well, in today's view, I'm gonna be covering all of that and so much more so you can fully understand what react is and figure out if it's the right thing for you to lend.

Let's get started now before we get started, I have an absolutely huge announcement that I want to make, and that is the reactor course that I've been working on for the last few months is finally in the last few stages of production, and we'll be releasing on September 10th of this year in just a couple weeks from when this video comes out.

So if you haven't already signed up for the list to be notified when the course comes out, make sure you go down below.

In the comments or description, click on the link that I'm gonna leave there, and that is going to allow you to sign up for the email list to get notified when the course releases and also get a huge discount that no one else is going to get, except for the people that sent it for that email list.

And if you're from the future and you're watching this video after the course releases, you can click the link down below and actually go and buy the course.

If it's something you're interested in and I promise you promise you that this course is definitely work that is taking me so much time.

And it's so much better than any of the YouTube videos I've created so far, so it is definitely worth your money.

So with that out of the way, what's actually jump into the video, which is what is react.

So instead of trying to come up with my own fancy description of what react is, I figured we just go straight to the React website and it'll tell you exactly what react is.

And as you can see, it's a Java script library for building user interfaces yet, but that's pretty much all racked is.

But it's so much more than that at the same time while yes, react is there to make.

Building user interface is incredibly easy and really intuitive, especially when you're building complex interfaces.

It really does a lot more than that and actually kind of shifts the mindset.

How you're supposed to think about programs to be less about the workflow and more about being component and state based, which we're gonna talk about later in this video about how you can think about things in components, which is the most important part of react.

We scroll down a little bit.

You can see that it's declarative.

So normally when you're writing job script, you write a bunch of code to select some elements, and then you actually change those elements.

For example, you changed the inter text to add some extra HTML, whatever it is that you need to do hide show things randomly.

But all that is done through events, and it's not really done to Clara Tiddly in react.

Well, you do is you actually write what you want your html to look like.

And you'd say if the state is like this, do this one thing, and if the state is something else, do something else if we just scroll down here a little bit, you can see that inside of react.

You have these things called components, which is this code in here, and all it's doing is returning some HTML for you and this HTML depends on certain things.

And this kid is It depends on some name that you passed to the component.

So, for example, we passed it the name of Kyle.

You can see that it's changing over here to be Hello, Kyle.

Oh, and that's the nice thing about react is we don't have to change.

Our component are html.

It just knows to change itself.

When we pass, it's something different.

That's really the power of it being declarative.

And then, like I've talked about a little bit already, its component based which is really the most important thing about react.

All the major front and frameworks that you could talk about angler react, views felt whatever it is, they're all component based at the root of it, and that's essentially breaking out your code into small components.

For example, here we have a hello message component, and all it is is a simple message.

Over here, it's a very small, broken out component that you can build your application out of by putting all of the different components together into smaller and smaller pieces that grow into something larger.

So, really, what react is is it's a library that allows us to not only write our HTML and how we want it to interact with our state.

But it also allows us to manage that state.

Inside of our application as well is to do a bunch of other stuff are related to ST and rendering of our user interface and user interaction of our website.

In order to reinforce this component based thinking, I'm gonna take a look at an example of Google Search page to show you how it can be broken down into components and written using react.

So here I just have a basic Google search page, for when you search for react and all of the different results that you're getting back and with component based design, well, you need to do when you look at something is to think about how can I break this into reusable parts of code.

So you really want to look at things in your page that are the same and repeated over and over again.

As you can see here, the search results sections for react, Facebook direct and racked rug framework.

All of those are actually kind of just repeated the same exact thing.

If we go forward, you can see I've actually highlight of these different sections in red because we know that these different red sections are essentially like a search result component.

This component contains a title, which shows up in his blue purple e color.

You have the link, which is green as well as a short description of that actual Web page, and each one has the exact same thing as you can see.

But something else that you may not notice is this bottom section where sister tutorial and getting started that is also actually part of the exact same component.

It's part of that search result component, but those sections tutorial and getting started are also just their own search component.

That's why I've highlighted them and red here.

So this main search component react a job survivor ever building user interfaces.

It contains its own components that air search components.

It contains essentially the same exact component as itself.

Twice in here, you can see we have this tutorial section and it's getting started section and you'll notice they're slightly different.

For example, they don't have this green links section, and they also have extra information at the bottom of some of them.

But that's okay.

These components contain different state A sexually.

You pass different things to that component, and the component itself stays exactly the same.

But it knows, based on the different information you give it to render itself differently.

That's really the great power about react.

Also, if we go a little bit further, we can see all these icons up here share a very similar pattern so we can highlight those as their own components.

As you can see, they have an icon on the left hand side and some text on the right hand side, and you may also notice that this all one has a big underline underneath of it to say that is the active one inside the list.

And again, it's the same component as all the other ones.

But it's actually passed different information, so it renders itself differently again.

That is the great power of react you know the render something differently based on the state that you give it and having the component itself always stay exactly the same.

Now, one other thing I want to do is actually look at one last component that you may not really realizes a component by looking at this page, and that's this card component.

As you can see, over here, we have this big card with the nice outlined a box, and this people also asked Section is again a card with that outlined a box.

So if we go forward, I've highlighted those in green so that they're easier to see for us, and you may think that these are very different from each other.

For example, the content inside of this green card on the right is very different from the content on the green card on the left.

But that's okay because this green card component essentially is just defining an outline around the component, and that's it.

Just that gray border outline convey its own component.

A component doesn't have to be big, and it doesn't have to be exactly the same as some other component.

Visually, they can look completely different and still be the same component because they may have other components inside of them.

For example, this right hand side you can see has this react book section, and these people also search for section and those air also their own components, which are contained inside this card component.

And these little icons with text, none of them ever again components inside of other components on when you're looking at react applications.

Well, you'll notice is instead of being one giant job script file that contains a bunch of different code inside of it.

Where you're going to find it is you have a bunch of really small job scared files, which contain just a little bit of code for an individual component.

For example, this great card border is one component, this icon text section right here, another component.

That list of those is another component, so it makes your code so much easier to follow and read because it's a bunch of small files instead of one massive file, it's also really easy to plug and play different things together.

For example, if I want to remove this react book section, all I do is remove that component from the parent component that it's inside of and boom.

It's completely gone.

Also, as you can see, we use the same green card border toe actually put this section over on the right and the section on the left inside of it.

But they're completely different, as I talked about earlier.

So what we're able to do is just add in different components in the one on the left, we have this list based component, and on the right we have this more detail oriented component.

It really doesn't matter what these things are called.

Just that you know that they're different components inside the same sections.

So now that we know a little bit about what react is in the hole component based, state based idea, why exactly would you use this over just writing out some JavaScript?

I mean, isn't it more difficult to think about your application as all these small components that you then have to glue together?

It's like building a Lego structure when instead you could just buy it already built.

It seems more difficult, but the nice thing about building things with components and with those Lego components, as opposed to building something pre built or very custom is that if you want to change a Lego structure, you just remove a Lego and put a new Lego in its place, and it still works just fine.

Everything else works the same, but if you have something that's one giant piece, all built together one giant plastic thing, for example, if you want to change a small bit of it, you have to completely dig into and destroy the entire piece and then patch it back up with something else that you want and as way harder to do.

So what the react?

It's so much easier to make small, incremental changes to your application without having to worry about breaking things outside of the larger scope of the single component you work on.

You just remove that component and then add a new component.

Essentially your change.

Only the small thing you want to change, and you don't have to mess with changing everything else in your application.

Also, something great about react is it allows you to actually re render your application every time your state changes automatically.

I don't know about you, but if you've ever built something like a to do list, and every time a user adds it to do you want to add that to do to the list and then make sure everything displays properly?

Well, the normal Java script.

That's a real pain to do.

You have to select the list you have to admit to do to that list.

You have to make sure it renders properly.

Show all the HTML blah, blah, blah, blah, blah.

It is absolutely terrible to do, especially when you start to get more and more complex, with more nesting and more complex interactions with react.

This is incredibly easy to do.

Imagine you have a state that contains your to do is you have an array of two to deuce, and what you want to do when you add a new to do is just add it to that state.

Now you have 32 DUIs in your state, and Rack says Okay, your state changed.

I'm gonna re render your list of two DUIs, and now you can see all three of your two deuce.

You didn't have to write any code to rear ender that react state react just took care of it for you That is incredibly nice tohave because I know when I'm writing JavaScript code just vanilla normal JavaScript all the time.

I forget to refresh or rear ender my application when some form of ST changes and leads two tons and tons of bugs for me.

So having racked take care of that for me is incredibly nice, because I don't have to use the mental capacity to think about when to rear Ender react just doesn't form it every single time, and it does it when it should do it, which is perfect.

So if I haven't already sold you on the fact that react is absolutely amazing and you should definitely learn it, just know that most companies out there are going to be using some front and framework whether it's react, angular or view.

It doesn't really matter.

As long as you learn one of the three, you're gonna be so much farther ahead than many other people applying for jobs.

And right now, react is by far the most popular and fastest growing of these frameworks.

So that's why I highly recommend you learned react as your first front and framework.

Not only is it the most similar to Java script, just plain JavaScript.

So when you're coming from just plain javascript to react, it's a much easier transition.

All you have to do is change your mind to think about components, and that's really the only main difference.

While if you go to angler or view, they have their own magical way of writing things.

That does a lot of stuff for you behind the scenes.

But it requires you to not only learn component based thinking, but also to learn the angular way of doing things or the view way of doing things.

So if you start with react, I think it's easier because it's just plain JavaScript and all you really have to think about is components.

And the react way of doing things is just riding normal job script.

So it's going to be much more familiar for you.

And as I mentioned at the beginning of this video, my learn react Today course is launching September 10th.

So if you're interested in fast tracking your react one in experience and learning everything you need to learn about react and just one single day, then I highly recommend you click on the link in the description and comments below to go sign up for the course because it's going to make money react so much easier if you I know I wish I had this course when I was learning wrecked because it took me so long to actually learn react with this course.

Like I said, you can do it in just one single day, which is incredible compared to most other courses.