React JS(Part 01)

React JS (Part 01)


What is React JS?

React Js is also called as React, react.js for simply. This is an open-source library that is created using JavaScript. The major functionality of react.js is making the single page UI s.

This is used for handling the view layer for mobile and web applications (works according to the MVC architecture). This was first created by Facebook and now it's maintained by Facebook and Instagram. React allows reusability as one of its qualities.

React allows the user to create large web applications. These applications can change a huge amount of data without reloading. Being fast, scalable and simple is the main qualities of react.js. This can be used combining with the JS libraries or frameworks (Angular JS in MVC).

Components/Building Blocks of React JS

These are a piece of user interfaces. These UI s contain the data. Basically, these components are JavaScript classes that have the state property and a render method. These are small in capacity and holds the quality of re-usability.

Special Features of React JS


  • JSX - This form abbreviates from JavaScript XML. This is the syntax used by the react JS. JSX syntax is processed into JS calls of React framework. It extends the ES6 so that HTML type of texts can co-exist with React JS. 

  • One-way Data Binding - React JS is created with the manner of unidirectional data flow or the one-way data binding. If the data flow is in another direction it will need additional features to manage it. But the one-way data binding gives control throughout the application that is developing. To provide the flexibility that leads to an increase in the efficiency Flux can be used as a design pattern. It helps to keep the data in the way of unidirectional. 

  • Virtual DOM - A representation of original DOM Modal. This modal works according to the one-way data-binding. When the updates happen in the web application, it will re-rendered the entire UI and then it will check the new DOM with the previous DOM. Then after that real DOM will be updated only with the new modifications. This makes the application faster.

  • Simplicity - React JS is having the component-based approach. So that it helps to keep and use re-useable components. So that React JS is simple to use.

  • Performance - The reason behind the great performance is managing a virtual DOM. Because it is a cross-platform method and keeping programming API that deals with HTML, XML or XHTML. This DOM is existing in memory. So that when creating components it is not directly writing to the DOM instead of that first it will write into the virtual components and then return it to the DOM. 

Props and State

Props are used for passing data and behaviours from container components to children. These are read-only.
States are used for keeping data that can be updated. These are readable and also writable. To update state it uses setState({}) method.This method is synchronous. Due to that if anyone wants to use state and props inside the setState method it can be used as setState((state,props)=>{}) . 


Comments

Post a Comment

Popular posts from this blog

"status": 404, "error": "not found", "message": "no message available", "path": "/api/employee"

Image
  first, make sure the YourController.java file that has the @Controller and the YourSpringBootFile.java file that has the @SpringBootApplication are in the same package. If you want your controller to be in a different package outside of YourSpringBootFile.java's package, then follow these instructions =  Spring: Run multiple "SpringApplication.Run()" in application main method There are 2 methods to overcome this Place the bootup application at the start of the package structure and rest all controllers inside it. Example : package com.spring.boot.app; - You bootup application(i.e. Main Method -SpringApplication.run(App.class, args);) You Rest Controller in with the same package structure Example: package com.spring.boot.app.rest; Explicitly define the Controller in the Bootup package. Method 1 is more cleaner. referred to:  https://stackoverflow.com/questions/31318107/spring-boot-cannot-access-rest-controller-on-localhost-404 https://stackoverflow.com/questions/3413520
Read more

There was an unexpected error (type=Not Found, status=404). No message available in Springboot

Image
 in my scenario, it was because I missed one of the dependencies. I referred to this :  https://stackoverflow.com/questions/36819277/issue-with-spring-there-was-an-unexpected-error-type-not-found-status-404 and got fixes it by adding the bellow code piece in pom.xml.           <dependency>         <groupId>org.apache.tomcat.embed</groupId>         <artifactId>tomcat-embed-jasper</artifactId>         <scope>provided</scope>     </dependency>     <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
Read more