diff --git a/guides/release/getting-started/quick-start.md b/guides/release/getting-started/quick-start.md index 424988a971..863f847560 100644 --- a/guides/release/getting-started/quick-start.md +++ b/guides/release/getting-started/quick-start.md @@ -31,7 +31,7 @@ you will have access to a new `ember` command in your terminal. You can use the `ember new` command to create a new application. ```bash -ember new ember-quickstart --lang en +ember new ember-quickstart --lang en --strict ``` This one command will create a new directory called `ember-quickstart` and set up a new Ember application inside of it. @@ -87,8 +87,6 @@ Congratulations! You just created and booted your first Ember app. ## Write some HTML in a template - - We will start by editing the `application` template. This template is always on screen while the user has your application loaded. In your editor, open `app/templates/application.gjs` and change it to the following: @@ -99,21 +97,6 @@ In your editor, open `app/templates/application.gjs` and change it to the follow {{outlet}} ``` - - - - -We will start by editing the `application` template. -This template is always on screen while the user has your application loaded. -In your editor, open `app/templates/application.hbs` and change it to the following: - -```handlebars {data-filename=app/templates/application.hbs} -

PeopleTracker

- -{{outlet}} -``` - - Ember detects the changed file and automatically reloads the page for you in the background. You should see that the welcome page has been replaced by "PeopleTracker". @@ -135,21 +118,7 @@ ember generate route scientists You'll see output like this: - -```text -installing route - create app/routes/scientists.js - create app/templates/scientists.hbs -updating router - add route scientists -installing route-test - create tests/unit/routes/scientists-test.js -``` - - ```bash -# 🚧 Under construction 🚧 -# `ember generate route` has not been updated to produce GJS files yet. installing route create app/routes/scientists.js create app/templates/scientists.gjs @@ -158,7 +127,6 @@ updating router installing route-test create tests/unit/routes/scientists-test.js ``` - That is Ember telling you that it has created: @@ -167,20 +135,7 @@ That is Ember telling you that it has created: 3. An entry in the application's router (located in `app/router.js`). 4. A unit test for this route. - -Open the newly-created template in `app/templates/scientists.hbs` and add the following HTML: - -```handlebars {data-filename=app/templates/scientists.hbs} -{{page-title "Scientists"}} -

List of Scientists

-``` - -In your browser, open [`http://localhost:4200/scientists`](http://localhost:4200/scientists). -You should see the `

` we put in the `scientists.hbs` template right below the `

` from our `application.hbs` template. - - - -Open the newly-created template in `app/templates/scientists.gjs` and add the following HTML: +Open the newly-created template in `app/templates/scientists.gjs` and add the following code: ```gjs {data-filename=app/templates/scientists.gjs} import { pageTitle } from 'ember-page-title'; @@ -194,8 +149,6 @@ import { pageTitle } from 'ember-page-title'; In your browser, open [`http://localhost:4200/scientists`](http://localhost:4200/scientists). You should see the `

` we put in the `scientists.gjs` template right below the `

` from our `application.gjs` template. - - Since the scientist route is nested under the application route, Ember will render its content inside the application route template's `{{outlet}}` directive. Now that we've got the `scientists` template rendering, @@ -225,19 +178,6 @@ the `model()` method supports any library that uses [JavaScript Promises](https: Now let's tell Ember how to turn that array of strings into HTML. Open the `scientists` template and add the following code to loop through the array and print it: - -```handlebars {data-filename="app/templates/scientists.hbs"} -

List of Scientists

- -
    - {{#each @model as |scientist|}} -
  • {{scientist}}
    • - {{/each}} -
-``` - - - ```gjs {data-filename="app/templates/scientists.gjs"} import { pageTitle } from 'ember-page-title'; @@ -251,7 +191,6 @@ import { pageTitle } from 'ember-page-title'; ``` - Here, we use the `each` _helper_ to loop over each item in the array we provided from the `model()` hook. Ember will render the _block_ contained @@ -275,30 +214,24 @@ As usual, there's a generator that makes this easy for us. Make a new component by typing: ```bash - -# 🚧 Under construction 🚧 -# `ember generate component` has not been updated to produce GJS files yet. - ember generate component people-list ``` - -Copy and paste the `scientists` template into the `PeopleList` component's template and edit it to look as follows: - -```handlebars {data-filename=app/components/people-list.hbs} -

{{@title}}

+You'll see output like this: -
    - {{#each @people as |person|}} -
  • {{person}}
    • - {{/each}} -
+```bash +installing component + create app/components/people-list.gjs +installing component-test + create tests/integration/components/people-list-test.gjs ``` - +That is Ember telling you that it has created: + +1. A `people-list` component in the `components` folder +2. A `people-list-test` integration test file that you can use to test your component - -Copy and paste this part of the `scientists` template into the `PeopleList` component and edit it to look as follows: +Copy and paste this part of the `scientists` template into the newly created `PeopleList` component and edit it to look as follows: ```gjs {data-filename=app/components/people-list.gjs} ``` - - Note that we've changed the title from a hard-coded string ("List of Scientists") to `{{@title}}`. The `@` indicates that `@title` is an argument that will be passed into the component, which makes it easier to reuse the same component in @@ -322,24 +253,6 @@ other parts of the app we are building. We've also renamed `scientist` to the more-generic `person`, decreasing the coupling of our component to where it's used. - -Our component is called `PeopleList`, based on its name on the file system. Please note that the letters P and L are capitalized. - -
-
-
-
Zoey says...
-
- A component's name is derived from its file name. - We capitalize the first letter and every letter after -, then remove the hyphens. - This is known as pascal case. -
-
- -
-
- - Save this template and switch back to the `scientists` template. We're going to tell our component: @@ -354,23 +267,6 @@ In the rest of the code examples in this tutorial, whenever we add or remove cod Let's replace all our old code with our new componentized version: - -```handlebars {data-filename="app/templates/scientists.hbs" data-diff="-1,-2,-3,-4,-5,-6,-7,+8,+9,+10,+11"} -

List of Scientists

- -
    - {{#each @model as |scientist|}} -
  • {{scientist}}
    • - {{/each}} -
- -``` - - - ```gjs {data-filename="app/templates/scientists.gjs" data-diff="+2,-6,-7,-8,-9,-10,-11,+12,+13,+14,+15"} import { pageTitle } from 'ember-page-title'; import PeopleList from '../components/people-list'; @@ -389,7 +285,6 @@ import PeopleList from '../components/people-list'; /> ``` - Go back to your browser and you should see that the UI looks identical. The only difference is that now we've componentized our list into a version that's more reusable and more maintainable. @@ -407,20 +302,6 @@ user actions like clicks or hovers. Ember makes this easy to do. First, we can modify the `PeopleList` component to include a button: - -```handlebars {data-filename="app/components/people-list.hbs"} -

{{@title}}

- -
    - {{#each @people as |person|}} -
  • - -
    • - {{/each}} -
-``` - - ```gjs {data-filename="app/components/people-list.gjs"} ``` - - Now that we have a button, we need to wire it up to do _something_ when a user clicks on it. For simplicity, let's say we want to show an `alert` dialog with @@ -446,79 +325,6 @@ inputs as arguments and renders them using a template. To introduce _behavior_ to our component – handling the button click in this case, we will need to attach some JavaScript to the component. - -In addition to the template, a component can also have a JavaScript file for -this exact purpose. Go ahead and create a `.js` file with the same name and in -the same directory as our template (`app/components/people-list.js`), -and paste in the following content: - -```javascript {data-filename="app/components/people-list.js"} -import Component from '@glimmer/component'; -import { action } from '@ember/object'; - -export default class PeopleListComponent extends Component { - @action - showPerson(person) { - alert(`The person's name is ${person}!`); - } -} -``` - -_Note: If you want this file created for you, you may pass the `-gc` flag when running the component generator._ - -Here, we created a basic component class and added a method that accepts a -person as an argument and brings up an alert dialog with their name. The -`@action` _decorator_ indicates we want to use this method as an _action_ -in our template, in response to user interaction. - -Now that we have implemented the desired behavior, we can go back to -the component's template and wire everything up: - -```handlebars {data-filename="app/components/people-list.hbs" data-diff="-6,+7"} -

{{@title}}

- -
    - {{#each @people as |person|}} -
  • - - -
    • - {{/each}} -
-``` - -Here, we used the `on` _modifier_ to attach the `this.showPerson` action to -the button in the template. - -There is a problem with this though – if you tried this in the browser, you -will quickly discover that clicking on the buttons will bring up an alert -dialog that said "The person's name is `[Object MouseEvent]`!" – eek! - -The cause of this bug is that we wrote our action to take an argument – the -person's name – and we forgot to pass it. The fix is easy enough: - -```handlebars {data-filename="app/components/people-list.hbs" data-diff="-6,+7"} -

{{@title}}

- -
    - {{#each @people as |person|}} -
  • - - -
    • - {{/each}} -
-``` - -Instead of passing the action to the `on` modifier directly, we used the `fn` -helper to pass the `person` as an argument which our action expects. - -Feel free to try this in the browser. Finally, everything should behave exactly -as we hoped! - - - - Let's use the [`on` modifier](../../components/template-lifecycle-dom-and-modifiers/#toc_event-handlers) to handle click events on the button: ```gjs {data-filename="app/components/people-list.gjs"} @@ -600,11 +406,6 @@ export default class extends Component { } ``` - - - - - ## Building For Production Now that we've written our application and verified that it works in development,