React.js on ES6+ Tips for beginner

This article describes React.js on ES6+ tips for beginner.


React.Component

Constructor

1
2
3
4
5
6
7
8
9
10
11
// If using only props
constructor(props) {
super(props);
//anything to do
}
// If using props & context
constructor(props, context) {
super(props, context);
//anything to do
}

State Initialization

We should assign a object directly to this.state for initialization.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
constructor(props) {
super(props);
this.state = {message: ''};
}
componentDidMount() {
this.setState({message: 'fuga'});
}
render(){
return (
<h1>Sample title: {this.state.message}</h1>
);
}

Binding this for custom method

If you impliment a method that handles state, props or refs, you should bind this to the method.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this); // <= binding
this.state = {message: ''};
}
handleSubmit(){
var name = ReactDOM.findDOMNode(this.refs.name).value.trim();
var email = ReactDOM.findDOMNode(this.refs.email).value.trim();
// do something
}
componentDidMount() {
this.setState({message: 'hoge'});
}

props Initialization, propType Definition

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class Video extends React.Component {
static defaultProps = {
autoPlay: false,
maxLoops: 10,
}
static propTypes = {
autoPlay: React.PropTypes.bool.isRequired,
maxLoops: React.PropTypes.number.isRequired,
posterFrameSrc: React.PropTypes.string.isRequired,
videoSrc: React.PropTypes.string.isRequired,
}
state = {
loopsRemaining: this.props.maxLoops,
}
}

contextType Definition

1
2
3
4
5
6
7
8
9
10
11
12
13
class Header extends React.Component{
static contextTypes = {
router: React.PropTypes.object.isRequired
}
render(){
return (
<header>
<h1>Sample title: {this.state.message}</h1>
</header>
);
}
};

Module System

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// components/ParentComponent.jsx
import React from 'react';
import Component1 from './Component1';
class ParentComponent extends React.Component {
render() {
return (
<div>
<Component1 />
</div>
);
}
}
ReactDom.render(
<ParentComponent />,
document.getElementById('components')
);
// components/Component1.jsx
import React from 'react';
// Export => Accept importing
// Default => This class will be called default when it is imported
export default class Comp1 extends React.Component {
render() {
return (
<div>
Comp 1.
</div>
);
}
}

Insted of Mixin

In ES6 Style, we can not use mixin in React.js.
So, I create function and use it.

1
2
3
4
5
6
// lib/DataBindComponent.jsx
export function handleChange(e) {
const newState = {};
newState[e.target.name] = e.target.value;
this.setState(newState);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// components/Hello.jsx
import {handleChange} from '../lib/DataBindComponent.jsx';
export default class Hello extends React.Component {
state = {
name: ''
}
render() {
return (
<input type='text' name='name'
value={this.state.name}
onChange={handleChange.bind(this)} />
);
}
}

Allow function

1
2
3
4
5
6
7
8
9
10
11
12
// Manually bind, wherever you need to
class PostInfo extends React.Component {
constructor(props) {
super(props);
// Manually bind this method to the component instance...
this.handleOptionsButtonClick = this.handleOptionsButtonClick.bind(this);
}
handleOptionsButtonClick(e) {
// ...to ensure that 'this' refers to the component instance here.
this.setState({showOptionsModal: true});
}
}

Special Thanks