Main Features Of React
The Virtual Dom
This sounds like some sort of sci-fi alternate reality and at first is a bit abstract when trying to understand it. Basically it is an in-memory copy of the actual Document Object Model (DOM). The real DOM is a tree-like representation of any web page that gets loaded into the browser when we visit a website or application. Therefore when changes are made to the DOM, it creates changes in the browser screen. Easy, right? Kidding. It’s a hard concept to wrap your head around and the Virtual DOM may be even more confusing. The best explanation I remember reading when learning about the DOM (thank you Flatiron School) is that it is analogous to DNA. We understand our DNA to be a code-based blueprint of who we are, how we look, and how we function. In a similar sense, the DOM is a code-based blueprint of a web page. Therefore, if something were to mutate our DNA, changes will occur in our bodies in the same way that when changes are made to the DOM, changes will then be displayed in the browser. So back to the Virtual DOM for a moment. When state changes and the changes need to be rendered on the page, the Virtual DOM gets updated. Only the objects that were updated get changed on the real DOM instead of updating everything or every single object. Result: React is fast.
React is all about components, separate components or building blocks for each feature and each piece of user interface. Add a button? Make it its own component. Have a Navbar, yup own component.
When these separate components are combined, we have a fully functioning application that has readable, reusable, easy to debug code. Historically, there are two component types in React. Functional components, which often get referred to as stateless components, are passed state or data from other components in the form of props (properties). Hooks changes our ability to use state in functional components, stay tuned. Props are passed from parent components to child components as a way of sending data from one to the other. Props can be thought of in a similar way to how arguments are passed in functions. Class components maintain their own state.
So what is all this talk about state? State, like components and props, is another key concept of React. State is a place to store information or data about the component. State can change based on user interaction or choices. When state changes, the component re-renders (without a page refresh mind you) so the updates will be seen almost automatically to the users. Take a like button for example, we set an initial state to 0 Likes and then have a way to monitor and handle what happens when a user hits like. The state changes, a new copy of state is set, and the object is re-rendered to show that there is now 1 Like. Then the owner of the liked object feels instantly better.
React is constantly changing, it is being developed actively and starting to be written in new ways. Notably, React Hooks. Look for an article coming soon. React is an in-demand language. Briefly touching on a few main features above, we see it reiterated again and again that React is fast and efficient. React gives us clean, easy to understand, easy to write, and easy to debug code. With these luxuries in place, software engineers can focus on making apps with uncomplicated and enjoyable user interfaces, which in turn makes the apps more accessible to a wider range of people. Possibilities abound.