Atom React Plugin

React support for the Atom Editor.

$ apm install react

Github - Atom Package

Features

Syntax Highlighting
Indentation
Code Folding
Snippets
JSX Reformatting
HTML to JSX conversion
Autocomplete
Automatic closing tag

Syntax Highlighting

Syntax highlighting improves readability of your JSX code. Tokenization of the JSX elements also provides the basis for JSX tag or attribute specific functionality.

Indentation

Automatic indentation helps you to keep your code indentation in order.

Code Folding

Code folding helps you to hide blocks of JSX code that you are not currently working on. Editor also highlights the start and the end of the fold so you can easily see where the closing or opening element of your block resides.

Snippets

Snippets include commonly used React specific boilerplate.

JSX Reformatting

JSX Reformatting enables you to refactor JSX code blocks for easier readability and indentation. Feature can be used from the command palette, edit menu or from the context menu.

HTML to JSX conversion

HTML to JSX conversion helps you to port your old HTML markup to JSX. This feature also comes handy when you copy & pasting code from for example the Bootstrap documentation. Feature can be used from the command palette, edit menu or from the context menu.

Autocomplete

Autocomplete helps you to type default React tags and attributes faster.

Automatic closing tag

New in 0.11
Closing tags are automatically inserted.

Snippets

Snippet Prefix Body
React: componentDidMount: fn() { ... } cdm 
componentDidMount: function() {
  ${1}
},
React: componentDidUpdate: fn(pp, ps) { ... } cdup 
componentDidUpdate: function(prevProps, prevState) {
  ${1}
},
React: componentWillMount: fn() { ... } cwm 
componentWillMount: function() {
  ${1}
},
React: componentWillReceiveProps: fn(np) { ... } cwr 
componentWillReceiveProps: function(nextProps) {
  ${1}
},
React: componentWillUnmount: fn() { ... } cwun 
componentWillUnmount: function() {
  ${1}
},
React: componentWillUpdate: fn(np, ns) { ... } cwu 
componentWillUpdate: function(nextProps, nextState) {
  ${1}
},
React: cx({ ... }) cx 
cx({
  $1: $2
});
React: forceUpdate(...) fup 
forceUpdate(${1:callback});
React: getDefaultProps: fn() { return {...} } gdp 
getDefaultProps: function() {
  return {
    ${1}
  };
},
React: getInitialState: fn() { return {...} } gis 
getInitialState: function() {
  return {
    ${1}: ${2}
  };
},
React: isMounted() ism 
isMounted()
React: propTypes { ... } pt 
propTypes: {
  ${1}: React.PropTypes.${2:string}
},
React: component skeleton rcc6 
import React from 'react'
 
const $1 = React.createClass({
  render () {
    return (
  
    )
  }
})
 
export default ${1}
React: render: fn() { return ... } ren 
render: function() {
  return (
    ${1:<div />}
  );
}
React: setState({ ... }) sst6 
this.setState({
  ${1}: ${2}
});
React: shouldComponentUpdate: fn(np, ns) { ... } scu 
shouldComponentUpdate: function(nextProps, nextState) {
  ${1}
},
React: this.props. props 
this.props.${1}
React: this.state. state 
this.state.${1}
React: render(component, container, [callback]) rrc 
React.render(${1:<$2 />}, ${3:document.body}${4:, ${5:callback}});
React: componentDidMount() { ... } cdm6 
componentDidMount() {
  ${1}
}
React: componentDidUpdate(pp, ps) { ... } cdup6 
componentDidUpdate(prevProps, prevState) {
  ${1}
}
React: componentWillMount() { ... } cwm6 
componentWillMount() {
  ${1}
}
React: componentWillReceiveProps(np) { ... } cwr6 
componentWillReceiveProps(nextProps) {
  ${1}
}
React: componentWillUnmount() { ... } cwun6 
componentWillUnmount: function() {
  ${1}
}
React: componentWillUpdate(np, ns) { ... } cwu6 
componentWillUpdate: function(nextProps, nextState) {
  ${1}
}
React: static defaultProps = { ... } dp 
static defaultProps = {
  ${1}
}
React: this.state = { ... } is 
this.state = {
  ${1}: ${2}
}
React: static propTypes = { ... } pt6 
static propTypes = {
  ${1}: React.PropTypes.${2:string}
},
React: class skeleton rcd 
import React from 'react'
 
class $1 extends React.Component {
  render () {
  
  }
}
 
export default ${1};
React: render() { return ... } ren6 
render() {
  return (
    ${1:<div />}
  );
}
React: shouldComponentUpdate(np, ns) { ... } scu6 
shouldComponentUpdate(nextProps, nextState) {
  ${1}
},
React: const { props: { ... } } = this props6 
const { props: { ${1} } } = this