"What is React?" This is a question you might have been asked or possibly even asked to yourself. Like many others who are relatively new to programming, my go-to answers were something like, "It makes designing UI a lot easier" or "It's a front-end focused JavaScript library". Though these definitions aren't wrong, it'd be much more beneficial for both you and the person who asked this question to explain the answer in a way that a new programmer, or even a non-programmer, can understand. As I am writing this blog, my first experience with React was only yesterday. However, through building an application with React, JavaScript and research, I'd like to give a short but effective explanation as to what React really is.
So what is React?
React is a JavaScript library that was developed in Facebook in 2011 and is the most popular JavaScript library for building User Interfaces. React utilizes React Components (pieces of UI) that are independent, isolated, reusable, which compile to build complex applications.
How does React Work?
To put it shortly, there normally is a Root component as well as child components, which are built by using a Class component or a Functional component (the differences between the two are out of scope for this blog; however, there are many resources online that can explain them well! For the purposes of understanding, I will talking about the class component). Below is an example of how components would be segmented.
Looking at the example above, the yellow outer box would represent the Root component and all the components inside would be child components of that Root component.
The Class component has a state and a render function, whose output is a React element which is essentially a plain JS object mapped to a DOM element. It's not a real DOM element, it's just a plain JS object that represents the DOM element in memory. So React keeps a light-weight representation of the DOM in memory, which is commonly referred to as the Virtual DOM. Unlike the browser (or the Real DOM), the Virtual DOM is cheap to create. When we change the state of a component, we get a new React element, React will then compare this element and its children with its previous version, figure out what has changed, and then will update part of the Real DOM to keep it in sync with the Virtual DOM. So that means that when building applications with React, unlike JavaScript or jQuery, we no longer need to work with the DOM API in the browser.
That is exactly why this library is called React. Because when a state changes, React "reacts" to the stage changes and updates the DOM!
Top comments (0)