My First Blog in React Js

sabesan ganeshalingam
3 min readMar 5, 2021

In this article, you will learn about Reactjs and its importance.

Introduction

JavaScript frameworks are tools used to boost up the development and standardized the code to build modern apps with a more manageable codebase. As a frontend developer, you must know some JavaScript frameworks. Ex-React JS, Angular JS, Vue JS, Meteor JS, Ember JS, Backbone JS. Nowadays React Js is very popular and most using JavaScript frameworks. ReactJS is very easy to learn and more focused than other JavaScript frameworks. Most of the companies using Reactjs such as Netflix, Yahoo!,eBay, Instagram, etc. So as a frontend developer it is mandatory to know about Reactjs.

What is Reactjs?

Reactjs is an open-source javascript library. React JS is a very competent dynamic application for preparing larger web apps in a coordinated, flexible way where application UIs can be designed in a scalable and swift manner. React is created by Jordan Walke, a Facebook engineer(Initial release from 2013 ). Before going into Reactjs we have to know about some core concepts of Reactjs.

  1. Component
  2. virtual dom
  3. JSX

Component

“A piece of the UI”

Components are the heart of React. React create a bunch of independent, isolated, and reusable components and compose them to build a complex UI. There must at least one component and it's called the root component. Inside the root component, we going to have our components. So react is a tree of components.

Virtual Dom

Reactjs uses the concept of virtual DOM which helps in the performance. Before that, we have to know about the HTML DOM.The HTML DOM is an Object Model for HTML.It is an API (Programming Interface) for JavaScript.

The HTML DOM Tree of Objects

The problem is that every time you touch a node just to read an attribute or a class name, or to get to a child or sibling, the browser has to search, check, parse a rather large number of proprieties and values for each node. So the solution for this issue is virtual dom. The Virtual DOM is an abstraction of the HTML DOM and the object has the same properties as a real DOM object. Manipulating the DOM is slow. Manipulating the virtual DOM is much faster

JSX

React components are written in JSX, a JavaScript extension syntax allowing easy quoting of HTML. It looks like HTML but it's not really HTML code.
JSX is a preprocessor step that adds XML syntax to JavaScript. You can definitely use React without JSX but JSX makes React a lot more elegant. Using the JSX will reduce the code lines and it's easy to understand.

JSX
without JSX

Why React Js?

  • Performance: using React will lead to a fast user interface without doing much work to specifically optimize for performance
  • Simplicity: Reactjs it’s based component, with simple plain JavaScript code
  • It’s easy to learn: Anyone who has some background with HTML CSS and JavaScript can Learn Reactjs.
  • Testability: ReactJS applications are super easy to test

--

--