React is a library that utilizes JavaScript for “building user interfaces,” according to the docs (https://reactjs.org). A quick pause to explain that user interface (UI), simply put, is what happens when humans meet computers or other such devices. It is the interaction and/or communication that occurs when people connect with a technology, an application, a website. The goal then is to anticipate what will give users ease of access, understanding, and frustration free experiences. React is the front-end boss that takes control of an application’s view layer of the Model View Controller (MVC) architecture or the appearance and behavior of an app. React can build user interfaces that are fast and interactive. Hello successful UI.
In vanilla JavaScript to make sure a file is read, if you add a new model for example, it needs to be listed in your index.html file. If an app is a substantial size, your list gets pretty long. Additionally, order matters because we can’t call a class that hasn’t been defined. With React we can write code as modules and can export and import these modules for a clean, organized, structure of both the code and the design of the applications we build. Though React is built out of JavaScript, it uses many additional dependencies.
Main Features Of React
JSX
JSX is a JavaScript syntax expression. It allows for writing HTML in the same file or even embedded in the same line as our JavaScript Code. The React docs make a point of mentioning that JSX is optional in React. It’s not a requirement, but it is extremely efficient. Like many other features of React, JSX helps make our code easier to debug, easier to read, and easier to write. React is declarative vs imperative. In React, you can write code and tell it what you want to happen instead of how to make something happen in detail (think JavaScript).
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.
Component Based
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.
Conclusion
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.
