Upgrade Guide: Proofreading complete

Author: ikoevska

content/docs/en/getting-started/4-upgrade-guide.md

@@ -8,17 +8,23 @@ outdated: false
 
 If you scaffolded a NativeScript-Vue app using the 1.3.1 version of the Vue-CLI template, it's time to upgrade to the newest 2.0 version. This guide will help you do that.
 
-The new template has a different folder structure from the older one:
+## Upgrade overivew
+
+The new template has a different folder structure:
 
 ![New folder structure](/screenshots/old-new-folder-structure.png)
 
-The upgrade process involves creating a new project from the updated template, copying files from your old app into the new one, and then rearranging and adding some files.
+The simplified upgrade process involves:
+
+1. Creating a new project from the updated template.
+1. Copying files from your old app into the new one.
+1. Rearranging and adding some files.
 
 ## Step 1: Create new app
 
-Start by creating a new app using the Vue-CLI template.
+Use the Vue-CLI template to create a new app. Make sure to run the same preinstallation commands that you used for the old version. For example, if you installed Vuex in the CLI the first time, do it again now.
 
-> **TIP:** In your new project, use the same preinstallation commands that you used when creating the older version. For example, if you installed Vuex in the CLI the first time, do it again now.
+Run the following command to create a new project from the Vue-CLI template.
 
 ```shell
 $ npm install -g @vue/cli @vue/cli-init
@@ -30,30 +36,38 @@ $ # or
 $ tns run ios --bundle
 ```
 
-## Step 2: Replace the app resources
+## Step 2: Replace `App_Resources`
 
 First, copy your old app's `App_Resources` folder from `./template/app/`. Next, paste it into the new app's `app` folder. Make sure that you're replacing the new `App_Resources` folder.
 
 ## Step 3: Merge the `src` and `app` folders
 
 Copy all the folders in `src` from your old app and paste them into the `app` folder in the new app.
 
-If you have custom fonts, move the `src/assets/fonts` folder to `app/fonts` to let NativeScript load them automatically.
+If you have custom fonts, move the contents of the `src/assets/fonts` folder to `app/fonts`. This ensures that NativeScript will load your custom fonts automatically.
 
 ## Step 4: Edit `main.js`
 
-NativeScript 4.0 introduced two major improvements:
+Edit `main.js`'s Vue initialization block to resemble:
+
+```js
+new Vue({
+  render: h => h('frame', [h(HelloWorld)]),
+}).$start();
+```
+
+NativeScript 4.0 brings two major improvements:
 
 * a new `<Frame>` element
-* a way to change the root element of our applications that lets you share common view elements across pages (navigations).
+* a new way to change the root element of your app that lets you share common view elements across pages (navigations).
 
-Prior to NativeScript 4.0, the root element was a `<Frame>` which was implicitly created by NativeScript when the application started.
+Before NativeScript 4.0, the root element was a `<Frame>` element which was implicitly created by NativeScript when the application started.
 
 With the latest changes, `<Frame>` and `<Page>` elements are longer automatically created. So, in NativeScript-Vue 2.0.0, you need to explicitly add these elements to your template.
 
 To keep the previous behavior of having a single root `<Frame>`, you can change your root Vue instance to have a `<Frame>` and a `<Page>` element.
 
-**Example**
+**Example: Adding `<Frame>` and `<Page>` to the template**
 
 ```JavaScript
 // in older versions
@@ -77,7 +91,9 @@ new Vue({
 }).$start()
 ```
 
-This lets you use a shared element across different pages. For example, a `<SideDrawer>`:
+This lets you use a shared element across different pages. 
+
+**Example: Using a shared `<SideDrawer>` element**
 
 ```js
 new Vue({
@@ -94,39 +110,31 @@ new Vue({
 }).$start()
 ```
 
-In its simplest form, however, edit `main.js`'s Vue initialization block to resemble:
-
-```js
-new Vue({
-  render: h => h('frame', [h(HelloWorld)]),
-}).$start();
-```
-
 ## Step 5: Edit paths
 
 Because the folder structure has changed, you need to edit the paths in your new app to point to your styles, fonts, and images.
 
-**Example**
+**Example: Changing image references**
 
-If you have images from your old app referenced like this:
+In your old app, you are likely to have referenced images like this.
 
 ```HTML
 <Image v-if="surprise" src="~/images/NativeScript-Vue.png"/>
 ```
 
-Change the path:
+To ensure that NativeScript loads the images, change the path reference to the following.
 
 ```HTML
 <Image v-if="surprise" src="~/assets/images/NativeScript-Vue.png"/>
 ```
 
 ## (If needed) Step 6: Fix manual routing props
 
-If your app uses manual routing, the syntax for passing props has changed.
+If your app uses manual routing, the syntax for passing props has changed. Note that this change might not be required in all projects.
 
-Old syntax:
+Your old syntax is likely to look like this.
 
-```js
+```JavaScript
 this.$navigateTo(NewPage, {
                     transition: {},
                     transitionIOS: {},
@@ -141,9 +149,9 @@ this.$navigateTo(NewPage, {
                 });
 ```
 
-New syntax:
+To preserve the manual routing behavior in your new app, change your syntax to the following: 
 
-```js
+```JavaScript
 this.$navigateTo(NewPage, {
                     transition: {},
                     transitionIOS: {},
@@ -158,11 +166,13 @@ this.$navigateTo(NewPage, {
 
 ## Step 7: Align `package.json`
 
-Copy the relevant values from your old app's root `package.json` file into the new app's root `package.json` file. This will most likely entail copying the `Dependencies:` block, but you might also need to realign the new app's app version and description at the top of `package.json`.
+Copy the relevant values from your old app's root `package.json` file into the new app's root `package.json` file. 
+
+You will likely need to copy the `Dependencies:` block and, in some cases, realign the new app's app version and description at the top of `package.json`.
 
 ## Step 8: Clean and run
 
-At this point, it's a good idea to clean the new app's folders and reinstall any dependencies.
+Run the following command to clean the new app's folders and reinstall any dependencies.
 
 ```shell
 $ cd <project-name>
@@ -175,7 +185,9 @@ $ tns run ios --bundle
 
 ## (Optional) Step 8: Try HMR
 
-Just recently NativeScript received support for HMR (Hot Module Replacement). The latest version of NativeScript-Vue supports it out-of-the-box but you will need to install the latest (and greatest) version of the NativeScript CLI.
+NativeScript now provides support for HMR (Hot Module Replacement). The latest version of NativeScript-Vue provides out-of-the-box HMR support as well but requires the NativeScript CLI. 
+
+Run the following command to get HMR support by installing the latest and greatest version of the NativeScript CLI.
 
 ```shell
 $ npm install -g nativescript@next