No Programming, No Life
Dec 29, 2016 • 5 min read

React.js Tips & Useful Component Set for beginner

This article describes React.js tips & useful componet for beginner.

Useful Component Set: Material UI

It is a React Component sets supprting Google Material Design Guideline.

Allow function

The body of ES6 arrow functions share the same lexical this as the code that surrounds them.

// before
var getUserStoreStates = function(){
  return UserStore.getAjaxResult();

// after
const getUserStoreStates = () => UserStore.getAjaxResult();

const ajax = {
  get  : (url, params, callback) => {
      .end((err, res) => callback(err, res))

Stateless Functions

Most of your components would be stateless functions:

import React from 'react'

const App = ({greet, name}) => (
  return (<div className="commentBox">
    {greet}! I am a {name}.

App.propTypes = {
  greet: React.PropTypes.string.isRequired,
  name: React.PropTypes.string.isRequired


A component can have a attribute to identify the component named ref. All ref in the same componet are grouped into refs.

If you write the following code:

<input type="text" ref="name"/>
<input type="text" ref="mail"/>

You can access the element by or this.refs.mail.

Context Usage

// components/Parent.jsx
export default class Parent extends React.Component {
  static childContextTypes = {
    onLick: React.PropTypes.func,

  getChildContext() {
    return {
      onLick: this.onLick.bind(this),

  onLick(event) {
    // do something...

// components/Child.jsx
export default class Child extends React.Component {
  static contextTypes = {
    onClick: React.PropTypes.func.isRequired,

  onClick = (event) => {

  render() {
      <a onClick={this.onClick.bind(this)} {...this.props}>
        sample text

Render raw html

It is possible to draw in raw HTML by using dangerouslySetInnerHTML.

<div className="text" dangerouslySetInnerHTML=>

Using React addons

let children = React.addons.createFragment({
  right: props.rightChildren,
  left: props.leftChildren

JS Tips: Currency Formatting

[Number].toString().replace(/(\d)(?=(\d{3})+$)/g , '$1,');

Not use target=’_blank’

In React.js, we should not use target='_blank' in link tag. We should add rel="noreferrer noopener"

import React from "react";
import ReactDOM from "react-dom";

class Index extends React.Component {
  render() {
    return (
        rel="noreferrer noopener"
        Anchor Text

  <Index />,

Trouble shooting

Error is as follows:

Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {...}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons.


var newArray ={
    return { id:, url: obj.url, }

return newArray[0].url + newArray[0].id

Special Thanks