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.

  • There are a lot of components patttern & it is high quality.
  • Server Side Rendering is being considered.
  • Some themes and color palettes are prepared.

๐Ÿ˜Ž 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

๐Ÿš• 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 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() {
this.onClick.bind(this)} {...this.props}>
sample text

๐ŸŽณ Render raw html

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

dangerouslySetInnerHTML={{__html: this.props.message}}>

๐Ÿ˜ผ 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


๐Ÿฃ 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

๐Ÿ–ฅ 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!!