States and Props in ReactJS

In this article we are reading about “States and Props in ReactJS”.
Dynamic apps must need to pass data around it’s system. In React, data movement happens mostly among components and external services that provide the original data (eg HTTP, localStorage).
Props are immutable and dumb which means they can only be passed from parent components down and cannot be changed. This poses a challenge because, modern apps do not rely on having all of it’s states ready on page load. Ajax or Events could happen and when data returns, someone needs to be responsible for making updates. This is where React states comes in.
On initializing React, we define an initial state and keep the state in sync with the props. Once the state is updated, the props can then be easily kept in sync:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//js
var Counter = React.createClass({
getInitialState: function() {
return {
counter: 0
};
},
render: function() {
return
<div>
<h2>{this.props.name}</h2>
{this.state.counter}

</div>
;
}
});

ReactDOM.render(
,
document.getElementById('container')
);
1
2
3
//html
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<div id="container"><!-- This element's contents will be replaced with your component. --></div>
The example is still dumb because the responsibility of state in the context can still be achieved with props. While we go deeper, we will see better reasons for the existence of states.
So in this article we have read about “States and Props in ReactJS”.

Comments

Post a Comment

Popular posts from this blog

Java Number Class

Image
In this article we are reading about  “ Java Number Class ” . Java Number class is an  abstract  class which is placed in  java.lang  package. It has  four  abstract methods and two  concrete methods. The abstract class Number is the superclass of classes BigDecimal, BigInteger, Byte, Double, Float, Integer, Long, and Short. This class contains a single consructor  number() . In Java language, we mostly work with a  primitive data type , but Java also provides a  wrapper class  under the abstract class numbers in java.lang package, there are six subclasses under the class ‘numbers’. The primitive data types are ‘wrapped’ under these Java classes for their corresponding objects. This wrapping is usually done by the compiler. When an object is converted into primitive type than it is called Autoboxing, and then again transferred to an object it is called Unboxing. The following figure shows the class hier...
Read more

Java Character Class

In this article we are reading about  “ Java Character Class ” . The Character class simply a wrapper class for the primitive type char. It wraps the char primitive value to an object. An object of type Character contains a single field whose type is char .  So what would be the benefit if wraps around the primitive data type to an object? Well basically we would be able to access all the methods that is readily available on the Character class which is very useful. In addition, this class provides several methods for determining a character’s category (lowercase letter, digit, etc.) and for converting characters from uppercase to lowercase and vice versa. We will go over each and every method available to Byte class thoroughly. Character information is based on the Unicode Standard, version 6.2.0. The methods and data of class Character are defined by the information in the UnicodeData file that is part of the Unicode Character Datab...
Read more

What are Web Resources in Microsoft Dynamics 365?

Image
In this article we are reading about  “What are Web Resources in Microsoft Dynamics 365 ?” . Web Resources in Dynamics 365  are virtual files stored in the Dynamics 365 Database and typically used by developer and designer to extend web application. In Dynamics 365(online), we use Web resources to upload upload files to Dynamics 365 database and then reference them by name. In Dynamics 365, Web resources are limited to specific types of filters. The following types of files can be used to create Web Resources in Dynamics 365. File Type File name extension Webpage (HTML) .htm, .html Style Sheet(CSS) .css Script(Jscript, JavaScript) .js Data (XML) .xml Image (PNG, JPG, GIF) .png, .jpg,  .gif. Silverlight (XAP) .xap StyleSheet(XSL) .xsl, .xslt Image (ICO) .ico How to create Web Resource in Dynamics 365? To create Web Resource in Dynamics 365, navigate toSettings | Customizations | Customize the System. Now go toComponents | Web Resources | Click...
Read more