status-im/react-native
2
0
Fork 0
mirror of https://github.com/status-im/react-native.git synced 2025-02-28 17:10:50 +00:00
Code Issues Projects Releases Wiki Activity

Merge branch 'babel-documentation'

Browse Source
This commit is contained in:
Brent Vatne 2015-05-31 10:08:16 -07:00
commit 53a7e070b8
1 changed files with 17 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
docs/JavaScriptEnvironment.md
View File

@ -17,9 +17,13 @@ When using React Native, you're going to be running your JavaScript code in two
While both environments are very similar, you may end up hitting some inconsistencies. We're likely going to experiment with other JS engines in the future, so it's best to avoid relying on specifics of any runtime. While both environments are very similar, you may end up hitting some inconsistencies. We're likely going to experiment with other JS engines in the future, so it's best to avoid relying on specifics of any runtime.
## JavaScript Transforms ## JavaScript Syntax Transformers
React Native ships with many JavaScript transforms to make writing code more enjoyable. If you are curious, you can see the [implementation of all those transformations](https://github.com/facebook/jstransform/tree/master/visitors). Here's the full list: Syntax transformers make writing code more enjoyable by allowing you to use new JavaScript syntax without having to wait for support on all interpreters.
As of version 0.5.0, React Native ships with the [Babel JavaScript compiler](https://babeljs.io). Check [Babel documentation](http://babeljs.io/docs/advanced/transformers/) on its supported transformations for more details.
Here's a full list of React Native's [enabled transformations](https://github.com/facebook/react-native/blob/master/packager/transformer.js#L21).
ES5 ES5
@ -27,18 +31,18 @@ ES5
ES6 ES6
* Arrow function: `<C onPress={() => this.setState({pressed: true})}` * [Arrow functions](http://babeljs.io/docs/learn-es2015/#arrows): `<C onPress={() => this.setState({pressed: true})}`
* Call spread: `Math.max(...array);` * [Call spread](http://babeljs.io/docs/learn-es2015/#default-rest-spread): `Math.max(...array);`
* Class: `class C extends React.Component { render() { return <View />; } }` * [Classes](http://babeljs.io/docs/learn-es2015/#classes): `class C extends React.Component { render() { return <View />; } }`
* Destructuring: `var {isActive, style} = this.props;` * [Destructuring](http://babeljs.io/docs/learn-es2015/#destructuring): `var {isActive, style} = this.props;`
* Iteration: `for (var element of array) { }` * [Iteration](http://babeljs.io/docs/learn-es2015/#iterators-for-of): `for (var element of array) { }`
* Computed Properties: `var key = 'abc'; var obj = {[key]: 10};` * [Computed Properties](http://babeljs.io/docs/learn-es2015/#enhanced-object-literals): `var key = 'abc'; var obj = {[key]: 10};`
* Object Consise Method: `var obj = { method() { return 10; } };` * Object Consise Method: `var obj = { method() { return 10; } };`
* Object Short Notation: `var name = 'vjeux'; var obj = { name };` * [Object Short Notation](http://babeljs.io/docs/learn-es2015/#enhanced-object-literals): `var name = 'vjeux'; var obj = { name };`
* Rest Params: `function(type, ...args) { }` * [Rest Params](https://github.com/sebmarkbage/ecmascript-rest-spread): `function(type, ...args) { }`
* Template: ``var who = 'world'; var str = `Hello ${who}`;`` * [Template Literals](http://babeljs.io/docs/learn-es2015/#template-strings): ``var who = 'world'; var str = `Hello ${who}`;``
ES7 ES7
* Object Spread: `var extended = { ...obj, a: 10 };` * [Object Spread](https://github.com/sebmarkbage/ecmascript-rest-spread): `var extended = { ...obj, a: 10 };`
* Function Trailing Comma: `function f(a, b, c,) { }` * [Function Trailing Comma](https://github.com/jeffmo/es-trailing-function-commas): `function f(a, b, c,) { }`