Skip to content

guidelines.md

Latest commit

 

History

History
308 lines (212 loc) · 6.22 KB

guidelines.md

File metadata and controls

308 lines (212 loc) · 6.22 KB
Raw

Coding Guidelines - ReactJS

Table of Contents

  1. Basic Rules
  2. Naming
  3. Declaration
  4. Alignment
  5. Quotes
  6. Spacing
  7. Props
  8. Tags
  9. Methods

Basic Rules

  • Only include one React component per file.
  • Use Functional components
  • Always use JSX syntax.
  • Do not use React.createElement unless you're initializing the app from a file that is not JSX.

Naming

  • Component Naming: Use the filename as the component name. For example, ReservationCard.jsx should have a reference name of ReservationCard. However, for root components of a directory, use index.jsx as the filename and use the directory name as the component name:

    // bad
import Footer from './Footer/Footer';

// bad
import Footer from './Footer/index';

// good
import Footer from './Footer';

  • Use PascalCase naming convention for filename as well as component name, e.g. GlobalHeader.js

    // Bad
// Filename: foo.js

const Foo = () => {}

export default Foo;


// Good
// Filename: Foo.js

const Foo = () => {}

export default Foo;

  • Use PascalCase for type names (Use Intefaces or Types).

  • Do not use "I" as a prefix for interface names.

  • Use PascalCase for enum values.

  • Use camelCase for function names.

  • Use camelCase for property names and local variables.

  • Use whole words in names when possible.

  • Use isXXXing or hasXXXXed for variables representing states of things (e.g. isLoading, hasCompletedOnboarding).

Alignment

  • Follow these alignment styles for JSX syntax

    // bad
<Foo superLongParam="bar"
    anotherSuperLongParam="baz" />

// good
<Foo
superLongParam="bar"
anotherSuperLongParam="baz"
/>

// if props fit in one line then keep it on the same line
<Foo bar="bar" />

// children get indented normally
<Foo
superLongParam="bar"
anotherSuperLongParam="baz"
>
    <Spazz />
</Foo>

Quotes

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

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

// good
<Foo bar="bar" />

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

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

Props

  • Always use camelCase for prop names.
// bad
<Foo
    UserName="hello"
    phone_number={12345678}
/>

// good
<Foo
    userName="hello"
    phoneNumber={12345678}
/>

Tags

  • Always self-close tags that have no children.

    // bad
<Foo className="stuff"></Foo>

// good
<Foo className="stuff" />

  • If your component has multi-line properties, close its tag on a new line.

    // bad
<Foo
    bar="bar"
    baz="baz" />

// good
<Foo
    bar="bar"
    baz="baz"
/>

Stateless function components

For stateless components use the function syntax, introduced in React 0.14.

```javascript
// Using an ES2015 (ES6) arrow function:
var Aquarium = (props) => {
    var fish = getFish(props.species);
    return <Tank>{fish}</Tank>;
};

// Or with destructuring and an implicit return, simply:
var Aquarium = ({species}) => (
    <Tank>
        {getFish(species)}
    </Tank>
);

// Then use: <Aquarium species="rainbowfish" />
```

Read More

Using handler methods

  • Name methods using 'handle' + triggering event, e.g. handleClick

  • Bind handler using the ES6 arrow syntax, so inside the callback it has always the right context

    const Foo = () => {

    handleClick = (e) => {
        // action
    }

    return <button onClick={handleClick}>Submit</button>;
}

Using “container” components for loading data from Stores

// CommentListContainer.js

const CommentListContainer = () => {
    const [state, setState] = React.useState();

    useEffect(() => {
    fetch("url")
    .then(response => response.json())
        // 4. Setting *dogImage* to the image url that we received from the response above
    .then(data => setState(data.message))
  },[]):
        
  return <CommentList comments={this.state.comments} />;
}



// CommentList.js

const CommentList = (props: Props) => {
    
    renderComment({body, author}) {
        return <li>{body}—{author}</li>;
    }
    
    return <ul> {props.comments.map(renderComment)} </ul>;
}

Source: https://medium.com/@learnreact/container-components-c0e67432e005

Closing Components without children

    return (
        <Foo>
            <Bar />
        </Foo>
    );

List iterations

When rendering a list of components from an array, do it inline if it makes sense. If the map function is too long or complicated, consider extracting it out into its own method on the component class.

    return (
        <ul>
            {this.state.fooList.map(fooItem => <FooItem>{fooItem}</FooItem>)}
        </ul>
    );

Formatting Attributes

Indentation and new line for component/element attributes.

<input
    type="text"
    value={this.state.foo}
    onChange={this._handleInputChange.bind(this, 'foo')}
/>

CSS styles

  • Static properties should be set in the SCSS, dynamic ones in JS.
.Foo {
    background-color: #ff0;
}
const Foo = () => {
    const styles = {
        'transform': 'translateX(' + this.state.position + ' + px)'
    };
    
    return <div className="Foo" styles={classes}>Foo Header</div>;
}
  • Use CSS modules (style files)
  • Tailwind CSS classes:
const BUTTON = 'w-24 full-rounded p-4 ....';

Use higherOrder functions to add scroll/resize listeners

https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750

Sources