Thank you to @mxstbr for this solution.
I just want to elucidate and extend upon this gist, and just lay out some steps for anyone who might need this right now.
Install emmet and language-babel
First up, ensure that emmet and language-babel are installed in Atom.
Set your file's language
With your React component's .js file open in Atom, hit CTRL + SHIFT + L and set the language of the file to 'Babel ES6 JavaScript'.
Add a new key binding
In Atom, go to Settings > Key Bindings and click on your keymap file
Add the following lines to keymap.cson and save.
'atom-text-editor[data-grammar~="jsx"]:not([mini])':
'tab': 'emmet:expand-abbreviation-with-tab'
Head over to your .js file and add 'className' to your component JSX, the emmet way
div.yourclassname
Hit the TAB key
Enjoy!
Thanks again to @mxstbr for posting the solution as a gist
Top comments (1)
finally yeeeeeeeeeees
thank you so much