Rahul Jain
100 lines
2.5 KiB
Markdown
100 lines
2.5 KiB
Markdown
# Coding Style
|
|
|
|
## File Layout (`src/components/*.js`)
|
|
|
|
1. Imports
|
|
2. Reusable components needed for the main component
|
|
3. Main component (Eg: Addons in addons.js)
|
|
4. export default \<MainComponent\>;
|
|
|
|
## Reusable components
|
|
|
|
- Do not make a new file for smaller components.
|
|
- Smaller, reusable components needed in the main components should be added **above** the main component, **not** inside it.
|
|
- Use ES6 arrow functions for defining components.
|
|
|
|
## Spacing
|
|
|
|
1. **JS:**
|
|
|
|
- Use a space after `if`, `for`, `while`, `switch`.
|
|
- Do not use a space after the opening `(` and before the closing `)`.
|
|
- Use a space before and after destructuring objects.
|
|
|
|
```js
|
|
//good
|
|
const { apple, mangoes } = fruits;
|
|
|
|
//bad
|
|
const { apple, mangoes } = fruits;
|
|
```
|
|
|
|
|
|
//Same for destructuring props:
|
|
//good
|
|
const BeautifulComponent = ({ prop1, prop2 }) => {}
|
|
|
|
//bad
|
|
const UglyComponent = ({prop1, prop2}) => {}
|
|
```
|
|
|
|
2. **JSX:**
|
|
|
|
- Use a space before the forward slash (`/`) of a self-closing tag
|
|
|
|
```js
|
|
//good
|
|
<Foo />
|
|
|
|
//bad
|
|
<Foo/>
|
|
```
|
|
|
|
- Do **not** use spaces for JSX curly braces
|
|
|
|
```js
|
|
//good
|
|
<Foo bar={baz} />
|
|
|
|
//bad
|
|
<Foo bar={ baz } />
|
|
```
|
|
|
|
## **Props:**
|
|
|
|
- Use camelCase for prop names, or PascalCase if the prop value is a React component.
|
|
- Use new lines when props do not fit on the same line.
|
|
|
|
```js
|
|
//good
|
|
<Foo
|
|
prop1={value1}
|
|
prop2={value2}
|
|
prop3={value3}
|
|
/>
|
|
|
|
//bad
|
|
<Foo prop1={value1} prop2={value2} prop3={value3} />
|
|
```
|
|
|
|
## **Best practices:**
|
|
|
|
- **Always** add semicolons after a line.
|
|
- Use ES6 arrow functions.
|
|
- Keep the indentation in your code correct.
|
|
- Use 4 spaces for tabs.
|
|
- Don't Repeat Yourself. If you think you're repeating too much code, make a smaller component, or a function.
|
|
- **Always** add alt prop to `img` tags.
|
|
- Add `rel="noopener"` for `a` tags which has `target="_blank"`.
|
|
- Don't do `outline: none` on user input elements. If you do not want outline, give them faint, visible background on focus. This is for accessibility.
|
|
|
|
### Other things to note
|
|
|
|
- We are using [octicons](https://primer.style/octicons/) for icons. Use this if you need to add icons. Do **not** add a new library for icons.
|
|
- Try to not commit changes in `package.json`, `package-lock.json`.
|
|
- Discuss with contributors on discord if you're planning to add/remove a package.
|
|
|
|
## Further reading:
|
|
|
|
This guide is based on [airbnb's react guide](https://github.com/airbnb/javascript/tree/master/react). You can read all the best practices there.
|