Translate /tutorial/part-1/component-basics.md, Ember 5.11

[BlueCutOfficial]

Please assign yourself to the issue or let a comment at the very moment you start the translation.

File: guides/tutorial/part-1/component-basics.md
From Ember: 5.4
To Ember: 5.11

In the snippet below, you can see what changes were done in the latest English documentation. The purpose of this issue is to adjust the French translation to match the new version:

diff --git a/guides/tutorial/part-1/component-basics.md b/guides/tutorial/part-1/component-basics.md
index 1aa73b519..8a4c9d274 100644
--- a/guides/tutorial/part-1/component-basics.md
+++ b/guides/tutorial/part-1/component-basics.md
@@ -2,7 +2,7 @@
 
 In this chapter, you will _[refactor](../../../components/introducing-components/#toc_breaking-it-into-pieces)_ your existing templates to use components. We will also be adding a site-wide navigation bar:
 
-<img src="/images/tutorial/part-1/component-basics/[email protected]" alt="The Super Rentals app by the end of the chapter" width="1024" height="314">
+<img src="/images/tutorial/part-1/component-basics/[email protected]" alt="The Super Rentals app by the end of the chapter" width="1024" height="315">
 
 In doing so, you will learn about:
 
@@ -58,7 +58,7 @@ When invoking a component, Ember will replace the component tag with the content
 
 Let's try it out by editing the index template:
 
-js { data-filename="app/templates/index.hbs" data-diff="-1,-2,+3,-7,+8" }
+handlebars { data-filename="app/templates/index.hbs" data-diff="-1,-2,+3,-7,+8" }
 <div class="jumbo">
   <div class="right tomster"></div>
 <Jumbo>
@@ -73,13 +73,13 @@ Let's try it out by editing the index template:
 
 After saving the changes, your page should automatically reload, and, _voilà_... nothing changed? Well, that's exactly what we wanted to happen this time! We successfully _[refactored](../../../components/introducing-components/#toc_breaking-components-down-further)_ our index template to use the `<Jumbo>` component, and everything still works as expected. And the tests still pass!
 
-<img src="/images/tutorial/part-1/component-basics/[email protected]" alt="Index page – nothing changed" width="1024" height="250">
+<img src="/images/tutorial/part-1/component-basics/[email protected]" alt="Index page – nothing changed" width="1024" height="251">
 
 <img src="/images/tutorial/part-1/component-basics/[email protected]" alt="Tests still passing after the refactor" width="1024" height="512">
 
 Let's do the same for our other two pages as well.
 
-js { data-filename="app/templates/about.hbs" data-diff="-1,-2,+3,-11,+12" }
+handlebars { data-filename="app/templates/about.hbs" data-diff="-1,-2,+3,-11,+12" }
 <div class="jumbo">
   <div class="right tomster"></div>
 <Jumbo>
@@ -94,7 +94,7 @@ Let's do the same for our other two pages as well.
 </Jumbo>
 
 
-js { data-filename="app/templates/contact.hbs" data-diff="-1,-2,+3,-19,+20" }
+handlebars { data-filename="app/templates/contact.hbs" data-diff="-1,-2,+3,-19,+20" }
 <div class="jumbo">
   <div class="right tomster"></div>
 <Jumbo>
@@ -119,9 +119,9 @@ Let's do the same for our other two pages as well.
 
 After saving, everything should look exactly the same as before, and all the tests should still pass. Very nice!
 
-<img src="/images/tutorial/part-1/component-basics/[email protected]" alt="About page – nothing changed" width="1024" height="274">
+<img src="/images/tutorial/part-1/component-basics/[email protected]" alt="About page – nothing changed" width="1024" height="275">
 
-<img src="/images/tutorial/part-1/component-basics/[email protected]" alt="Contact page – nothing changed" width="1024" height="444">
+<img src="/images/tutorial/part-1/component-basics/[email protected]" alt="Contact page – nothing changed" width="1024" height="445">
 
 <img src="/images/tutorial/part-1/component-basics/[email protected]" alt="Tests still passing another round of refactor" width="1024" height="512">
 
@@ -135,6 +135,8 @@ Before we move on to the next component, let's write an automated test for our `
 $ ember generate component-test jumbo
 installing component-test
   create tests/integration/components/jumbo-test.js
+
+Running "lint:fix" script...
 
 
 Here, we used the generator to generate a _[component test](../../../testing/testing-components/)_, also known as a rendering test. These are used to render and test a single component at a time. This is in contrast to the acceptance tests that we wrote earlier, which have to navigate and render entire pages worth of content.
@@ -158,7 +160,7 @@ module('Integration | Component | jumbo', function (hooks) {
 
     await render(hbs`<Jumbo />`);
 
-    assert.dom(this.element).hasText('');
+    assert.dom().hasText('');
 
     // Template block usage:
     await render(hbs`
@@ -167,7 +169,7 @@ module('Integration | Component | jumbo', function (hooks) {
       </Jumbo>
     `);
 
-    assert.dom(this.element).hasText('template block text');
+    assert.dom().hasText('template block text');
     assert.dom('.jumbo').exists();
     assert.dom('.jumbo').hasText('Hello World');
     assert.dom('.jumbo .tomster').exists();
@@ -203,7 +205,7 @@ We can create a `<NavBar>` component at `app/components/nav-bar.hbs`:
 
 Next, we will add our `<NavBar>` component to the top of each page:
 
-js { data-filename="app/templates/about.hbs" data-diff="+1" }
+handlebars { data-filename="app/templates/about.hbs" data-diff="+1" }
 <NavBar />
 <Jumbo>
   <h2>About Super Rentals</h2>
@@ -216,7 +218,7 @@ Next, we will add our `<NavBar>` component to the top of each page:
 </Jumbo>
 
 
-js { data-filename="app/templates/contact.hbs" data-diff="+1" }
+handlebars { data-filename="app/templates/contact.hbs" data-diff="+1" }
 <NavBar />
 <Jumbo>
   <h2>Contact Us</h2>
@@ -237,7 +239,7 @@ Next, we will add our `<NavBar>` component to the top of each page:
 </Jumbo>
 
 
-js { data-filename="app/templates/index.hbs" data-diff="+1" }
+handlebars { data-filename="app/templates/index.hbs" data-diff="+1" }
 <NavBar />
 <Jumbo>
   <h2>Welcome to Super Rentals!</h2>
@@ -248,7 +250,7 @@ Next, we will add our `<NavBar>` component to the top of each page:
 
 Voilà, we made another component!
 
-<img src="/images/tutorial/part-1/component-basics/[email protected]" alt="Index page with nav" width="1024" height="314">
+<img src="/images/tutorial/part-1/component-basics/[email protected]" alt="Index page with nav" width="1024" height="315">
 
 <div class="cta">
   <div class="cta-note">
@@ -361,7 +363,7 @@ While we are at it, we will also add a container element that wraps around the w
 </div>
 
 
-js { data-filename="app/templates/index.hbs" data-diff="-1" }
+handlebars { data-filename="app/templates/index.hbs" data-diff="-1" }
 <NavBar />
 <Jumbo>
   <h2>Welcome to Super Rentals!</h2>
@@ -370,7 +372,7 @@ While we are at it, we will also add a container element that wraps around the w
 </Jumbo>
 
 
-js { data-filename="app/templates/contact.hbs" data-diff="-1" }
+handlebars { data-filename="app/templates/contact.hbs" data-diff="-1" }
 <NavBar />
 <Jumbo>
   <h2>Contact Us</h2>
@@ -391,7 +393,7 @@ While we are at it, we will also add a container element that wraps around the w
 </Jumbo>
 
 
-js { data-filename="app/templates/about.hbs" data-diff="-1" }
+handlebars { data-filename="app/templates/about.hbs" data-diff="-1" }
 <NavBar />
 <Jumbo>
   <h2>About Super Rentals</h2>