#raectjs

[it-patsan-us]

Hi guys, glad to see you again. Today we gonna talk about React with Type Script. Today we will be installing React and starting up our project.

https://www.youtube.com/watch?v=lUocXrMc0Cw

[aglojane-blog]

React is one of the most used JavaScript framework and one of the most popular front-end JS frameworks. Its key advantage is rather than working on the whole application; developers can simply shatter User interface into a single component. Basically, it focuses on individual components.

[aglojane-blog]

Difference between Angular VS React VS Vue.js

AngularJS turned the whole definition of web development through its existence, what was lacking in previous methods of development was inappropriate structure. It merges use of javascript with MVC and HTML with DOM.

ReactJS is a JavaScript library and has a view, but lacks model & controller components. React introduced the concept of virtual DOM which is regarded as one of the greatest advantages of React in comparison of AngularJS. It relies on the conventions of a team to keep code written in a specific style, but its simplicity can be very powerful and expressive. AngularJS is a most popular javascript framework; its syntax is very heavy.

Vue.js will give you the flexibility that allows you to build your application in your own way, as we know this is not possible in case of Angular. It similar to React & Angular in terms of design & architecture though it is a rapidly growing JavaScript framework. It is able to build attractive UI using HTML, CSS, & Javascript.

The following are the difference between ReactJS, Vue.js & AngularJS:

ReactJS

It is bigger than vue.js but still smaller then angular.

It takes a long time to set up a react project, but then you can start to make an application & it would be easy to add new features.

It is easy to understand React, with React Native and next.js it is the best choice.

It doesn’t offer any concept of a built-in container for dependency injection.

It offers freedom, but it costs the additional time spent designing the structure of an application.

It helps us update the view and with flux can control the application workflow for the user.

It doesn’t offer division into templates & directives, the template logic should be written in the template itself.

React’s virtual DOM is one of the greatest advantages: It creates a lightweight DOM, with new data new virtual Dom is created & compare with the previous one.

React uses one-way data binding and an app architecture called flux controls the flow of data to components through one control point.

Vue.js

It is smaller and faster and also easy to work with in terms of syntax.

Vue can’t track data editing and deletion, which sometimes can be a problem.

Its design is simpler in general, and in its framework, you can change values easily.

It automatically makes relevant changes in DOM every time when values are changed.

While the size of vue library itself is smaller just-25.6kb, Though vue works faster.

Convenient templates simplify the process of developing  

We can upload a view written application easily from your browser without the need for transpiration, its library might be added to the whole page without any issue.

In Vue, a mandatory action is adding attributes to HTML layout. Almost like data binding in Angular.

It is a Model View Controller first release on 2014, Homepage is like Vue.js

AngularJS

It is way bigger, causing long load times & performance issues on mobile.

Being very competitive the amount of unwanted syntax it requires to do simple things puts angular to the end position.

It is not simple; its complexity often causes a lot of confusion.

It uses a basic OOP pattern called dependency injection, you can only pass dependence as a parameter in any order in your functions.

It divides application code into several files and can reuse templates in the different part of websites.  

It is based on the three layers MVC & provides many standard services, factories, controllers & directives.

It accesses the DOM only through directives and standard, own directives are stringer way to work with the DOM & to insert Data into Templates.

Angular Creates a watcher for each binding to track changes in the DOM. Once the view updates it compares the new value with the initial value & runs the $digest loop

Angular uses two-way data binding, it helps you to write less boilerplate code to create interactions between View and Model components.

Though it depends on you, as a developer which tool you are required in your application to work best with, so it can be ReactJS, AngularJS or Vue.JS depending on your projects best suitable tool requirement.