Skip to content

Commit d8a48c6

Browse files
ToiWrightdanroth27
authored andcommitted
Update 01-components-and-layout.md
1 parent 8d2033f commit d8a48c6

File tree

1 file changed

+7
-7
lines changed

1 file changed

+7
-7
lines changed

docs/01-components-and-layout.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ To get the available list of specials we need to call an API on the backend. Bla
5555
@inject HttpClient HttpClient
5656
```
5757

58-
The `@inject` directive essentially defines a new property on the component where the first token specified the property type and the second token specifies the property name. The property is populated for you using dependency injection.
58+
The `@inject` directive essentially defines a new property on the component where the first token specifies the property type and the second token specifies the property name. The property is populated for you using dependency injection.
5959

6060
Override the `OnInitializedAsync` method in the `@code` block to retrieve the list of pizza specials. This method is part of the component lifecycle and is called when the component is initialized. Use the `GetFromJsonAsync<T>()` method to handle deserializing the response JSON:
6161

@@ -94,14 +94,14 @@ Once the component is initialized it will render its markup. Replace the markup
9494
</div>
9595
```
9696

97-
Run the app by hitting `Ctrl-F5`. Now you should see a list of the specials available.
97+
Run the app by hitting `Ctrl-F5`. Now you should see a list of the specials that are available.
9898

9999
![image](https://user-images.githubusercontent.com/1874516/77239386-6c558880-6b97-11ea-9a14-83933146ba68.png)
100100

101101

102102
## Create the layout
103103

104-
Next we'll set up the layout for app.
104+
Next we'll set up the layout for the app.
105105

106106
Layouts in Blazor are also components. They inherit from `LayoutComponentBase`, which defines a `Body` property that can be used to specify where the body of the layout should be rendered. The layout component for our pizza store app is defined in *Shared/MainLayout.razor*.
107107

@@ -113,9 +113,9 @@ Layouts in Blazor are also components. They inherit from `LayoutComponentBase`,
113113
</div>
114114
```
115115

116-
To see how the layout is associated with your pages, look at the `<Router>` component in `App.razor`. Notice the `DefaultLayout` parameter which determines the layout used for any page that doesn't specify its own layout directly.
116+
To see how the layout is associated with your pages, look at the `<Router>` component in `App.razor`. Notice that the `DefaultLayout` parameter determines the layout used for any page that doesn't specify its own layout directly.
117117

118-
You can also override this `DefaultLayout` on a per-page basis. To do so, you can add directive such as `@layout SomeOtherLayout` at the top of any `.razor` page component. However, you don't need to do so in this application.
118+
You can also override this `DefaultLayout` on a per-page basis. To do so, you can add a directive such as `@layout SomeOtherLayout` at the top of any `.razor` page component. However, you will not need to do so in this application.
119119

120120
Update the `MainLayout` component to define a top bar with a branding logo and a nav link for the home page:
121121

@@ -136,11 +136,11 @@ Update the `MainLayout` component to define a top bar with a branding logo and a
136136
</div>
137137
```
138138

139-
The `NavLink` component is provided by Blazor. Components can be used from components, which is done by specifying an element with the component's type name along with attributes for any component parameters.
139+
The `NavLink` component is provided by Blazor. Components can be used from components by specifying an element with the component's type name along with attributes for any component parameters.
140140

141141
The `NavLink` component is the same as an anchor tag, except that it adds an `active` class if the current URL matches the link address. `NavLinkMatch.All` means that the link should be active only when it matches the entire current URL (not just a prefix). We'll examine the `NavLink` component in more detail in a later session.
142142

143-
Run the app by hitting `Ctrl-F5`. With our new layout our pizza store app now looks like this:
143+
Run the app by hitting `Ctrl-F5`. With our new layout, our pizza store app now looks like this:
144144

145145
![image](https://user-images.githubusercontent.com/1874516/77239419-aa52ac80-6b97-11ea-84ae-f880db776f5c.png)
146146

0 commit comments

Comments
 (0)