Sunday, May 10, 2020

ReactJS Overview

ReactJS Overview


What is ReactJS?

ReactJS is a JavaScript User Interface (UI) library created by Facebook. It is a declarative, efficient, and flexible UI library

We can create complex User Interface from tiny and isolated blocks of codes known as components.

Basically, React is not a framework; it is a JavaScript library, and it all about the V in MVC (Model View Controller). It is declarative means that React conceptually refreshes the part of the page any time data is changed and updates the changed parts only.

React has a small and compact API. React.js is easy to get started and learn. We can place a single widget, or code our entire app with React and Node.js or AngularJS seamlessly.

React is the open-source, popular, and holds a large developer community. 

React elements


These are JavaScript objects used to represent HTML elements. Physically, they are absent in the browser.

React Components


React components are created by the developers. A component can be used to render an element in the DOM using the React library. Components are UI blocks containing both the structure and functionality. The components can be functional components and class-based components.

const name = 'Iron Man';
ReactDOM.render(
    <h1>Welcome {name}!</h1>,
    document.getElementById('uName'));

ReactJS components are reusable blocks.


JSX


It is JavaScript XML ( JSX is not JavaScript nor HTML) that specifies a technique to structure component rendering using familiar syntax.

For example,

const comp = <h1>React Component</h1>

It has HTML-ish syntax; for example like HTML, a JSX tag can have tag names, attributes, and children. If an attribute is written between curly braces, the value is a JavaScript expression.

The Virtual DOM


Like actual DOM, The virtual DOM is a JavaScript tree of React elements and components. This is the virtual copy (in-memory representation) of the actual DOM in terms of React. This is totally mapped with the actual DOM. If the changes are made to the virtual DOM, they will be automatically reflected in the actual DOM.



Advantages of ReactJS


  • Reusability, React components can be used across multiple UIs
  • Modular Architecture leads to fast development
  • Virtual DOM
  • SEO friendly
  • Easy debugging, smooth testing
  • Scalable, flexible and declarative
  • High performance and stable code
  • Seamless updates, large user community
  • Hot reloading support

Disadvantages of ReactJS


  • Poor documentation
  • View oriented
  • ReactJS is used only for the view layer of the application, so other technologies are required for complete development