React Definitive Guide: What is React?

React Js

As a front-end developer you may’ve heard about javaScript frameworks and libraries, one of them is React Js which we’re going through in this article.

What is React?

  • React Js is a javaScript library developed by Facebook for building user interfaces using components, it runs in the browser.
  • We can split any web page into components that makes the code maintainable, manageable and reusable.

What is Components?

  • It is a small feature that makes up a piece of a user interface, a project may consist of multiple components, each of these components exists within the same space, interacts independently from one another.

Example:

  • If I were to describe a component within the scope of Facebook’s UI, A chat window would be a component, a comment feed would be another component, and a constantly updating friend list would represent another component.
Splitting web page into components

In addition to providing reusable code , React comes with two key features that add a lot for javaScript developers.

1- JSX.

2- Virtual DOM.

What is JSX:

  • It’s a javascript looking a bit different, it’s a javascript XML syntax transform, It’ll be automatically transpiled to valid javascript in the end.
  • Important to know that it’s just some syntactical sugar, and it’s not connected with file extension you’re using, It works in (.js) or (.jsx) files.

JSX code will be like:

JSX code

It complies to be :

Compiled JSX code

What is virtual DOM:

  • If you’re not using React JS (and JSX), your website will use HTML to update its DOM (“change” everything without a user having to manually refresh a page). This works fine for simple, static websites, but for dynamic websites that involve heavy user interaction it can become a problem (since the entire DOM needs to reload every time the user clicks a feature calling for a page refresh).
  • React Js, specifically handles components in an extremely performant way. React uses something called a virtual DOM which uses a “diffing” algorithm to detect changes to a component (real DOM) and only render those changes, as opposed to re-rendering the entire component.
  • React keeps the virtual DOM in memory and when something changes, React compares the real DOM with the virtual one then update the real DOM.

We have a series of articles about React js:

Hope that it was simple for you, All comments and feedback are highly appreciated.

Stay tuned for more React Js articles for beginners, Have a nice day :)

Frontend Engineer