REACTJS FEATURES AND BENEFITS

INTRO

React was first created by Jordan Walke, a software engineer working for Facebook. React first deployed on Facebook’s newsfeed in 2011 and on Instagram.com in 2012.

  • React is a JavaScript library aimed to create user interfaces and used extensively by social networking platforms like Facebook and Instagram to name a few.
  • React allows developers to create large web applications that can change data,
    without reloading the page. The main purpose of React is to be fast, scalable,
    and simple.
  • It can be used with a combination of other JavaScript libraries or frameworks,
    such as Angular JS in MVC.

REACTJS FEATURES

JSX: JavaScript extension, JSX is not valid JavaScript that browsers can read. It’s a
JavaScript file that contains JSX code, very similar to HTML and the file has to have complied before it reaches web browser, with JSX compiler that translates the JSX into
JavaScript.

SINGLE-WAY DATA FLOW:

In React, a set of immutable values are passed to the components renderer as properties in its HTML tags. The component cannot directly modify any properties but can pass a call back function with the help of which we can do modifications. This complete process is known as “properties flow down; actions flow up”.

VIRTUAL DOM:

Virtual DOM is a node tree listing of components, which is a lightweight in-memory representation of real DOM.

Virtual DOM is very easy to understand if you take an example of a lift which has a mirror inside it. Suppose, 4 people, enter into the lift. Now, the mirror will reflect its appearance with 4 people. Again people entering into the lift will reflect the object of the mirror. And the same effect happens when people exit from the lift, the mirror object gets changes (increase, decrease, or even empty). So, in reality, the mirror has no real object, but it only reflects its presence with an outer object.

Virtual DOM is similar in concept. It has no real DOM. It is just a copy of real DOM wrapped in a JavaScript object. Whenever the DOM changes, virtual DOM also changes.

REACT HOOKS

By using the concept of these hooks we don’t need to manipulate the functional component to class component, Because hooks will not work in classes. Hooks not allowed to use lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount why because we have built-in hooks like useEffect.

RULES OF HOOKS:

Hooks are nothing but javaScript functions. By using the concept of these hooks we have one exception that is we don’t use Hooks in conditions or functions.

BASIC BUILT IN HOOKS:

  • It gives stateful value and we can update the state by importing useState.
  • If you change a global variable then it is a side effect in useEffect.
  • In class component, if we share data from parent component to child component we use props, But in functional component it accepts useContext.

CONVERSION OF A FUNCTION TO THE CLASS

  • Initially, we should Create an ES6 class, with the same name, that extends React.Component.
  • Add a single empty method called render().
  • Delete the remaining empty function declaration.
  • Move the body of the function into the render() and replace props with this.props and state with this.state in the render() body.

REACTJS JAVASCRIPT LIBRARY BENEFITS

QUICK DEVELOPMENT:

Quick development major advantage is code reusability, app performance, and development speed.

TIME SAVING:

In react, developers can utilize the existing code at any time. For suppose if we change any existing component it is not affected by any other component because components are not the same.

BETTER USER EXPERIENCE:

Developers can easily update by the use of virtual DOM when the user performs any changes without affecting any other part of the application.

CODE STABILITY WITH ONE DIRECTIONAL DATA BINDING:

If a developer changes any parent component of the reactJS application then the child component will not be affected. React ensures that the code remains stable.

FASTER TESTING:

In any reactJS application, the state is under the constructor and it is in object format. We can easily access the state in any function of the component without using callbacks. It makes very easy to test the reactJS application.

REFERENCES:

https://reactjs.org/docs/getting-started.html

Categories : Uncategorized