Refactor MU and fix typos (ember-learn#602)

Author: betocantu93

guides/release/components/defining-a-component.md

@@ -58,15 +58,15 @@ installing component-test
 
 This generates a JavaScript file:
 
-```javascript {data-file=src/ui/components/blog-post/component.js}
+```javascript {data-filename=app/components/blog-post.js}
 import Component from '@glimmer/component';
 
 export default class BlogPost extends Component {}
 ```
 
 And a template file:
 
-```handlebars {data-filename=src/ui/components/blog-post/template.hbs}
+```handlebars {data-filename=app/templates/components/blog-post.hbs}
 {{yield}}
 ```
 
@@ -77,10 +77,10 @@ will be covered later on in the guides.
 
 Templates in components use the Handlebars templating language, as discussed in
 the [Templating](../../templating) section. A component's template is the layout
-that is used when rendering the component. If we update the `HelloButton`'s
+that is used when rendering the component. If we update the `BlogPost`'s
 template to be:
 
-```handlebars {data-filename=src/ui/components/hello-post/template.hbs}
+```handlebars {data-filename=app/templates/components/blog-post.hbs}
 <h1>Fun Facts About Tomster</h1>
 <section>
   1. He's a hamster!
@@ -90,7 +90,7 @@ template to be:
 
 And then use the component like so:
 
-```handlebars {data-filename=src/ui/routes/application/route.hbs}
+```handlebars {data-filename=app/templates/application.hbs}
 <BlogPost/>
 ```
 
@@ -107,7 +107,7 @@ This template doesn't have anything dynamic in it yet, so the output is exactly
 the same as the template. We can add dynamic values directly by using double
 curly syntax:
 
-```handlebars {data-filename=src/ui/components/blog-post/template.hbs}
+```handlebars {data-filename=app/templates/components/blog-post.hbs}
 <h1>{{@title}}</h1>
 <section class="{{this.sectionClass}}">
   {{@content}}
@@ -141,7 +141,7 @@ important to note that arguments and properties can be used interchangeably, so
 we could for instance have used an argument for the `sectionClass`, and a
 class property for title or post content:
 
-```handlebars {data-filename=src/ui/components/blog-post/template.hbs}
+```handlebars {data-filename=app/templates/components/blog-post.hbs}
 <h1>{{this.title}}</h1>
 <section class="{{@sectionClass}}">
   {{this.content}}
@@ -158,7 +158,7 @@ to the component where it is used.
 You can also use template helpers, modifiers, and other components within your
 component template:
 
-```handlebars {data-filename=src/ui/components/blog-post/template.hbs}
+```handlebars {data-filename=app/templates/components/blog-post.hbs}
 <h1>{{capitalize @title}}</h1>
 
 <BlogSection>
@@ -184,7 +184,7 @@ helper allows us to specify that users can pass the component a _block_ of
 children, and where those children should be placed. If we go back to our
 `BlogPost` component, we can add a yield like this:
 
-```handlebars {data-filename=src/ui/components/blog-post/template.hbs}
+```handlebars {data-filename=app/templates/components/blog-post.hbs}
 <h1>{{@title}}</h1>
 <section class="{{this.sectionClass}}">
   {{yield}}
@@ -225,7 +225,7 @@ statements in a component block, and these will be inserted in the yield:
 A final thing that component templates can have is `...attributes`, which can be
 placed on any HTML element or component within the component's template:
 
-```handlebars {data-filename=src/ui/components/blog-post/template.hbs}
+```handlebars {data-filename=app/templates/components/blog-post.hbs}
 <h1>{{@title}}</h1>
 <section ...attributes class="{{this.sectionClass}}">
   {{yield}}
@@ -262,11 +262,11 @@ own state, such as components that focus on presentation and formatting of data.
 For example, you could make a Template-Only greeting component that receives the
 name of a friend and greets them:
 
-```handlebars {data-filename=src/ui/components/greeting/template.hbs}
+```handlebars {data-filename=app/templates/components/greeting.hbs}
 <p>Hello {{@friend}}</p>
 ```
 
-```handlebars {data-filename=src/ui/routes/application/template.hbs}
+```handlebars {data-filename=app/templates/application.hbs}
 <Greeting @friend="Toby"/>
 ```
 
@@ -277,7 +277,7 @@ discussed in detail in the [Working With
 JavaScript](../../working-with-javascript/native-classes) section of the guides.
 You can define a component class like so:
 
-```js {data-file=src/ui/components/blog-post/component.js}
+```js {data-filename=app/components/blog-post.js}
 import Component from '@glimmer/component';
 
 export default class BlogPost extends Component {}
@@ -294,33 +294,33 @@ You can add methods and fields to the component, and then access them from the
 component's template. For instance, we could add the `sectionClass` property
 that is referenced in the template for the `BlogPost` component from earlier:
 
-```handlebars {data-filename=src/ui/components/blog-post/template.hbs}
+```handlebars {data-filename=app/templates/components/blog-post.hbs}
 <h1>{{@title}}</h1>
 <section ...attributes class="{{this.sectionClass}}">
   {{yield}}
 </section>
 ```
 
-```js {data-file=src/ui/components/blog-post/component.js}
+```js {data-filename=app/components/blog-post.js}
 import Component from '@glimmer/component';
 
 export default class HelloButton extends Component {
   sectionClass = 'blog-post-section';
 }
 ```
 
-You can also use JavaScript accessors (_getters_ and \_setters) to derive values
+You can also use JavaScript accessors (_getters_ and _setters_) to derive values
 that need to be calculated. For instance, we could provide a default title to
 the blog post if one wasn't provided:
 
-```handlebars {data-filename=src/ui/components/blog-post/template.hbs}
+```handlebars {data-filename=app/templates/components/blog-post.hbs}
 <h1>{{this.title}}</h1>
 <section ...attributes class="{{this.sectionClass}}">
   {{yield}}
 </section>
 ```
 
-```js {data-file=src/ui/components/blog-post/component.js}
+```js {data-filename=app/components/blog-post.js}
 import Component from '@glimmer/component';
 
 export default class HelloButton extends Component {
@@ -337,7 +337,7 @@ differently in the class.
 Methods can also be defined on the class and called from the template. These are
 known as _actions_, and are decorated with the `@action` decorator.
 
-```handlebars {data-filename=src/ui/components/blog-post/template.hbs}
+```handlebars {data-filename=app/templates/components/blog-post.hbs}
 <h1>{{this.title}}</h1>
 <section ...attributes class="{{this.sectionClass}}">
   {{yield}}
@@ -348,7 +348,7 @@ known as _actions_, and are decorated with the `@action` decorator.
 </section>
 ```
 
-```js {data-file=src/ui/components/blog-post/component.js}
+```js {data-filename=app/components/blog-post.js}
 import Component from '@glimmer/component';
 
 export default class HelloButton extends Component {