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 |
๐ฐ Stateless Functions
Most of your components would be stateless functions:
import React from 'react' |
๐ 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"/> |
You can access the element by this.refs.name
or this.refs.mail
.
๐ Context Usage
// components/Parent.jsx |
๐ณ Render raw html
It is possible to draw in raw HTML by using dangerouslySetInnerHTML
.
|
๐ผ Using React addons
let children = React.addons.createFragment({ |
- https://facebook.github.io/react/docs/addons.html
- https://facebook.github.io/react/docs/create-fragment.html
๐ฝ 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"; |
๐ฃ 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){ |
๐ 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!!