What is react js | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 2

What is react js

what are advantages of react js over JavaScript

20th Feb 2018, 2:55 AM
Sushmita J H
3 Answers
0
ReactJS is a reactive virtual DOM (MVVM)(Model-View-View-Model) that mainly gives the following major advantage over plain js: [I personally didn't use ReactJS, but i use VueJS which is doing similar job and having very similar workflow and logic. Hope it helps anyways] 1. Realtime (reactive) update of informations in a view (What i mean view is the "page" you see) (That means you dont need to make those code for doing ajax request and refresh a particular element yourself, because the virtual DOM has done that for you) 2. Divide the whole view (page) into components. Components are basically chunks of html elements grouped together , and it can also contain other components. Take the browser as an example, the url bar can be one component, those setting keys group is also one component, and inside the setting key group, each button could also be a single component as well. This allows us to reuse and manage components in an more organized and human-friendly way (so that you dont have to edit every single elements in the webpage when you want to change some attributes for that type of element) (and also avoid crazy copying and pasting repeated code as you can use components directly and easily right away) 3. Better debugging. Most of the frontend mvvm framework have its official debugging tool. This comes in handy when you want to look for values and debug whilst running the web app, in a nice looking GUI. Plain js will require some little knowledge on using the browser console and remembering each variable name you used however 4. Events and central state management. Events are useful when you want to go beyond the limitations of vanilla html events (those onClick, onKeyDown....etc.). It allows you to emit custom event , and create listeners to listen to your custom event easily, eliminating the need for hardcore ground-up js code investigation and copying just to allow custom events.
20th Feb 2018, 6:18 PM
ThisTNTSquid
ThisTNTSquid - avatar
0
5. Central State Manager. This comes in different form and name when used with different mvvm frameworks. For example, VueJS uses Vuex as state manager, while ReactJS uses Redux as its state manager. By using those central state managers , you can carry variables (states) to another page (view) in your web app, and it also allows you to define functions and methods that both different views requires in common. This make your whole app more consistent by moving out states (variables) and actions (functions) to a central place which the whole app could use, and does not create copies of those state and action which could potentially cause inconsistencies eventually
20th Feb 2018, 6:23 PM
ThisTNTSquid
ThisTNTSquid - avatar
0
btw, editing answers are impossible here on sololearn as it displays "No Connection" while my Wifi signal is at strongest and can access the internet. This is a bug, and we have to report that
20th Feb 2018, 6:24 PM
ThisTNTSquid
ThisTNTSquid - avatar