Previous Lecture Complete and continue  

  What is React

  1. Why should you care about React?
  2. The Definition of React
  3. What React Brings to the Table
  4. Key Difference

Hello, welcome to React Foundation course. My name is Azat Mardan and this is, actually, the second edition of this course. First time it was published on Udemy, and now courtesy of Node University. So, what is React? Quick introduction, and by the way, why you should care about some React?

Maybe you are an experienced Angular developer. Maybe you know Backbone, maybe you're just happy with jQuery, or just familiar with JavaScript. So, there's many technologies out there but sometimes, especially with frameworks like Backbone or even Angular, you end up with a lot of events and a lot of Spaghetti code. It's hard to organize that code, it hard to reason, it's also hard to test that code. So, the definition of React, React solves those problems and also most of the main problem it solves is how to synchronize the view with the data. So, what React brings to the table.

It's key differences is it has a virtual DOM. So, what are the virtual DOM? Virtual DOM, think about it as generation of HTML in the memory so we don't need to go to the real DOM every time. Second, it's declarative. What does it mean? We don't need to manually go find an element, use a selector, like we use with jQuery, and create an event listener. We just describe the UI once and then we let React to do everything. We let React to maintain the view in sync with the data. It's functional, so functional JavaScript, functional programming. It's usually simpler, it's usually easier to reason about than object oriented programming. It has a lot of fans and it has its rebirth.

In 2016/2017, a lot of people switching to functional programming and React is embracing that. There are no DOM manipulations so, this is going back to the declarative. So, we do not manipulate DOM directly. By the way, if you have some legacy jQuery, or another library code React will play nicely so you don't have to replace, you can make React work with other libraries, which manipulate DOM directly. But the best approach, especially for greenfield projects, the projects which you're starting from scratch, is to never manipulate the DOM. And luckily, you don't need to do that, you don't need to manipulate. And there are no templates so, basically, in React you don't need to learn any templating language, you don't need to learn any directives. You just use plain, good old JavaScript and I think that's very, very nice. And, the last one, there are no even listeners or event handlers so, basically, the way you work with the UI, the way you make your UI interactive, you just describe the end result and then React takes care of everything.

You don't do manual event listeners, you don't attach them which leads to all sorts of problems. You do it in a declarative manner. Okay, so what about MVC? We've been told MVC is the best thing since the slice of cake. Well, actually React steps away from MVC, from the model-view-controller and it says maybe you don't need that in all of your applications. But if you need, think about React as only a view. In that, MVC think about as a V and then you can bring your own models, you can bring your own controllers if you need to or maybe you have some legacy code, feel free to do so.

So, React is often used with some of the libraries like Flux, Redux, it's another implementation, or Reflux and React Router. So, those libraries will allow you to implement the full blown single page application with the URL routing, the front end URL routing, the browser URL routing, and the data structures. But, again, for most of applications you don't even need that. For most applications all you need is just simple UIs and React is beautiful at that. It's great, great, great, great for large projects as well because of the component based architecture. So, that's it for this lesson, see you on the next video.