Is it possible to use async / await in React JS?

Question

I started programming in React Native, and I got used to use the syntax:

async myFunction(){     ...     return await otherFunction(); } 

But I don't know how to make it compatible with React JS and React Native in a shared package. How can I accomplish this so that it works in both platforms?

Thanks!

Answer 1

If you building using create-react-app it's been available since v0.2.3

https://github.com/facebookincubator/create-react-app/releases/tag/v0.2.3

It can be used inside a Component like this

class App extends Component {   constructor(props) {     super(props);     this.state = { message: '' };   }    async componentDidMount() {     this.setState({ message: 'loading...' });     let d = await getData('/posts/1');     this.setState({ message: d });   }    render() {     let { message } = this.state;     return (       <div className="App">         <p className="App-intro">           { message }         </p>       </div>     );   } } 

See:

https://github.com/facebookincubator/create-react-app/issues/1024

Answer 2

React Native ships with Babel and some Babel presets, whereas React on the web is just React related code.

If you want to use async/await on the web today you'll need Babel and the correct transforms: https://babeljs.io/docs/plugins/transform-async-to-generator/

or the stage-1 presets, which is fairly common in React apps today. http://babeljs.io/docs/plugins/preset-stage-1/