Learning React
- Part 1: Installing and Configuring
- Part 2: Understanding Render()
- Part 3: Building Classes
- Part 4: React JSX
Using React
- Part 1: Importing Media
- Part 2: Working with Modules
- Part 3: States
- Part 4: Handling Events
- Part 5: Playing with AJAX
React is a popular JavaScript library for creating user interfaces. It combines many features of JavaScript ES6 together to create a powerful way to quickly create front-end functionality.
States
So far in this series, all of the examples have dealt with static content. While different components have been used and generated in new ways, the result is unchanging components. And, while that can be useful, to build toward interactivity, an important concept needs to be reviewed: states.
Components have States
Along with render() functions, all components also have a state. Upon creation, all classes that inherit from the class React.Component have a this.state property. This allows for setting internal variables and values that can be changed via another internal function, setState().
Using setState()
It may seem to make sense to simply change values through directly manipulating the this.state property. However, that is a very bad idea. Using the setState() function guarantees that the change will happen, and that the component will also update through calling its render() function, too.
Consider the following code:
Item.js
import React from 'react';
import Checkmark from './Checkmark.js'
class Item extends React.Component {
constructor(props) {
super(props);
this.state = {
isDone: false
};
}
render() {
return (
<li><input type="checkbox" name={this.props.number} /> TODO!</li>
);
}
}
export default Item;
In the constructor() function, the this.state property is set to an object containing one value, isDone, which is set to false.
Additional HTML has also be added to the code. The render() function now contains a checkbox and its attribute is now set to the this.props.number passed to the class from ShoppingList.
In-line and onEvent
In order for an element to react to a user event, it must have an event listener. Adding these to element in React is as simple as adding the property to the element.
For the HTML within the Item object to respond to clicking, for example, it is an onClick property.
import React from 'react';
import Checkmark from './Checkmark.js'
class Item extends React.Component {
constructor(props) {
super(props);
this.state = {
isDone: false
};
}
render() {
return (
<li><input
type="checkbox"
name={this.props.number}
onClick={() => this.setState({isDone: true})}
/> TODO!</li>
);
}
}
export default Item;
Event listeners work on callback functions. Instead of writing a full function here, an arrow function can be used. It will only be called when a user clicks on the INPUT element.
When a click happens and then function is called, it also calls this.setState(). The function is passed an object with a property, isDone, and it value is true.
Using setState() will overwrite the values of this.state, but it only does a shallow merge. This allows for quick changes based on new values for certain properties while retaining any others in the this.state object.
React-ing
Using the setState() function allows for changing a value and then re-calling render(). This means, if values are going to change and impact the visual results, render() needs to change.
Item.js
import React from 'react';
import Checkmark from './Checkmark.js'
class Item extends React.Component {
constructor(props) {
super(props);
this.state = {
isDone: false
};
}
render() {
let item;
if(this.state.isDone) {
item = <Checkmark />;
} else {
item = <input
type="checkbox"
name={this.props.number}
onClick={() => this.setState({isDone: true})}
/>;
}
return (
<li>{item} TODO!</li>
);
}
}
export default Item;
Checkmark.js
import React from 'react';
class Checkmark extends React.Component {
render() {
return(
<span role="img" aria-label="checkmark">✅</span>
);
}
}
export default Checkmark;
Now, in Item, the render() function will test for the internal this.state.isDone value and either call the new Checkmark class or show the existing INPUT element.
When the INPUT element is clicked, the setState() event is called, its state is updated (isDone is set to true) and, when render() is called again, this time the new Checkmark class is used for the variable item and the INPUT element is replaced visually.
A new Checkmark class was needed because JSX does not like multiple interpolated values being returned nested inside each other. Without the new class, it would have been a variable turned into its value inside a variable turned into its value inside of some elements. React throws an error on issues like that to prevent infinite loops and other dangerous problems.
Digital Ephemera 