What Is Reactjs?
Tl;dr: React stores state and creates its own DOM(the virtual DOM) object from each component’s render object. When the state changes, the virtual DOM is rerendered and the browser DOM is updated with the difference.
At the highest level, React is a Javascript library. A very popular one at that. And like a lot of popular technologies, you may just be learning it for that reason, after all, if most organizations use certain technologies such as React and you want to get a job working for an organization, you’ll want to learn React.
When developing a familiarity with a certain technology for the purposes of listing it on your resume, or not for the purposes of using it on a specific company or personal project, we(I) tend to work through a tutorial using that technology, maybe in the case of a library like React, convert some old vanilla JavaScript projects into React projects. And that usually involves YouTube, Stack Overflow, and specific sections of the React docs.
My point is that too often we gloss over the fundamentals of the tech. What is React? What makes React different from vanilla JavaScript? What makes React different from other JavaScript libraries? What makes React different from JavaScript frameworks?
You may create multiple projects and study React hooks until your face turns blue only to be capsized by the question “What is React?”
In this article, I am going to attempt to explain:
- The difference between a framework and a library.
- What is React?
A good start to understanding what React is would be to understand what it is not. React is a library. It is not a framework. So what is the difference between a library and a framework you say? Well, with a library, you find the resource you need and take it out to use it for whatever purpose you need. A framework is something you work within.
Brandon Wozniewicz describes it better in this article on freecodecamp.org, “When you use a library, you are in charge of the flow of the application. You are choosing when and where to call the library. When you use a framework, the framework is in charge of the flow. It provides some places for you to plug in your code, but it calls the code you plugged in as needed.”
Ruby on Rails is a framework, more specifically, it is a Model-view-controller(MVC) framework. The model in this case is interacting with the database, the view is displaying data to the user, and the controller is taking user input and sending it to the model. It’s everything you need already within one package.
React is a library, more specifically, it a library for building user interfaces, the part of your app that the user is interacting with. In the MVC model, React would be the view. This means you will need to add your own model and controller.
If you are currently using Ruby on Rails, you could simply use it as an API and have React display the view data to the user as an example. Alternatively, you can use Node with Express, and React Router. Hell, you don’t even need a backend if you don’t think you need one.
And that is part of the strength of React, you have more power to choose when, where, and what to incorporate into your app based on your needs. With frameworks, you’re often stuck with minimum overhead from preexisting packages.
So what exactly is React then? I alluded to the answer before when I said React is a library for building user interfaces. There’s obviously more to it though, hence its popularity.
Well, to build user interfaces React allows you to create components, the intent being that each component you create is a part of that user interface(navbar, form, maps, etc.). This alone isn’t unique but rather a common programming paradigm to keep the functional pieces of your app separate from each other. The uniqueness that React provides is that each of those components holds a state. This means that your dynamic components can remember changes a user makes to them. Additionally, React can react to these changes in the state by updating the DOM with that new state each time a user makes a change.
Each component in your React app that renders elements sends an object that represents those elements to React’s Virtual DOM which is an object representation of all the elements that are being rendered and their state. React compares its Virtual DOM with the browser’s DOM. If it detects any differences between the two, it will react by updating the part of the browser DOM that differs from the Virtual DOM. This also means that we never have to interact with the browser’s DOM API (no querySelector() for example). We are just interacting with React’s Virtual DOM and that Virtual DOM is just a JavaScript object.
So React’s popularity has a lot to do with the fact that it is a frontend library that is very lightweight, moderately complex, and easy to get started with. It can be added to any new or existing project and you have complete control over what other technologies to use with it. And that’s really the big piece right there. It’s lightweight, scalable, and can be used with most other technologies.
So the next time someone asks me what React.js is I’m going to respond: “It’s a component-based library that holds state and reacts to changes between its Virtual DOM, which is a JavaScript object of the currently rendered components and their states, and the browser’s DOM”.
Thanks for reading and I hope you found my explanation of React.js helpful. Please feel free to shoot any comments, suggestions, or questions my way. Here are some additional resources I found very helpful in writing this article:
What is React (React js) & Why Is It So Popular? — Programming with Mosh
The Difference Between a Framework and a Library — Brandon Wozniewicz
