Add JavaScript Environment in the docs and fix a few things

This commit is contained in:
Christopher Chedeau 2015-04-08 11:06:56 -07:00
parent e0a0bb1857
commit 1c7f39e461
3 changed files with 16 additions and 5 deletions

View File

@ -4,7 +4,7 @@ title: Integration with Existing App
layout: docs layout: docs
category: Guides category: Guides
permalink: docs/embedded-app.html permalink: docs/embedded-app.html
next: activityindicatorios next: javascript-environment
--- ---
Since React makes no assumptions about the rest of your technology stack its commonly noted as simply the `V` in `MVC` its easily embeddable within an existing non-React Native app. In fact, it integrates with other best practice community tools like [CocoaPods](http://cocoapods.org/). Since React makes no assumptions about the rest of your technology stack its commonly noted as simply the `V` in `MVC` its easily embeddable within an existing non-React Native app. In fact, it integrates with other best practice community tools like [CocoaPods](http://cocoapods.org/).

View File

@ -1,10 +1,18 @@
---
id: javascript-environment
title: JavaScript Environment
layout: docs
category: Guides
permalink: docs/javascript-environment.html
next: activityindicatorios
---
## JavaScript Runtime ## JavaScript Runtime
When using React Native, you're going to be running your JavaScript code in two environments: When using React Native, you're going to be running your JavaScript code in two environments:
* In the simulator and on the phone: [JavaScriptCore](http://trac.webkit.org/wiki/JavaScriptCore) which is the JavaScript engine that powers Safari and web views. Due to the absence of writable executable memory in iOS apps, it doesn't run with JIT. * In the simulator and on the phone: [JavaScriptCore](http://trac.webkit.org/wiki/JavaScriptCore) which is the JavaScript engine that powers Safari and web views. Due to the absence of writable executable memory in iOS apps, it doesn't run with JIT.
* When using Chrome debugging, it runs all the JavaScript code within Chrome itself and communicate with the obj-c via WebSocket. So you are using [V8](https://code.google.com/p/v8/). * When using Chrome debugging, it runs all the JavaScript code within Chrome itself and communicate with Objective-C via WebSocket. So you are using [V8](https://code.google.com/p/v8/).
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.
@ -14,12 +22,14 @@ While both environments are very similar, you may end up hitting some inconsiste
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: 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:
ES5 ES5
* Reserved Words: `promise.catch(function() { });` * Reserved Words: `promise.catch(function() { });`
ES6 ES6
* Arrow function: `<TouchableHighlight onPress={() => { this.setState({pressed: true}); }}`
* Arrow function: `<C onPress={() => this.setState({pressed: true})}`
* Call spread: `Math.max(...array);` * Call spread: `Math.max(...array);`
* Class: `class MyComponent extends React.Component { render() { return <View />; } }` * Class: `class C extends React.Component { render() { return <View />; } }`
* Destructuring: `var {isActive, style} = this.props;` * Destructuring: `var {isActive, style} = this.props;`
* Iteration: `for (var element of array) { }` * Iteration: `for (var element of array) { }`
* Computed Properties: `var key = 'abc'; var obj = {[key]: 10};` * Computed Properties: `var key = 'abc'; var obj = {[key]: 10};`
@ -29,5 +39,6 @@ ES6
* Template: ``var who = 'world'; var str = `Hello ${who}`;`` * Template: ``var who = 'world'; var str = `Hello ${who}`;``
ES7 ES7
* Object Spread: `var extended = { ...obj, a: 10 };` * Object Spread: `var extended = { ...obj, a: 10 };`
* Function Trailing Comma: `function f(a, b, c,) { }` * Function Trailing Comma: `function f(a, b, c,) { }`

View File

@ -30,7 +30,7 @@ function splitHeader(content) {
} }
function backtickify(str) { function backtickify(str) {
var escaped = '`' + str.replace(/\\/g, '\\\\').replace(/`/g, '\\`') + '`'; var escaped = '`' + str.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/{/g, '\\{') + '`';
// Replace require( with require\( so node-haste doesn't replace example // Replace require( with require\( so node-haste doesn't replace example
// require calls in the docs // require calls in the docs
return escaped.replace(/require\(/g, 'require\\('); return escaped.replace(/require\(/g, 'require\\(');