What are React Style Guides from Airbnb - Props in camelCase?

Overview

Airbnb has maintained a JavaScript repository on GitHub to store a list of JavaScript best practices that it follows. Airbnb also maintains these repositories on CSS, React, CSS-in-JavaScript, etc.

These repositories are about making our React code clearer and cleaner. However, others make the React app run faster.

Note: You can look up the complete style guide here.

In this shot, we’ll learn about props in camelCase.

Props in camelCase

Prop names in components should be written in camelCase.

For example, the prop names in the component below are not up to the mark:

    // bad
    <Component oneprop="1"
               twoprop="2"
    />

Prop names are conjoined words that describe what the props do. The first letter of each conjoined word should start with a capital letter except for the first word as shown below:

    iamaprop // not camelCased
    iAmAProp //camelCased

    isdefault // not camelCased
    isDefault // camelCased

    // good
    <Component oneProp="1"
               twoProp="2"
    />

Free Resources