React Definitive Guide: What is React?

Sahar E.Hassan
Jul 1, 2019 · 3 min read
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.

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade