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

Spring MVC Overview

Spring MVC is a java framework that is used to build web applications. It uses  Model-View-Control design pattern and implements basic features of core spring framework such as Inversion of Control, Dependency Injection How Spring MVC works. When the client sends a request the request is captured by the Dispatcher Servlet which act as the front Controller of the system. With the help of helpers( Handler Mappings, Controller, View Resolver, View) front controller will responds the client with HTML and data. When the Dispatcher Servlet gets the request from the client, the request is immediately sent to Handler Mappings. Handler Mapping will scan the URL and will respond to the Dispatcher Servlet with address of the class that can generate data for the web page which the end user has requested.  With the respond of the Handler Mapping Dispatcher Servlet will forward the request to the Controller, so that the data will be prepared and creates a java objec...
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

What is ExpressJS

Express is a very popular framework that is used in NodeJs. Express is build upon NodeJs and also it provides a lot of tools that makes node more easy to use by adding more functionalities. Most of the needed functionalities are handled by express which helps the users to only focus on the business logic and to easily setup routes and to render the things on screen in a fast, optimized and a secured manner. How to install ExpressJS? Express can be easily installed by the command  " npm i express"  . Installation of ExpressJs package.json file will be updated once the installation is successful. How to import ExpressJS? To import the installed express module we can use the command  " require("express") " . Accessing the imported express module. express can be accessed as given below using the given commands. Firstly a constant called app is created. And then using this give constant app ...
Post a Comment
Read more