Category: ReactJS Tutorial

ReactJS Tutorial , ReactJS examples, ReactJS JSX, ReactJS components , ReactJS Props, ReactJS State, ReactJS LifecycleReactJS Forms & Events, ReactJS ES6

Difference between React JS and Vue JS

The blog provides the difference between React and Vue. Although both React and Vue are the popular Java Script frameworks and provides similar functionalities like component -based Architecture, State and Props , Updating Virtual DOM but their usage depends on the specific business needs.

React Java Script FrameworkVue Java Script Framework
React is used for building reusable componentsVue is used for building reusable User
Interfaces and single page applications
React is declarative, efficient and flexible
open-source Java Script Library		Vue is an open-source library supporting
progressive framework
React was developed by Jordan Walke, a
software engineer at facebook		Vue was developed by Evan You, a former
employee at Google
React was released to public on May,2013Vue was released to public on February, 2014
React can be easily integrated with 3rd party librariesVue has limited flexibility to adapt 3rd party libraries
React uses JSX for Java Script Expression
which is generated code similar to HML		Vue provides styling similar to Angular
by separating HTML, JS, and CSS
React supports one-way binding which means
only model can update the application state		Vue supports one-way and two-way binding
which means not only model but UI field
change is bounded to model change
React support Java Script / XMLVue supports HTML/ Java Script
React provides extensive support for External
Tools (React CLI Tool for create-react-app) and
IDEs (Visual Studio Code)		Vue provides limited external tool supports
when compared to React although it also
supports Vue CLI Tool and IDEs
React being a popular library provides long term supportVue support is limited as compared to React

Difference between React JS State and Props

The blog provides the listing of differences between React JS State and React JS Props.

ReactJS State

The State is used to contain data or related information about the component in React and determines the component behavior and depicts how the data is rendered to the DOM Structure. The usage of State makes the component more dynamic and interactive. The State represents the component’s local state and can be modified inside the component or sometimes by the component directly.

ReactJS Props

Props in React are similar to properties which are read-only and are passed as argument within the component. It acts as the function arguments and allows to share data among components. Props are immutable as we cannot modify the values of props within the component. Thus , it is preferred to define the components with the State which can be updated with the change in the component.

What is common between State and Props

  • Both ReactJS State and Props can get initial value from parent Component
  • Both ReactJS State and Props can set default values inside Component
  • Both ReactJS State and Props are plain JS objects

Difference between ReactJS State and Props

React JS State React JS Props
State is used to contain data or related information about the component in ReactProps in React are similar to properties which are passed as argument within the component 
 State of the component can be modified Props in react are read only
 State is mutableProps is immutable 
States helps in rendering the modifications with the component  Props are used to communicate between components
 State is restricted to be  accessed by child components Props can be accessed by the child component
 State holds component data Props allows to pass data using arguments between components
State cannot be used as reusable componentsProps can be used as reusable components
 State is internal to the react components Props are external used to pass arguments between components