Geek Culture
Published in

Geek Culture

Beginners Guide on How React.js Works

React is known as javascript’s library for user interfaces. The point to be noted here is that react is a “library,” not a framework like Angular or Amber. So, first of all, let’s discuss the differences between framework and library.

Frameworks are great for making applications easily. Also, there are already many smart designs that exist. But the problem is it’s not flexible, and one can not customize it according to their needs. If one wants to use a small portion, they have to use the whole thing.

Since react is a javascript library, so it has to be imported into the code. If one wants to use react, they import react like the code snippet given below:

In a react application, there is a small portion that is pure react. Most of them are a combination of much other stuff, e.g., node, JSX, Babel,webpack, etc. In this article, a brief discussion on JSX will be given. But before understanding this, one must have a clear idea of DOM(document object model).

DOM is basically a representation of what a user sees in the browser. What react does is it creates a virtual version of a DOM which is called a ‘virtual DOM.’ What it does is that creates a virtual DOM when the program is first executed in the browser. When there is some change in the program (e.g., inputting the name, ticking a checkbox), it creates a new virtual DOM. Then it compares both virtual DOM’s using an algorithm named ‘diffing algorithm’. If there is any difference between the two DOMs, the first DOM is updated. React does all these very efficiently and in a very less amount of time.

JSX allows writing HTML code in javascript and vice versa. Let’s look at a simple example of a piece of react code without JSX and with JSX.

It is clearly shown that react code written with JSX is much cleaner and understandable than code without JSX. The code shown in fig 03 actually compiles into the code of fig 02 in the browser. Developers of Facebook came up with the idea of JSX. Another important point here is JSX is not HTML. It is actually a compromise. Instead of writing hard react codes, we chose to write some code that is similar to HTML.JSX is not understandable to the browser.

If we try to write <button></button> element inside JSX , browser will throw an error. The correct code will be <Button />, which have to be written inside {}.

In conclusion, react is one of the best javascript libraries because of its speed and user interface. The last thing to be mentioned here is why it is named as react? Because if we work in a browser, we need to update the DOM tree. In a React application, we don’t do that manually. React will react to the state changes and automatically (and efficiently) update the DOM when needed.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store