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) => {
    request
      .get(url)
      .query(params)
      .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}.
  </div>);
);

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

refs

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 this.refs.name 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) => {
    this.context.onClick(event);
  }

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

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 (
      <a
        href="http://example.com"
        target="_blank"
        rel="noreferrer noopener"
      >
        Anchor Text
      </a>
    );
  }
}

ReactDOM.render(
  <Index />,
  document.getElementById("root")
);

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.

Solution:

var newArray = this.state.oldArray.map(function(obj){
    return { id: obj.id, url: obj.url, }
});

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

Special Thanks