Skip to main content

Introduction to ReactJS





React is an open source front-end (JavaScript) library developed  and maintained by Facebook and Instagram for building fast and interactive user interfaces.

Why ReactJS?

In 2009 Facebook was using traditional data flow as the back-end. Therefore to get new updates the entire page had to be reloaded. In terms of initial data, real-time data and user data was flowing from different sources. Then the data was accordingly passed to the dispatcher, store and ultimately view.



If there was any changes in the back-end in order  to reflect the changes on the view the entire  page had to be refreshed. This was not user-friendly.

Drawbacks of traditional data flow.

  • Uses DOM (Document Object Model).
  • More memory consumption.
  • Slow performance.
With use of React the entire application is divided in to various components. When new data is added it will automatically update that component whose state has actually changed without reloading the entire page .

What is ReactJS?



  • Developed and maintained by Facebook and Instagram.
  • A JavaScript library for creating user interfaces.
  • Serves as the view of MVC architecture.
  • Suitable for large web application which use data and change over  the time without reloading the entire page.
  • React Native caters developing mobile application for various platforms and React VR caters developing VR applications.
  • Aims at Speed, Simplicity and Scalability.

Features of ReactJS.

  • One-Way data flow.


             
              Single source of truth - Data is originated and kept in one place, data is immutable.
              Data flow from the parent component to the child component.Action flow from child                            component to parent component.

  • Virtual DOM

             DOM manipulation is cost instead react create a virtual DOM tree and compare it with the                   rendered tree and update only what is changed.

  • JSX
            React JavaSript language for defining user interfaces.HTML like syntax.Prevents cross-site                scripting  attacks by converting expressions to strings.

Advantages of ReatJS.



  • Application performance is increased.
  • Used on client as well as server side.
  • Readability is improved.
  • React can be easily integrated with other frameworks like angular, meteor etc.. 
Labels:

Comments

Post a Comment

Popular posts from this blog

Basic concepts on NodeJs

Usecases of NodeJS. Walmart and ebay. Node is not the best platform for CPU intensive heavy computational applications. But it is ideal for building fast and scalable network applications.  NodeJS is capable of handling a huge number of simultaneous connections with high throughput. For each connection NodeJS does not spawn new Thread causing max out of memory instead handle all in single thread using non-blocking I/O model. Using this architecture NodeJS has achieved over 1 Million concurrent connections. Bubbling errors up to NodeJS core event loop will cause crashing the entire program. Netflix and Uber. NodeJs is best for, I/O bound applications. Data streaming applications. Data intensive real-time applications. JSON APIs based applications. Single page applications. Modules in NodeJS. In order  a design to be reliable and maintainable should avoid defining variables and functions in the global scope. Instead we can use modular...
Post a Comment
Read more

RESTful API

Routers can be created according to REST principles such as get, post, put, delete etc..  GET  =>  get request to r etrieve data from database or data store(An array). POST  =>  post request to insert   data to database or data store(An array). PUT  =>  put request to update the data in database or data store(An array). DELETE  =>  delete request to delete data in database or data store(An array). Creation of routers. In this scenario I have created a schema call users using mongoose.  using mongoose the created users model is retrieved. GET request  using the keyword  " get"   the data can be retrieved.  retrieving all the users in the database. By giving a parameter in the url we can get information according to the given subject.  user is retrieved according to the _id. POST request  using the keyword  "pos t"   the...
Post a Comment
Read more

Callbacks,Promises,Async Await and Closure in JavaScript.

This weeks blog will be including about callbacks and issues of it,promises which was used to overcome the issues of callbacks and closure in JavaScript. Callbacks, promises and async await All theses ways are used to deal with asynchronous data. By default, JavaScript programs run using a single thread. Though there are ways to create new threads, JavaScript is considered as single threaded language. JavaScript does not wait for I/O operations to get completed, instead it continues the execution of the program. This is called as non-blocking I/O. So that JavaScript is an asynchronous programming language because of this NIO nature. Callbacks, Promises and Async Await. As an example when a request is made to a server it will take couple of seconds to response with the relevant data, therefore you do not want to stall your program till the data is returned. You must keep on going or doing something where callbacks come in. Extra facts. until es6 => callbacks were used es...
Post a Comment
Read more