Skip to content

Commit f9b3f91

Browse files
committed
update JS environment documentation for Babel, and explain what a transpiler does.
1 parent 1a4f270 commit f9b3f91

1 file changed

Lines changed: 17 additions & 13 deletions

File tree

docs/JavaScriptEnvironment.md

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -17,28 +17,32 @@ When using React Native, you're going to be running your JavaScript code in two
1717
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.
1818

1919

20-
## JavaScript Transforms
20+
## JavaScript Syntax Transformers
2121

22-
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:
22+
Syntax transformers make code writing more enjoyable by enabling proposed-but-non-standard javascript syntax.
23+
24+
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.
25+
26+
Here's a full list of React Native's [enabled transformations](https://github.com/facebook/react-native/blob/master/packager/transformer.js#L21).
2327

2428
ES5
2529

2630
* Reserved Words: `promise.catch(function() { });`
2731

2832
ES6
2933

30-
* Arrow function: `<C onPress={() => this.setState({pressed: true})}`
31-
* Call spread: `Math.max(...array);`
32-
* Class: `class C extends React.Component { render() { return <View />; } }`
33-
* Destructuring: `var {isActive, style} = this.props;`
34-
* Iteration: `for (var element of array) { }`
35-
* Computed Properties: `var key = 'abc'; var obj = {[key]: 10};`
34+
* [Arrow functions](http://babeljs.io/docs/learn-es2015/#arrows): `<C onPress={() => this.setState({pressed: true})}`
35+
* [Call spread](http://babeljs.io/docs/learn-es2015/#default-rest-spread): `Math.max(...array);`
36+
* [Classes](http://babeljs.io/docs/learn-es2015/#classes): `class C extends React.Component { render() { return <View />; } }`
37+
* [Destructuring](http://babeljs.io/docs/learn-es2015/#destructuring): `var {isActive, style} = this.props;`
38+
* [Iteration](http://babeljs.io/docs/learn-es2015/#iterators-for-of): `for (var element of array) { }`
39+
* [Computed Properties](http://babeljs.io/docs/learn-es2015/#enhanced-object-literals): `var key = 'abc'; var obj = {[key]: 10};`
3640
* Object Consise Method: `var obj = { method() { return 10; } };`
37-
* Object Short Notation: `var name = 'vjeux'; var obj = { name };`
38-
* Rest Params: `function(type, ...args) { }`
39-
* Template: ``var who = 'world'; var str = `Hello ${who}`;``
41+
* [Object Short Notation](http://babeljs.io/docs/learn-es2015/#enhanced-object-literals): `var name = 'vjeux'; var obj = { name };`
42+
* [Rest Params](https://github.com/sebmarkbage/ecmascript-rest-spread): `function(type, ...args) { }`
43+
* [Template Literals](http://babeljs.io/docs/learn-es2015/#template-strings): ``var who = 'world'; var str = `Hello ${who}`;``
4044

4145
ES7
4246

43-
* Object Spread: `var extended = { ...obj, a: 10 };`
44-
* Function Trailing Comma: `function f(a, b, c,) { }`
47+
* [Object Spread](https://github.com/sebmarkbage/ecmascript-rest-spread): `var extended = { ...obj, a: 10 };`
48+
* [Function Trailing Comma](https://github.com/jeffmo/es-trailing-function-commas): `function f(a, b, c,) { }`

0 commit comments

Comments
 (0)