You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/7/en/part7f.md
+28-28Lines changed: 28 additions & 28 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,9 +7,9 @@ lang: en
7
7
8
8
<divclass="content">
9
9
10
-
In addition to the eight exercises in the [React router](/en/part7/react_router) and [custom hooks](/en/part7/custom_hooks) sections of this seventh part of the course material, 13 exercises continue our work on the Bloglist application that we worked on in parts four and five of the course material. Some of the following exercises are "features" that are independent of one another, meaning that there is no need to finish the exercises in any particular order. You are free to skip over a part of the exercises if you wish to do so. Quite many of the exercises are applying the advanced state management technique (Redux, React Query and context) covered in [part 6](/en/part6).
10
+
In addition to the eight exercises in the [React router](/en/part7/react_router) and [custom hooks](/en/part7/custom_hooks) sections of this seventh part of the course material, 13 exercises continue our work on the BlogList application that we worked on in parts four and five of the course material. Some of the following exercises are "features" that are independent of one another, meaning that there is no need to finish them in any particular order. You are free to skip over a part of the exercises if you wish to do so. Quite many of them are about applying the advanced state management technique (Redux, React Query and context) covered in [part 6](/en/part6).
11
11
12
-
If you do not want to use your Bloglist application, you are free to use the code from the model solution as a starting point for these exercises.
12
+
If you do not want to use your BlogList application, you are free to use the code from the model solution as a starting point for these exercises.
13
13
14
14
Many of the exercises in this part of the course material will require the refactoring of existing code. This is a common reality of extending existing applications, meaning that refactoring is an important and necessary skill even if it may feel difficult and unpleasant at times.
15
15
@@ -21,57 +21,57 @@ One good piece of advice for both refactoring and writing new code is to take <i
21
21
22
22
### Exercises 7.9.-7.21.
23
23
24
-
#### 7.9: automatic code formatting
24
+
#### 7.9: Automatic Code Formatting
25
25
26
-
In the previous parts, we used ESLint to ensure that code follows the defined conventions.[Prettier](https://prettier.io/) is yet another approach for the same. According to the documentation, Prettier is <i>an opinionated code formatter</i>, that is, Prettier not only controls the code style but also formats the code according to the definition.
26
+
In the previous parts, we used ESLint to ensure that the code follows the defined conventions. [Prettier](https://prettier.io/) is yet another approach for the same. According to the documentation, Prettier is <i>an opinionated code formatter</i>, that is, Prettier not only controls the code style but also formats the code according to the definition.
27
27
28
-
Prettier is easy to integrate into the code editor so that when the code is saved, it is automatically formatted correctly.
28
+
Prettier is easy to integrate into the code editor so that when it is saved, it is automatically formatted.
29
29
30
30
Take Prettier to use in your app and configure it to work with your editor.
31
31
32
-
### State management: Redux
32
+
### State Management: Redux
33
33
34
34
<i>There are two alternative versions to choose for exercises 7.10-7.13: you can do the state management of the application either using Redux or React Query and Context</i>. If you want to maximize your learning, you should do both versions!
35
35
36
-
#### 7.10: Redux, step1
36
+
#### 7.10: Redux, Step 1
37
37
38
38
Refactor the application to use Redux to manage the notification data.
39
39
40
-
#### 7.11: Redux, step2
40
+
#### 7.11: Redux, Step 2
41
41
42
42
<i>Note</i> that this and the next two exercises are quite laborious but incredibly educational.
43
43
44
44
Store the information about blog posts in the Redux store. In this exercise, it is enough that you can see the blogs in the backend and create a new blog.
45
45
46
46
You are free to manage the state for logging in and creating new blog posts by using the internal state of React components.
47
47
48
-
#### 7.12: Redux, step3
48
+
#### 7.12: Redux, Step 3
49
49
50
50
Expand your solution so that it is again possible to like and delete a blog.
51
51
52
-
#### 7.13: Redux, step4
52
+
#### 7.13: Redux, Step 4
53
53
54
54
Store the information about the signed-in user in the Redux store.
55
55
56
-
### State management: React Query and context
56
+
### State Management: React Query and Context
57
57
58
-
<i>There are two alternative versions to choose for exercises 7.10-7.13: you can do the state management of the application either using Redux or React Query and Context</i>.
58
+
<i>There are two alternative versions to choose for exercises 7.10-7.13: you can do the state management of the application either using Redux or React Query and Context</i>. If you want to maximize your learning, you should do both versions!
59
59
60
-
#### 7.10: React Query and context step1
60
+
#### 7.10: React Query and Context step 1
61
61
62
62
Refactor the app to use the useReducer-hook and context to manage the notification data.
63
63
64
-
#### 7.11: React Query and context step2
64
+
#### 7.11: React Query and Context step 2
65
65
66
-
Use React Query to manage the state for blogs. For this exercise, it is sufficient that the application displays existing blogs and that the creation of a new blog is successful.
66
+
Use React Query to manage the state for blog posts. For this exercise, it is sufficient that the application displays existing blogs and that the creation of a new blog is successful.
67
67
68
68
You are free to manage the state for logging in and creating new blog posts by using the internal state of React components.
69
69
70
-
#### 7.12: React Query and context step3
70
+
#### 7.12: React Query and Context step 3
71
71
72
72
Expand your solution so that it is again possible to like and delete a blog.
73
73
74
-
#### 7.13: React Query and context step4
74
+
#### 7.13: React Query and Context step 4
75
75
76
76
Use the useReducer-hook and context to manage the data for the logged in user.
77
77
@@ -85,23 +85,23 @@ Implement a view to the application that displays all of the basic information r
85
85
86
86
87
87
88
-
#### 7.15: Individual user view
88
+
#### 7.15: Individual User View
89
89
90
90
Implement a view for individual users that displays all of the blog posts added by that user:
<i>**NB:**</i> you will almost certainly stumble across the following error message during this exercise:
99
99
100
100
101
101
102
-
The error message will occur if you refresh the page for an individual user.
102
+
The error message will occur if you refresh the individual user page.
103
103
104
-
The cause of the issue is that, when we navigate directly to the page of an individual user, the React application has not yet received the data from the backend. One solution for fixing the problem is to use conditional rendering:
104
+
The cause of the issue is that, when we navigate directly to the page of an individual user, the React application has not yet received the data from the backend. One solution for this problem is to use conditional rendering:
105
105
106
106
```js
107
107
constUser= () => {
@@ -120,13 +120,13 @@ const User = () => {
120
120
}
121
121
```
122
122
123
-
#### 7.16: Blog view
123
+
#### 7.16: Blog View
124
124
125
125
Implement a separate view for blog posts. You can model the layout of your view after the following example:
126
126
127
127
128
128
129
-
Users should be able to access the view by clicking the name of the blog post in the view that lists all of the blog posts.
129
+
Users should be able to access this view by clicking the name of the blog post in the view that lists all of the blog posts.
130
130
131
131
132
132
@@ -138,9 +138,9 @@ Implement a navigation menu for the application:
0 commit comments