Enable Emmet className complete in JSX for Atom

This little trick saves me loads of time when writing React/JSX. Without the Atom keymap code you need to ctrl + e each time you want to expand a tag. That quickly becomes a pain. The steps below simplify it.

div.container (hit tab)

>>    <div className="container"></div>

Install react plugin

apm install react

Install Emmet

Atom > Preferences > Install  (search for Emmet & install)

Navigate to keymap

Atom > keymap... (this will open keymap.cson)

Add tab complete logic in keymap.cson

'atom-text-editor[data-grammar="source js jsx"]:not([mini])':
  'tab': 'emmet:expand-abbreviation-with-tab'

If the changes are not immediately active, quit and restart Atom.