React “#JSCodePattern”
React developers should be familiar with certain JavaScript code patterns. Once you understand these patterns, it is easy to review code written by other developers.
1. Class with constructor
ES2015 introduces class keyword. Most developers use class with constructors to initialise object properties. We use state as an object property within a React component.
class MyComp extends Component {
constructor() {
super();
this.state = { myState: ‘hello’ };
}
}
All React components inherit from Component. Within the constructor, there is a super() call which invokes the constructor of the Component class. In the above code, we use the constructor function to initialise the state (which is an object property).
2. Class with object properties
With ES2016, it is possible to initialise object properties without a constructor.
class MyComp extends Component {
state = { myState: ‘Hello’ };
}
We initialise state (object property) without a constructor.
3. Class with explicitly bound methods
A class has methods. With ES2015, we define methods within a class. However, these methods are not bound to the object (this). We explicitly do this in the constructor. Consider an event handler, handleSubmit. We define the method and provide a context to it as follows.
class MyComp extends Component {
constructor() {
super();
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(e) {
e.preventDefault();
// do some more stuff
}}
4. Class with function properties
We know how to define object properties. Taking it a step further, it is possible to define a property which is a function. ES2015 has an arrow function. The arrow function takes the context based on where it is defined. So, the arrow function has an implicitly bound context or this.
class MyComp extends Component {
handleSubmit = e => {
e.preventDefault();
// some more work
};
}
Within the handleSubmit event handler, this points correctly to the object.
5. Class with static property
React component has few static properties. One of them is propTypes. It provides for type-checking of props used within a component. There are two ways to define propTypes. One way is to define it outside the component.
MyComp.propTypes = {
myProp: PropTypes.string
};
The other way to define it within the class itself using the static keyword.
class MyComp extends Component {
static propTypes = {
myProp: PropTypes.string
};
}
6. Object destructuring
We use object destructuring to get the individual properties within an object. A React component uses two objects all the time — state and props. The code below shows how to get the props or state properties.
render() {
const { myProp1, myProp2 } = this.props;
const { myState1, myState2 } = this.state;
…
}
7. Spread operator
State management code uses the spread operator quite a lot. Consider a reducer in Redux that updates an existing property to an existing state.
case ActionTypes.ToggleSomeState:
return {
…state,
myState: !state.myState
}
With the spread operator, we copy the properties of an existing object to a new object. A spread operator is equivalent to Object.assign.
8. Array copy
In many places, we need a copy of an array. There are two ways to do this. One way is the traditional slice method.
const newArray = array.slice();
The other way is to use the spread operator.
const newArray = […array];
9. Transforming an array
A very common use case in the render method uses the map method of Array. With the map method, we transform an array of data to an array of React elements.
{data.map((item, index) => (
<li key={index}>{item.name}</li>
))}
10. Splice an item from array
In reducer functions, it is very common to splice an item from an array.
const itemIndex = array.findIndex(item => item.id === 1);
const newArray = array.slice();
newArray.splice(itemIndex, 1);
Since splice method changes the contents of the current array, we do an array copy before calling the splice method.
In this article, we reviewed 10 common JavaScript code patterns we encounter in our React application. Hopefully, this gives you a good head start to learn React, understand code samples in books and blogs. And if you have any questions, please let me know about it in comments.