What is React?
Whenever you encounter this question, just answer simply that React is a JavaScript library, nothin more, nothing less. Sometimes people confuse it with angular or ember. But they are frameworks , not library.
React is a JavaScript library, not a framework. Also it’s not a solution. Sometimes, React needs some other libraries to formulate a solution
Why is React called React?
It’s a very common question for the starters, don’t you think so? When I started using react , I asked myself this question 😄 Anyway, I’ll try to answer this question with some fun, (that’s what I always do, right? 😜 Alright then, React is called react exactly for it’s work.
When the state of a React component (which is part of its input) changes, the UI it represents (its output) changes as well. This change in the description of the UI has to be reflected in the device we are working with. In a browser, we need to update the DOM tree. In a React application we don’t do that manually. React will simply react to the state changes and automatically (and efficiently) update the DOM when needed.
Now if you are wondering what is DOM & what is state & why does it change anyway? Okay fine, I will get to that later. Now, moving on..
Difference between Library & Framework:
Think of the real life library where so many books are stored & you can choose whichever book you want to read. In JavaScript React is same as that. It has so many functionalities but we can use only whichever we need. But frameworks are not like that. Frameworks usually have so many functionalities & while using framework, user is bound to a certain limitation. I mean, if you want to use a framework, that’s totally fine (your life, your choice 👌) but it makes you code everything in its own way & if you try to go outside the limitations, it literally ends up fighting with you. That’s why Angular (framework) is less popular than React (no offence 😝)
What does React really do?
Yeah yeah I know guys, you must be wondering what actually React does & why it’s so popular. Well, I am gonna explain that now. First of all, I am gonna tell you about a philosophy. 😉
You might be wondering, how & why should I know about philosophy? I just want to know about react, right? 😤 Well, my friend, keep patience, I am coming to that point. 👉 There is a philosophy called Unix philosophy which says ,
Write programs that do one thing and do it well. Write programs to work together.
— Doug McIlroy
React (being a small library) follows this Unix philosophy & focuses on doing only one thing properly with accuracy. That “one thing” is the another definition of React which is ,building UIs. Here you go! Now you might be wondering what is UI, right? Well, UI means user interface. I mean whichever interface the user sees is called user interface . For example, television is a user interface. Similarly we code (as input) & see the UI (as output)
DOM & State changes:
DOM is the abbreviation of document object model. It’s the browser’s (such as google chrome) programming interface for HTML (or xml) documents that treat them as a tree structure. If we want to change a document structure, style, and content , we can use DOM API.
However, state is a state or situation that handles something like variable or changeable. For example, if I want to make a game, (obviously it has to be dynamic), I have to add something that might change later, I have to compare condition or situation based on different actions on keyboard. That’s called state. In React, we create components to make use of them. A state of a component is an object that holds some information about that may change over the lifetime of the component.
In previous (you might say, ancient 😛) days, React components were class based & the changing state or any other functionality were a bit harder to do. But now we have functional components. We just create functions & use them as React components by injecting HTML with JSX formatting into them. To declare a state & change a state we use useState() hook in React.
What is Hook anyway?
Hook is a function that lets you dive into or ‘hook into’ the React state & lifecycle features from functional components. useState() is a hook that takes two parameters (first one as the state name & the second one as the state changing callback function). Another hook mostly popular like useState() is useEffect() . But that’s a little bit above basic level discussion, so let’s just skip that for now 🙏
Separation of Concerns:
As I said earlier, react is component based. So, we keep HTML, CSS & JavaScript codes altogether in a single component. That’s obviously more organized & that’s how React is different than the peculiar process. In earlier days, coders used to separate the HTML, CSS & JS files where the coding organization was a bit vague. But React does it nicely & here the codes are organized nicely.
Mounting & Unmounting :
What is mounting? & What is unmounting? The answer is simple
In React, Rendering a component in web browser (for the first time) is called mounting. I think, you get the other one, right? Exactly! Removing the component from the browser is called unmounting. These are used in Class components. In functional components its replacement is useEffect()
When to use Flux :
Many of the learners when start learning React are confused about flux. They think that React can not be used without Redux, so they must learn Redux too. Obviously Redux is cool! It’s the best flux out there, you can say (for it’s better performance, like, lots of features, clean functional , testable, nicer approach) But without Redux you can not use react, that’s actually not true. If you are trying to use React & your app(which you are trying to build) is small , or if you don’t need global states or you don’t care about tracking your changing states , then you don’t need Flux.
React’ s Tree Reconciliation:
This is a little bit tricky for the beginners. Anyway, I will try to explain as simple as I can.
Before React, when we needed to work with a browser’s API, which is known as the DOM API, we avoided traversing the DOM tree as much as possible and there is a reason for that. Any operation on the DOM is done in the same single thread that’s responsible for everything else that’s happening in the browser, including reactions to user events like typing, scrolling, resizing, etc.
Any expensive operation on the DOM means a slow and janky experience for the user. It is extremely important that your applications do the absolute minimum operations and batch them where possible. React came up with a unique concept to help us do exactly that!
When we tell React to render a tree of elements in the browser, it first generates a virtual representation of that tree and keeps it around in memory for later. Then it’ll proceed to perform the DOM operations that will make the tree show up in the browser.
When we tell React to update the tree of elements it previously rendered, it generates a new virtual representation of the updated tree. Now React has 2 versions of the tree in memory!
To render the updated tree in the browser, React does not discard what has already been rendered. Instead, it will compare the 2 virtual versions of the tree that it has in memory, compute the differences between them, figure out what sub-trees in the main tree need to be updated, and only update these sub-trees in the browser.
This process is what’s known as the tree reconciliation algorithm and it is what makes React a very efficient way to work with a browser’s DOM tree. We’ll see an example of it somewhere else hopefully.
