React
React is a JavaScript library for building user interfaces.
All edits by Bogdan Shumei
- Programming Programming concepts like functions, objects, arrays, and to a lesser extent, classes
Programming concepts like functions, objects, arrays, and to a lesser extent, classes
Basic knowledge of JavaScript
Some familiarity with HTML
- Programming concepts like functions, objects, arrays, and to a lesser extent, classes
- Basic knowledge of JavaScript
- Some familiarity with HTML
Now that you know what concepts you should already be familiar with before working on React, let’s take a look at the industry trends.
Here are some of the concepts that you should be familiar with, to one degree or another:
Programming concepts like functions, objects, arrays, and to a lesser extent, classes
Basic knowledge of JavaScript
Some familiarity with HTML
ReactJS Prerequisites
ReactJS Prerequisites
ReactJS Prerequisites
Although the above can be achieved using just props, using state makes it extremely efficient. The following section covers the differences between props and State in React.
You first create an additional state object called “sub” for the button. When a button click event occurs, the method “ChangeMessage” is called. This method in turn uses the setState() method to update the values of message and sub and re-render the output.
import React, { Component } from 'react'
class State extends Component {
constructor(props) {
super(props)
this.state = {
message: "Subscribe to Simplilearn",
sub: 'Subscribe'
}
}
ChangeMessage=()=>{
this.setState({
message: "Thank you for Subscribing",
sub: "Subscribed"
})
}
render() {
return (
<div className='App'>
<h3>{this.state.message}</h3>
<button onClick={this.ChangeMessage}>{this.state.sub}</button>
</div>
)
}
}
export default StateConsider the scenario where the subscribe button is clicked. On clicking the button, the display message must change. To implement this, you make use of the setState() method.
setState() method enqueues all the updates made to the component state and instructs React to re-render the component and its children with the updated state.
this.setState({ quantity: value }
)A state can be updated to event handlers, server responses, or prop changes. This is done using setState method.
setState() Method
setState() Method
setState() Method
Find more entities like React
