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) => {
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={{__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 (
<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

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