React.js on ES6+ Tips for beginner


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


πŸŽƒ React.Component

Constructor

// 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.

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.

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

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

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

// 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.

// lib/DataBindComponent.jsx
export function handleChange(e) {
const newState = {};
newState[e.target.name] = e.target.value;
this.setState(newState);
}
// 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

// 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

πŸ–₯ Recommended VPS Service

VULTR provides high performance cloud compute environment for you. Vultr has 15 data-centers strategically placed around the globe, you can use a VPS with 512 MB memory for just $ 2.5 / month ($ 0.004 / hour). In addition, Vultr is up to 4 times faster than the competition, so please check it => Check Benchmark Results!!