part4

4-cli-components/0-overview.md

@@ -1,6 +1,6 @@
-While it is possible to create an entire Vue.js application in a single JavaScript file, it will become unmanageable in all but the smallest of applications. To support breaking your application into smaller units, Vue allows you to create components. Components are reusable building blocks from which you can create your application.
+While it's possible to create an entire Vue.js application in a single JavaScript file, it will become unmanageable in all but the smallest of applications. To support breaking your application into smaller units, Vue allows you to create components. Components are reusable building blocks from which you can create your application.
 
-Components can be created as JavaScript files, or through a single-file component with a *.vue* extension. Single-file components use a special syntax which cannot be read by a browser and must be converted into the appropriate JavaScript, HTML and CSS. This process of converting specialized syntax into something able to be read by a browser is known as bundling, and requires additional tooling such as webpack.
+Components can be created as JavaScript files, or through a single-file component with a *.vue* extension. Single-file components use a _special syntax_ which cannot be read by a browser and must be converted into the appropriate JavaScript, HTML and CSS. The process of converting specialized syntax into something able to be read by a browser is known as _bundling_, and requires additional tooling such as webpack.
 
 Fortunately, Vue also provides a command line interface (CLI) which can be used to bootstrap an application. The CLI will configure all of the necessary tooling, including a bundler and development server.
 

4-cli-components/1-vue-cli.md

@@ -2,17 +2,17 @@ The Vue CLI (command line interface) provides a suite of tools for development i
 
 ## Bootstrapping
 
-The core feature of Vue CLI is to bootstrap an application. The *create* script provides a wizard which allows you to select from some of the most common configurations, including
+The core feature of Vue CLI is to bootstrap an application. The *create* script provides a wizard which allows you to select from some of the most common configurations, including:
 
-- Linting options
-- Application type
-- Babel support
-- Language - JavaScript or TypeScript
+- **Linting options**. _Linting_ is something is a task you perform to ensure that all code looks consistent. It can also help uncover errors.
+- **Application type**. You can choose whether to add Progressive Web Apps support.
+- **Babel support**. Babel's job is to convert newer JavaScript syntax to older forms of JavaScript, should your app need to be used in older browsers.
+- **Language** - JavaScript or TypeScript. It's perfectly fine to go with either option. TypeScript brings you types among other features and could be a good option as your application grows. Vue itself is built in TypeScript.
 
 ## Build process
 
-Vue CLI is designed to work with single-file Vue components, or *.vue* files. *.vue* files use a special syntax which is unreadable to browsers, and needs to be converted into the appropriate JavaScript, HTML and CSS. This process is managed by a *module bundler* or *bundler*. Vue CLI uses [webpack](https://webpack.js.org/) as its default bundler, and includes a default configuration which will work for most scenarios. By using Vue CLI we can skip the steps required for configuring a bundler and instead use the setup provided.
+The Vue CLI is designed to work with single-file Vue components, or *.vue* files. *.vue* files uses a _special syntax_ which is unreadable to browsers, and needs to be converted into the appropriate JavaScript, HTML and CSS. This process is managed by a *module bundler* or *bundler*. Vue CLI uses [webpack](https://webpack.js.org/) as its default bundler, and includes a default configuration which will work for most scenarios. By using Vue CLI you can skip the steps required for configuring a bundler and instead use the setup provided.
 
 ## Development server
 
-Developing any type of application requires trial and error. You will make a few changes, load the page in the browser to test it, make a few more changes, and repeat this process until everything behaves as you expect. We want to minimize the number of steps involved in this process. To streamline development, Vue CLI includes a development server. Each time you save a file, the development server will detect file changes, rebuild (or re-bundle) the project, and allow you to test the page in the browser.
+Developing any type of application requires trial and error. You will make a few changes, load the page in the browser ,to test it, make a few more changes, and repeat this process until everything behaves as you expect. You want to minimize the number of steps involved in this process. To streamline development, Vue CLI includes a development server. Each time you save a file, the development server will detect file changes, rebuild (or re-bundle) the project, and allow you to test the page in the browser.

4-cli-components/3-vue-components.md

@@ -1,10 +1,10 @@
-By definition, a component is "a part or element of a larger whole". When we think about creating an application, we typically work with smaller parts and combine them into the larger whole - our application. Vue allows us to create components which we can then use to create a full application.
+By definition, a component is "a part or element of a larger whole". When you think about creating an application, you typically work with smaller parts and combine them into a larger whole - your application. Vue allows you to create components which we can then use to create a full application.
 
 ## Vue components
 
 While you can create components using JavaScript files, the more common method is to create single-file components by using the Vue syntax inside of a *.vue* file. Single-file components allow for a cleaner structure and a more self-contained setup. They even allow you to use various pre-processors, such as Pug or Stylus.
 
-When creating components you are in essence creating new tags you can use in your application in a similar fashion to normal HTML tags. This allows you to have a form of semantic tags making it clearer what is actually being displayed on a page. A tag like `<booking-form></booking-form>` would likely display a form used to create a booking, and `<booking-list></booking-list>` would likely display a list of bookings.
+When creating components, you are essentially creating new tags you can use in your application in a similar fashion to normal HTML tags. This allows you to have a form of semantic tags, making it clearer what is actually being displayed on a page. A tag like `<booking-form></booking-form>` would likely display a form used to create a booking, and `<booking-list></booking-list>` would likely display a list of bookings.
 
 ## Vue component structure
 
@@ -24,7 +24,7 @@ Vue components contain three main sections, `template`, `script` and `style`. `s
 
 ### script
 
-`script` stores the script used for the component. Just as with a Vue JavaScript component, you can export the various Vue properties and methods such as `data()`, `methods`, and `components`.
+`script` stores the script used for the component. As with a Vue JavaScript component, you can export the various Vue properties and methods such as `data()`, `methods`, and `components`.
 
 ```html
 <script>
@@ -47,17 +47,22 @@ export default {
 
 ```html
 <template>
-<div>{{ product.name }}</div>
-<div>{{ product.description }}</div>
+  <div id="product">
+    <div>{{ product.name }}</div>
+    <div>{{ product.description }}</div>
+  </div>
 </template>
 ```
 
+> [!NOTE]
+> Templates needs to have one root element. That is, the `div` element with `product` as `id`, can't have any siblings, only child elements,as displayed above.
+
 ## Loading and components
 
 As highlighted earlier, single-file components are saved with a *.vue* extension. You can load these in a similar fashion to other modules by using the `import` statement, and register them by using the `components` property. Once registered they become available for use as a tag inside of `template`.
 
 > ![NOTE]
-> When importing a library with `import`, it's standard to use PascalCase (or upper camel case) for the name, where the first letter for each word is capitalized. However, in HTML convention is for tag names to use kebab-case with each word in lowercase letters and a dash (`-`) between them. Vue will automatically manage the two different conventions.
+> When importing a library with `import`, it's standard to use PascalCase (or upper camel case) for the name, where the first letter for each word is capitalized, like so `PascalCase`. However, in HTML, the convention is for tag names to use kebab-case with each word in lowercase letters and a dash (`-`) between them. Vue will automatically manage the two different conventions.
 
 ```html
 <template>
@@ -72,9 +77,13 @@ export default {
 }
 ```
 
+ In the code above, the component `ProductDisplay` is imported and added to the `components` property. What this will do, is to ensure that when `ProductDisplay` is used in the template, Vue's compiler is able to tell that this is something it needs to parse and not a regular HTML element
+
 ## Separation of concerns
 
-Placing the HTML, CSS and JavaScript into one file may appear to be a departure from best practices where you typically create separate files for each of the different types. However, in practice switching between these files can cause development to slow as there are invariably interdependencies between them. Single-file components does allow you to create separate files for your `script` and `style` sections by using the `src` attribute.
+Placing the HTML, CSS and JavaScript into one file may appear to be a departure from best practices where you typically create separate files for each of the different types. However, in practice, switching between these files can cause development to slow as there are invariably interdependencies between them. There's also a cognitive load associated with having to switch between files.
+
+Single-file components does allow you to create separate files for your `script` and `style` sections by using the `src` attribute.
 
 ```html
 <template>

4-cli-components/4-exercise-create-component.md

@@ -1,4 +1,4 @@
-We want to create an application which allows a user to create bookings on a cruise to the moon. Over the course of a couple of exercises we will create a component for the form the user will complete to create a booking, and another to display the list of created bookings. The first component we will create will host both of child components.
+You want to create an application which allows a user to create bookings on a cruise to the moon. Over the course of a couple of exercises, you will create a component for the form the user will complete, to create a booking, and another to display the list of created bookings. The first component you will create, will host both of child components.
 
 ## Install Visual Studio Code extensions
 

4-cli-components/5-props.md

@@ -1,8 +1,8 @@
-HTML elements are the building blocks we use to create pages. We can configure their behavior by setting attributes to different values. As highlighted earlier, creating a component is similar to creating a custom HTML tag. As a result, we can pass in information to enhance the reuse of components through props.
+HTML elements are the building blocks you use to create pages. We can configure their behavior by setting attributes to different values. As highlighted earlier, creating a component is similar to creating a custom HTML tag. As a result, we can pass in information to enhance the reuse of components through props.
 
 ## Defining props
 
-Props, short for properties, are a set of values we can pass into a component. You will typically add props to a component to pass in the values it should display or otherwise change its behavior.
+Props, short for properties, are a set of values you can pass into a component. You will typically add props to a component to pass in the values it should display or otherwise change its behavior.
 
 You define props for a component by adding the `props` field inside the `script` element. You can list the names of a components props by listing them in an array:
 
@@ -33,14 +33,16 @@ export default {
 </script>
 ```
 
+The values `Cheryl` and `28`, are bound to the `name` and `age` property respectively, using an attribute binding.
+
 > ![NOTE]
 > The component named `UserDisplay` will be converted into the kebab-cased `user-display` by Vue.js. Also, the `:` in front of each name indicates this is a Vue.js property we are setting.
 
 ## Restricting types
 
 By listing them as part of an array, the caller can pass in values of any type. This can be appropriate for basic applications, but you will often want to indicate what data types you are expecting for each prop.
 
-We can provide more robust information about the props we are expecting by defining a schema. If you want to indicate `name` should be a string and `age` a number, you can define your props schema like the following:
+You can provide more robust information about the props by defining a schema. If you want to indicate `name` should be a string and `age` a number, you can define your props schema like the following:
 
 ```html
 <!-- UserDisplay component script -->
@@ -55,18 +57,20 @@ export default {
 </script>
 ```
 
-Notice how we are creating a props object with the types for `name` and `age`. This component will now only accept the specified data types. We can still set them as before:
+Notice how you're creating a props object with the types for `name` and `age`. This component will now only accept the specified data types. You can still set them as before:
 
 ```html
 <!-- inside parent component -->
 <user-display :name='Cheryl' :age='28'></user-display>
 ```
 
+However, where you to set them to values that doesn't match with the schema, like passing a number to `name`, for example, you will get a warning in the console, asking you to take action.
+
 ## Complex objects
 
-When working with Vue you will typically work with objects rather than individual values. Fortunately you can declare more complex structures with props as well.
+When working with Vue, you will typically work with objects rather than individual values. Fortunately, you can declare more complex structures with props as well.
 
-If we are using a `User` object with the properties of `name` and `age`, we can declare this as a full construct in our props:
+If you're using a `User` object with the properties `name` and `age`, you can declare this as a full construct in your props:
 
 ```html
 <!-- UserDisplay component script -->
@@ -83,7 +87,7 @@ export default {
 </script>
 ```
 
-We can set the value using the attribute as we did before. In addition, we can pass in dynamic data as well by specifying the name of the object we wish to use. In the example below we have a piece of data named `user`, which is passed using the same syntax as static values.
+You can set the value using the attribute as you did before. In addition, you can pass in dynamic data as well by specifying the name of the object you wish to use. In the example below you have a piece of data named `user`, which is passed using the same syntax as static values.
 
 ```html
 <!-- parent component -->
@@ -98,7 +102,7 @@ export default {
         return {
             user: {
                 firstName: 'Cheryl',
-                lastName: 'Smith'
+                age: 28
             }
         }
     },

4-cli-components/6-exercise-props.md

@@ -1,8 +1,8 @@
-Let's continue building our application by creating a component to display the current list of bookings. We will add in a form the user can use to add bookings, so for the time being we will create a static array.
+Let's continue building our application by creating a component, to display the current list of bookings. You will add in a form the user can use, to add bookings, so for the time being you will create a static array.
 
 ## Create the component
 
-We will start by creating our component.
+You will start by creating your component.
 
 1. Inside Visual Studio Code, create a new file inside *src/components* named *BookingList.vue*
 1. Inside *BookingList.vue*, type `vue`, and select *\<vue\> with default.vue* from the snippets menu
@@ -13,7 +13,7 @@ We will start by creating our component.
 
 ## Register the props and computed value
 
-We are expecting an `Array` of information about bookings, so we will declare our prop as type `Array`. Because we are creating a component, we can also take advantage of computed properties to automatically calculate values for us. We will add a computed property to add the total price and return a display value we can use.
+You're expecting an `Array` of information about bookings, so we will declare our prop as type `Array`. Because you're creating a component, you can also take advantage of computed properties to automatically calculate values for you. You will add a computed property to add the total price and return a display value you can use.
 
 1. Open *src/components/BookingList.vue* if not already open
 1. Inside the curly braces (`{ }`) for `export default`, add the following code to add the following code to create a prop named `bookings` and the `computed` property:
@@ -39,7 +39,7 @@ We are expecting an `Array` of information about bookings, so we will declare ou
 
 ## Add the template for display
 
-Let's add the template to display the information for our bookings. We will use `v-for` to loop through all bookings, and the `totalDisplay` computed property we created earlier.
+Let's add the template to display the information for our bookings. You will use `v-for` to loop through all bookings, and the `totalDisplay` computed property we created earlier.
 
 1. Open *src/components/BookingList.vue* if not already open
 1. Inside the `<template>` element, add the following HTML:
@@ -64,7 +64,7 @@ Let's add the template to display the information for our bookings. We will use
 
 ## Add our component to the main page
 
-Let's use our component, and pass in a list of bookings.
+Let's use your component, and pass in a list of bookings.
 
 1. Open *src/components/Host.vue*
 1. Add a new line below the opening `<script>` tag and before `export default`
@@ -90,7 +90,7 @@ Let's use our component, and pass in a list of bookings.
 
 ## Use the component
 
-With our component registered, we will call it in our page. We will use the `bookings` array we created earlier to seed the list of bookings on the page.
+With your component registered, we will call it in our page. We will use the `bookings` array we created earlier to seed the list of bookings on the page.
 
 1. Open *src/components/Host.vue* if not already open
 1. Below the comment which reads `TODO: Add booking-list`, add the following code to use the `booking-list` component:
@@ -101,7 +101,7 @@ With our component registered, we will call it in our page. We will use the `boo
 
 ## Test the page
 
-With our component registered and configured, let's test the page!
+With your component registered and configured, let's test the page!
 
 1. Save all files by clicking *File* > *Save all*
 1. Return to your browser window with [http://localhost:8080](http://localhost:8080) and hit refresh