Skip to main content

React Style Guide

在寫 React 的時候要特別注意的 coding style（自己常常忘記），其他的就按照 javascript coding style guide 就可以了。

🐳 Rules​

🦀 Quotes​

Always use double quotes (") for JSX attributes, but single quotes (') for all other JS ans CSS.

eslint: jsx-quotes

why: Regular HTML attributes also typically use double quotes instead of single, so JSX attributes mirror this convention.

example:

// bad
<Foo bar='bar' />

// good
<Foo bar="bar" />
// bad
<Foo style={{ left: "20px" }} />

// good
<Foo style={{ left: '20px' }} />

🦀 Buttons​

This rules enforces an explicit type attribute for all the button elements and checks that its value is valid per spec (i.e., is one of "button", "submit", and "reset").

eslint-plugin-react: button-has-type

why: The default value of type attribute for button HTML element is "submit" which is often not the desired behavior and may lead to unexpected page reloads.

example:

// bad
<button>Hello</button>

// good
<button type="button">Hello</button>

🦀 No inline function in jsx​

Do not write a bind call or arrow function in a JSX prop.

eslint-plugin-react: jsx-no-bind

why: A bind call or arrow function in a JSX prop will create a brand new function on every single render. This is bad for performance, as it may cause unnecessary re-renders if a brand new function is passed as a prop to a component that uses reference equality check on the prop to determine if it should update.

note: 平常寫的時候應該是不需要這麼嚴格，比較要注意的是：如果已經把 event handler 封裝成 function 的話，就要特別檢查一下是不是可以避免寫 inline function。

example:

// bad
<Button onClick={(e) => console.log(e)}>Hello</Button>

// good
const handleClickButton = (e) => {
    console.log(e);
}
<Button onClick={handleClickButton}>Hello</Button>
// bad
const handleChange = (e) => {
    setValue(e.target.value);
    console.log(e.target.value);
    // ...
}
<input value="Hello" onChange={(e) => handleChange(e)} />

// good
const handleChange = (e) => {
    setValue(e.target.value);
    console.log(e.target.value);
    // ...
}
<input value="Hello" onChange={handleChange} />

🐳 Resource​