What is ReactJS Component API?

In this tutorial we are reading about “What is ReactJS Component API?”.
There are three methods to be explained in the React Component API
  • setState()
  • forceUpdate()
  • ReactDOM.findDOMNode()
Instead of a React Component are created internally in React when rendering.These instances are reused in subsequent renders,and can be accessed in your component methods as this.

Set State

setState() method is used for updating the state of the component. State method is useful to add the changes to the original state but it will not replace the state.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import React from 'react';
class App extends React.Component {
constructor() {
super();
this.state = {
data: []
}
this.setStateHandler = this.setStateHandler.bind(this);
};
setStateHandler() {
var item = "setState..."
var myArray = this.state.data;
myArray.push(item)
this.setState({data: myArray})
};
render() {
return (
<div><button>SET STATE</button>
<h4>State Array: {this.state.data}</h4>
</div>
);
}
}
export default App;
The method starts with an empty array and each time we click the button, state will be updated. The result of the above example is rendered as:
What is ReactJS Component API?

Force Update

Use forceUpdate() method, to update the component manually.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import React from 'react';

class App extends React.Component {
constructor() {
super();
this.forceUpdateHandler = this.forceUpdateHandler.bind(this);
};
forceUpdateHandler() {
this.forceUpdate();
};
render() {
return (
<div><button>FORCE UPDATE</button>
<h4>Random number: {Math.random()}</h4>
</div>
);
}
}
export default App;
The above example illustrates that the random number will be updated every time on clicking the button.
What is ReactJS Component API?

Find Dom Node

ReactDOM.findDOMNode() method is used for DOM manipulation.First we need to import react-dom.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
constructor() {
super();
this.findDomNodeHandler = this.findDomNodeHandler.bind(this);
};
findDomNodeHandler() {
var myDiv = document.getElementById('myDiv');
ReactDOM.findDOMNode(myDiv).style.color = 'green';
}
render() {
return (
<div><button>FIND DOME NODE</button>
<div id="myDiv">NODE</div>
</div>
);
}
}
export default App;
The below example illustrate the color of myDIv element is changed to green on clicking the button.
What is ReactJS Component API?
So in this tutorial we have read about “What is ReactJS Component API?”.

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