Update Tutorial.md

docs/Tutorial.md

@@ -45,31 +45,32 @@ For this tutorial let’s build a simple version of the Movies app that fetches
 
 The code below is a slightly modified version of the SampleApp that fetches the data we’ll need to build our application. The data fetching code isn’t really relevant to learning React Native so don’t worry too much about that but the rest of the app is very well documented.
 
-    /**
+```javascript
+/**
  * Sample React Native App
  * https://github.com/facebook/react-native
  */
-    'use strict';
+'use strict';
 
-    var React = require('react-native');
+var React = require('react-native');
-    var {
+var {
   AppRegistry,
   StyleSheet,
   Text,
   View,
-    } = React;
+} = React;
 
-    // The fetch module is used to make an HTTP request to rotten tomatoes's API
+// The fetch module is used to make an HTTP request to rotten tomatoes's API
-    var fetch = require('fetch');
+var fetch = require('fetch');
 
-    // This builds REQUEST_URL which is the URL we request data with
+// This builds REQUEST_URL which is the URL we request data with
-    var API_KEY = '7waqfqbprs7pajbz28mqf6vz';
+var API_KEY = '7waqfqbprs7pajbz28mqf6vz';
-    var API_URL = 'http://api.rottentomatoes.com/api/public/v1.0/lists/movies/in_theaters.json';
+var API_URL = 'http://api.rottentomatoes.com/api/public/v1.0/lists/movies/in_theaters.json';
-    var PAGE_SIZE = 25;
+var PAGE_SIZE = 25;
-    var PARAMS = '?apikey=' + API_KEY + '&page_limit=' + PAGE_SIZE;
+var PARAMS = '?apikey=' + API_KEY + '&page_limit=' + PAGE_SIZE;
-    var REQUEST_URL = API_URL + PARAMS;
+var REQUEST_URL = API_URL + PARAMS;
 
-    var SampleApp = React.createClass({
+var SampleApp = React.createClass({
   // We initialize our state to {movies: null} so that we can check
   // this.state.movies === null to determine whether the movies data has been
   // loaded or not. Once they have we can do this.setState({movies: data}).
@@ -127,23 +128,24 @@ The code below is a slightly modified version of the SampleApp that fetches the
       </View>
     );
   },
-    });
+});
 
-    // This is what styles our views. Setting flex to 1 makes a component take up
+// This is what styles our views. Setting flex to 1 makes a component take up
-    // the entire size of its parent. justifyContent and alignItems center the
+// the entire size of its parent. justifyContent and alignItems center the
-    // contents vertically and horizontally.
+// contents vertically and horizontally.
-    var styles = StyleSheet.create({
+var styles = StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: '#F5FCFF',
   },
-    });
+});
 
-    // This line simply tells the ObjC engine that when you supply the entry point
+// This line simply tells the ObjC engine that when you supply the entry point
-    // "SampleApp", render the component SampleApp (the component in this file)
+// "SampleApp", render the component SampleApp (the component in this file)
-    AppRegistry.registerComponent('SampleApp', () => SampleApp);
+AppRegistry.registerComponent('SampleApp', () => SampleApp);
+```
 
 After changing the entire contents of this file to the snippet above you should be able to simply cmd+R in the simulator to see the change. It should render “Loading movies..." until it gets the data back from Rotten Tomatoes at which point it should render “Movies loaded”.