Thet Hmuu
Caleb's Blog

Caleb's Blog

React Style Guide (Highly Opinionated)

React Style Guide (Highly Opinionated)

library choices are only for current ongoing projects and might change

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