React Style Guideline

What kind of component style, typing and accessibility should I being using?

React functional components:

function MyComponent() {}

Implicit typing:

no function typing, but yes prop typing

props below are destructured as well for direct use

function MyComponent({
  title,
  data
}): {
  title: string,
  data: IProps
}

Accessibility:

svg image accessibility - include title and description (react will warn against making dashed attributes snake case)

<svg >
  <title>Default Avatar</title>
  <desc>Circle with a person inside</desc>
  <path
    d='M19.6365 20.'
    stroke='black'
    strokeLinecap='round'
    strokeLinejoin='round'
  />
 <circle cx='12' cy='12' r='11.5' stroke='black' />
</svg>

all interactive items (buttons, links, etc.) should be tab navigable

BEM style class names:

use BEM class name conventions

proj- block__ element -- modifier

e.g.

emed-dashboard__sidebar--logo