Thet Hmuu
Caleb's Blog

Caleb's Blog

React Style Guide (Highly Opinionated)

Thet Hmuu's photo
Thet Hmuu
·May 10, 2022·

2 min read

✅ This guide is aimed for developers from NexStack.

Basic Rules

  • For CSS framework, only use Bootstrap. You can also use reactstrap which is a Boostrap component library.
  • For spacings like margin and padding, use Bootstrap classes if possible
  • For icons, only use react-icons (includes font awesome)
  • For colors, always use color variables and media query breakpoints from globals.js - eg. var(—primary)
  • Don’t use CSS from Figma!

CSS

Font Size

  • For font-size, just use "rem" unit. Basically, 1 rem = 16px unless you change it on body like
    body {
      font-size: 14px;
    }
    
    So, you can write 1.25rem instead of 20px, and 2rem instead of 32px.

Responsiveness

  • Try to not use "width" because it will add complexity when it comes to responsiveness. You can instead use Flexbox to adjust widths for layout system.
  • If width is needed, max-width is recommended to be used instead because it will automatically make the elements shrink for small devices.
  • For media query values, "min-width" is more recommended as we are developing with "mobile-first" approach. So,
    .profileCard {
    text-align: center;
    }
    @media (min-width: 640px) {
    .profileCard {
      text-align: left;
    }
    }
    
    This will center text on mobile, and left align it on screens 640px and wider.

Reusable media queries (with Emotion JS)

I've already set up media breakpoints in 'utils/breakpoints.js'.

You can import that like

import bp from '@/utils/breakpoints'

use like

titleText: css`
  color: #718096;

  @media (min-width: ${bp['sm']}) {
    color: green;
  }
`

Available keys = sm, md, lg, xl, xxl

VSCode Extensions

  • Prettier (set Prettier as formatter in settings)
  • Import Cost
  • Better Comments
  • ES7+ React/Redux/React-Native snippets
  • Auto Import
  • GitLens

Naming

  • Mainly use camelCase for everything (variables, filenames, component prop names).
  • Use PascalCase for component function names and component file names.

Component Naming:

Use the filename as the component name. For example, LoginForm.js should have a reference name of LoginForm. However, for root components of a directory, use index.js 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’;

Props

Always use camelCase for prop names.

// bad
<Foo
  UserName="hello"
  phone_number={12345678}
/>

// good
<Foo
  userName="hello"
  phoneNumber={12345678}
  component={SomeComponent}
/>
 
Share this