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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 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:

1
2
3
4
5
6
7
8
9
10
11
12
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:

1
2
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// 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.

1
<div className="text" dangerouslySetInnerHTML={{__html: this.props.message}}>

Using React addons

1
2
3
4
let children = React.addons.createFragment({
right: props.rightChildren,
left: props.leftChildren
})

JS Tips: Currency Formatting

1
[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"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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:

1
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:

1
2
3
4
5
var newArray = this.state.oldArray.map(function(obj){
return { id: obj.id, url: obj.url, }
});
return newArray[0].url + newArray[0].id

Special Thanks