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 (
    
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< span>
  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 (
      

        
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>
    );
  }
}

ReactDom.render(
  >,
  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 (
      

        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 (
       '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!!