What Is React And Why You Need To Know It

now I'm sure but if you've been learning JavaScript 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 one today's video I'm going to 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 learn let's get started now and before we get started I have an absolutely huge announcement that I want to make and that is the react course that I've been working on for the last few months is finally in the last few stages of production and will 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 going to 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 sign up 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 worth it it's 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 let'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'd 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 JavaScript library for building user interfaces yep but that's pretty much all react is but it's so much more than that at the same time Wow yes react is there to make building user interfaces 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 of 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 going to talk about later in this video about how you can think about things in components which is the most important part of react if we scroll down a little bit you can see that it's declarative so normally when you're writing JavaScript you write a bunch of code to select elements and then you actually change those elements for example you change the inner text to add some extra HTML whatever it is that you need to do hide show things randomly but all of that is done through events and it's not really done declaratively in react what 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 in this case it depends on some name that you pass 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 and that's the nice thing about react is we don't have to change our component our 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 of the major front-end frameworks that you can talk about angular 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 on how we want it to interact with our state but it also allows us to manage that state inside of our application as well as to do a bunch of other stuff related to state and rendering of our user interface and user interaction of our website in order to reinforce this component based thinking I'm going to 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 the different results that you're getting back and with component based design what 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 repeat it over and over again as you can see here these search results sections for react Facebook react and react Reb flame all of those are actually kind of just repeated the same exact thing if we go forward you can see I've actually highlighted 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 this blue purpley 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 it says 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 in red here so this main search component react a JavaScript library but we're building user interfaces it contains its own components that are search components it contains essentially the same exact component as itself twice in here you can see we have this tutorial section and is getting started section and you'll notice they're slightly different for example they don't have this green link section and they also have extra information at the bottom of some of them oh that's ok these components contain different state essentially 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 it's the active one inside the list and again it's the same component as all the other ones but it's actually past 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 realize as a component by looking at this page and that's this card component and you can see over here we have this big card with a 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 bordered outline can be 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 books section and this people also search for section and those are also their own components which are contained inside this card component and these little icons with text some of them are again components inside of other components and when you're looking at react applications what you'll notice is instead of being one giant javascript file that contains a bunch of different code inside of it what you're going to find it is you have a bunch of really small JavaScript files which contain just a little bit of code for an individual component for example this gray card border is one component this icon text section right here another component a 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 to actually put this section over on the right and this 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 and the whole 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 were 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 is way harder to do so with 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 you 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 rerender 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 the user adds it to do you want to add that to do to the list and then make sure everything displays properly well in normal JavaScript that's a real pain to do you have to select the list you have to add that to do to that list you have to make sure it renders properly show all the HTML bla bla bla bla bla it is absolutely terrible to do especially when you start to get more and more complex with more nesting and more complex interactions with the 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 do's and what you want to do when you add a new to do is just add it to that state now you have three to do's in your state and rack says ok your state changed I'm gonna rerender your list of two do's and now you can see all three of your to do's you didn't have to write any code to re-render that react state react just took care of it for you that is incredibly nice to have because I know when I'm writing JavaScript code just vanilla normal JavaScript all the time I forget to refresh or rerender my application when some form of state changes and it leads to tons and tons of bugs for me so having rack take care of that for me is incredibly nice because I don't have to use the mental capacity to think about when to re-render react just does it for me 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-end 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 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 learn react as your first front-end framework not only is it the most similar to JavaScript 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 angular 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 writing normal JavaScript 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 learning experience and learning everything you need to learn about react in 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 learning react so much easier for you I know I wish I had this course when I was learning react because it took me so long to actually learn react where this course like I said you can do it in just one single day which is incredible compared to most other courses and with that shameless plug out of the way I want to say thank you very much for watching the video this far and I hope you have a great day

Channel: Web Dev Simplified

Views: 106,240

Rating: 4.9573078 out of 5

Keywords: webdevsimplified, what is react, react js, what is reactjs, reactjs, how to learn react, what is react javascript, react components explained, what is react explained, reactjs explained, react explained, reactjs basics, react basics, javascript react, javascript react basics, what is javascript react, react javascript, react javascript for beginners, react javascript course, how to learn reactjs, react, react js tutorial, learn react today, react simplified, why learn react

Id: 1wZoGFF_oi4

Length: 12min 36sec (756 seconds)

Published: Sat Aug 24 2019