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.
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.
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.
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: