part 7 tweaks

Author: mluukkai

src/content/7/en/part7a.md

@@ -113,7 +113,7 @@ The routing provided by React Router is enabled by changing the application as f
 import {
   BrowserRouter as Router,
   Routes, Route, Link
-} from "react-router-dom"
+} from 'react-router-dom'
 
 const App = () => {
 
@@ -136,7 +136,7 @@ const App = () => {
       </Routes>
 
       <div>
-        <i>Note app, Department of Computer Science 2022</i>
+        <i>Note app, Department of Computer Science 2023</i>
       </div>
     </Router>
   )
@@ -151,7 +151,7 @@ Notice that, even though the component is referred to by the name <i>Router</i>,
 import {
   BrowserRouter as Router, // highlight-line
   Routes, Route, Link
-} from "react-router-dom"
+} from 'react-router-dom'
 ```
 
 According to the [v5 docs](https://v5.reactrouter.com/web/api/BrowserRouter):
@@ -207,7 +207,7 @@ const Notes = ({notes}) => (
     <ul>
       {notes.map(note =>
         <li key={note.id}>
-          <Link to={`/notes/${note.id}`}>{note.content}</Link>
+          <Link to={`/notes/${note.id}`}>{note.content}</Link>  // highlight-line
         </li>
       )}
     </ul>
@@ -243,7 +243,7 @@ When a browser navigates to the URL for a specific note, for example, <i>/notes/
 import {
   // ...
   useParams  // highlight-line
-} from "react-router-dom"
+} from 'react-router-dom'
 
 const Note = ({ notes }) => {
   const id = useParams().id // highlight-line
@@ -385,7 +385,7 @@ const App = () => {
       </Router>      
       <footer>
         <br />
-        <em>Note app, Department of Computer Science 2022</em>
+        <em>Note app, Department of Computer Science 2023</em>
       </footer>
     </div>
   )
@@ -439,7 +439,7 @@ The _App_component becomes:
 import {
   // ...
   useMatch  // highlight-line
-} from "react-router-dom"
+} from 'react-router-dom'
 
 const App = () => {
   // ...
@@ -468,7 +468,7 @@ const App = () => {
       </Routes>   
 
       <div>
-        <em>Note app, Department of Computer Science 2022</em>
+        <em>Note app, Department of Computer Science 2023</em>
       </div>
     </div>
   )

src/content/7/en/part7b.md

@@ -15,11 +15,11 @@ This part also contains a [series of exercises](/en/part7/exercises_extending_th
 
 React offers 15 different [built-in hooks](https://reactjs.org/docs/hooks-reference.html), of which the most popular ones are the [useState](https://reactjs.org/docs/hooks-reference.html#usestate) and [useEffect](https://reactjs.org/docs/hooks-reference.html#useeffect) hooks that we have already been using extensively.
 
-In [part 5](/en/part5/props_children_and_proptypes#references-to-components-with-ref) we used the [useImperativeHandle](https://reactjs.org/docs/hooks-reference.html#useimperativehandle) hook which allows components to provide their functions to other components.
+In [part 5](/en/part5/props_children_and_proptypes#references-to-components-with-ref) we used the [useImperativeHandle](https://reactjs.org/docs/hooks-reference.html#useimperativehandle) hook which allows components to provide their functions to other components. In [part 6](/en/part6/react_query_use_reducer_and_the_contex) we used [useReducer](https://reactjs.org/docs/hooks-reference.html#usereducer) and [useContext](https://reactjs.org/docs/hooks-reference.html#usecontext) to implement a Redux like state management.
 
-Within the last couple of years, many React libraries have begun to offer hook-based APIs. [In part 6](/en/part6/flux_architecture_and_redux) we used the [useSelector](https://react-redux.js.org/api/hooks#useselector) and [useDispatch](https://react-redux.js.org/api/hooks#usedispatch) hooks from the react-redux library to share our redux-store and dispatch function to our components. Redux's hook-based API is a lot easier to use than the older, still available, [connect](/en/part6/connect) API.
+Within the last couple of years, many React libraries have begun to offer hook-based APIs. [In part 6](/en/part6/flux_architecture_and_redux) we used the [useSelector](https://react-redux.js.org/api/hooks#useselector) and [useDispatch](https://react-redux.js.org/api/hooks#usedispatch) hooks from the react-redux library to share our redux-store and dispatch function to our components.
 
-The [React Router's](https://reactrouter.com/en/main/start/tutorial) API we introduced in the [previous part](/en/part7/react_router) is also partially [hook](https://reacttraining.com/react-router/web/api/Hooks)-based. Its hooks can be used to access URL parameters and the _navigation_ object, which allows for manipulating the browser URL programmatically.
+The [React Router's](https://reactrouter.com/en/main/start/tutorial) API we introduced in the [previous part](/en/part7/react_router) is also partially [hook](https://reacttraining.com/react-router/web/api/Hooks)-based. Its hooks can be used to access URL parameters and the <i>navigation</i> object, which allows for manipulating the browser URL programmatically.
 
 As mentioned in [part 1](/en/part1/a_more_complex_state_debugging_react_apps#rules-of-hooks), hooks are not normal functions, and when using those we have to adhere to certain [rules or limitations](https://reactjs.org/docs/hooks-rules.html). Let's recap the rules of using hooks, copied verbatim from the official React documentation:
 
@@ -50,7 +50,7 @@ We implemented a counter application in [part 1](/en/part1/component_state_event
 
 ```js  
 import { useState } from 'react'
-const App = (props) => {
+const App = () => {
   const [counter, setCounter] = useState(0)
 
   return (
@@ -103,7 +103,7 @@ Our custom hook uses the _useState_ hook internally to create its state. The hoo
 React components can use the hook as shown below:
 
 ```js
-const App = (props) => {
+const App = () => {
   const counter = useCounter()
 
   return (
@@ -426,7 +426,7 @@ The application is otherwise complete, but in this exercise, you have to impleme
 
 Use the API endpoint [full name](https://restcountries.com/#api-endpoints-v3-full-name) to fetch a country's details in a _useEffect_ hook within your custom hook.
 
-Note that in this exercise it is essential to use useEffect's [second parameter](https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect) array to control when the effect function is executed.
+Note that in this exercise it is essential to use useEffect's [second parameter](https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect) array to control when the effect function is executed. See the course [part 2](/en/part2/adding_styles_to_react_app#couple-of-important-remarks) for more info how the second parameter could be used. 
 
 #### 7.8: ultimate hooks
 

src/content/7/en/part7c.md

@@ -31,15 +31,15 @@ Let's install the package with the command:
 npm install react-bootstrap
 ```
 
-Then let's add a link for loading the CSS stylesheet for Bootstrap inside of the <i>head</i> tag in the <i>public/index.html</i> file of the application:
+Then let's add a [link for loading the CSS stylesheet](https://react-bootstrap.github.io/getting-started/introduction#stylesheets) for Bootstrap inside of the <i>head</i> tag in the <i>public/index.html</i> file of the application:
 
 ```js
 <head>
   <link
     rel="stylesheet"
-    href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
-    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
-    crossOrigin="anonymous"
+    href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
+    integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
+    crossorigin="anonymous"
   />
   // ...
 </head>
@@ -66,6 +66,8 @@ We notice that this already affected the appearance of the application. The cont
 
 ![browser notes app with margin spacing](../../images/7/6ea.png)
 
+#### Table
+
 Next, let's make some changes to the <i>Notes</i> component so that it renders the list of notes as a [table](https://getbootstrap.com/docs/4.1/content/tables/). React Bootstrap provides a built-in [Table](https://react-bootstrap.github.io/components/table/) component for this purpose, so there is no need to define CSS classes separately.
 
 ```js
@@ -131,7 +133,8 @@ let Login = (props) => {
         </Form.Group>
       </Form>
     </div>
-)}
+  )
+}
 ```
 
 The number of components we need to import increases:
@@ -247,16 +250,7 @@ Install the library with the command
 npm install @mui/material @emotion/react @emotion/styled
 ```
 
-Then add the following line to the <i>head</i> tag in the <i>public/index.html</i> file. The line loads Google's font Roboto.
-
-```js
-<head>
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
-  // ...
-</head>
-```
-
-Now let's use MaterialUI to do the same modifications to the code we did earlier with bootstrap.
+Now let's use MaterialUI to do the same modifications to the code we did earlier with Bootstrap.
 
 Render the contents of the whole application within a [Container](https://mui.com/components/container/):
 
@@ -273,6 +267,8 @@ const App = () => {
 }
 ```
 
+#### Table
+
 Let's start with the <i>Notes</i> component. We'll render the list of notes as a [table](https://mui.com/material-ui/react-table/#simple-table):
 
 ```js
@@ -504,7 +500,6 @@ Here are some other UI frameworks for your consideration. If you do not see your
 - <https://semantic-ui.com/>
 - <https://mantine.dev/>
 - <https://react.fluentui.dev/>
-- <https://storybook.js.org>
 - <https://www.primefaces.org/primereact/>
 - <https://v2.grommet.io>
 - <https://blueprintjs.com>
@@ -514,7 +509,6 @@ Here are some other UI frameworks for your consideration. If you do not see your
 - <https://master.co/>
 - <https://nextui.org/>
 
-
 ### Styled components
 
 There are also [other ways](https://blog.bitsrc.io/5-ways-to-style-react-components-in-2019-30f1ccc2b5b) of styling React applications that we have not yet taken a look at.

src/content/7/en/part7d.md

@@ -99,16 +99,36 @@ We define the functionality of webpack in the <i>webpack.config.js</i> file, whi
 ```js
 const path = require('path')
 
+const config = () => {
+  return {
+    entry: './src/index.js',
+    output: {
+      path: path.resolve(__dirname, 'build'),
+      filename: 'main.js'
+    }
+  }
+}
+
+module.exports = config
+```
+
+**Note:** it would be possible to make the definition directly as an object instead of a function:
+
+```js
+const path = require('path')
+
 const config = {
   entry: './src/index.js',
   output: {
     path: path.resolve(__dirname, 'build'),
     filename: 'main.js'
   }
 }
+
 module.exports = config
 ```
 
+An object will suffice in many situations, but we will later need certain features that require the definition to be done as a function.
 
 We will then define a new npm script called <i>build</i> that will execute the bundling with webpack:
 
@@ -176,18 +196,20 @@ Let's take a closer look at the contents of our current <i>webpack.config.js</i>
 ```js
 const path = require('path')
 
-const config = {
-  entry: './src/index.js',
-  output: {
-    path: path.resolve(__dirname, 'build'),
-    filename: 'main.js'
+const config = () => {
+  return {
+    entry: './src/index.js',
+    output: {
+      path: path.resolve(__dirname, 'build'),
+      filename: 'main.js'
+    }
   }
 }
 
 module.exports = config
 ```
 
-The configuration file has been written in JavaScript and the configuration object is exported using Node's module syntax. 
+The configuration file has been written in JavaScript and the function returning the configuration object is exported using Node's module syntax. 
 
 Our minimal configuration definition almost explains itself. The [entry](https://webpack.js.org/concepts/#entry) property of the configuration object specifies the file that will serve as the entry point for bundling the application.
 
@@ -268,26 +290,32 @@ We can use [loaders](https://webpack.js.org/concepts/loaders/) to inform webpack
 Let's configure a loader to our application that transforms the JSX code into regular JavaScript:
 
 ```js
-const config = {
-  entry: './src/index.js',
-  output: {
-    path: path.resolve(__dirname, 'build'),
-    filename: 'main.js',
-  },
-  // highlight-start
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        loader: 'babel-loader',
-        options: {
-          presets: ['@babel/preset-react'],
+const path = require('path')
+
+const config = () => {
+  return {
+    entry: './src/index.js',
+    output: {
+      path: path.resolve(__dirname, 'build'),
+      filename: 'main.js'
+    },
+      // highlight-start
+    module: {
+      rules: [
+        {
+          test: /\.js$/,
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-react'],
+          },
         },
-      },
-    ],
-  },
-  // highlight-end
+      ],
+    },
+      // highlight-end
+  }
 }
+
+module.exports = config
 ```
 
 Loaders are defined under the <i>module</i> property in the <i>rules</i> array.
@@ -625,7 +653,7 @@ const App = () => {
 
 ### Minifying the code
 
-When we deploy the application to production, we are using the <i>main.js</i> code bundle that is generated by webpack. The size of the <i>main.js</i> file is 1356668 bytes even though our application only contains a few lines of our code. The large file size is because the bundle also contains the source code for the entire React library. The size of the bundled code matters since the browser has to load the code when the application is first used. With high-speed internet connections, 1356668 bytes is not an issue, but if we were to keep adding more external dependencies, loading speeds could become an issue, particularly for mobile users.
+When we deploy the application to production, we are using the <i>main.js</i> code bundle that is generated by webpack. The size of the <i>main.js</i> file is 1009487 bytes even though our application only contains a few lines of our code. The large file size is because the bundle also contains the source code for the entire React library. The size of the bundled code matters since the browser has to load the code when the application is first used. With high-speed internet connections, 1009487 bytes is not an issue, but if we were to keep adding more external dependencies, loading speeds could become an issue, particularly for mobile users.
 
 If we inspect the contents of the bundle file, we notice that it could be greatly optimized in terms of file size by removing all of the comments. There's no point in manually optimizing these files, as there are many existing tools for the job.
 
@@ -691,7 +719,7 @@ Let's store the following content in the <i>db.json</i> file:
 
 Our goal is to configure the application with webpack in such a way that, when used locally, the application uses the json-server available in port 3001 as its backend.
 
-The bundled file will then be configured to use the backend available at the <https://obscure-harbor-49797.herokuapp.com/api/notes> URL.
+The bundled file will then be configured to use the backend available at the <https://notes2023.fly.dev/api/notes> URL.
 
 We will install <i>axios</i>, start the json-server, and then make the necessary changes to the application. For the sake of changing things up, we will fetch the notes from the backend with our [custom hook](/en/part7/custom_hooks) called _useNotes_:
 
@@ -716,7 +744,7 @@ const useNotes = (url) => {
 const App = () => {
   const [counter, setCounter] = useState(0)
   const [values, setValues] = useState([])
-  const url = 'https://obscure-harbor-49797.herokuapp.com/api/notes' // highlight-line
+  const url = 'https://notes2023.fly.dev/api/notes' // highlight-line
   const notes = useNotes(url) // highlight-line
 
   const handleClick = () => {
@@ -738,34 +766,22 @@ export default App
 
 The address of the backend server is currently hardcoded in the application code. How can we change the address in a controlled fashion to point to the production backend server when the code is bundled for production?
 
-Let's change the configuration object in the <i>webpack.config.js</i> file to a function instead of an object:
+Webpack's configuration function has two parameters, <i>env</i> and <i>argv</i>. We can use the latter to find out the <i>mode</i> defined in the npm script:
 
 ```js
-const path = require('path');
+const path = require('path')
 
-const config = (env, argv) => {
+const config = (env, argv) => { // highlight-line
+  console.log('argv.mode:', argv.mode)
   return {
-    entry: './src/index.js',
-    output: {
-      // ...
-    },
-    devServer: {
-      // ...
-    },
-    devtool: 'source-map',
-    module: {
-      // ...
-    },
-    plugins: [
-      // ...
-    ],
+    // ...
   }
 }
 
 module.exports = config
 ```
 
-The definition remains almost the same, except for the fact that the configuration object is now returned by the function. The function receives the two parameters, <i>env</i> and <i>argv</i>, the second of which can be used for accessing the <i>mode</i> that is defined in the npm script. 
+Now, if we want, we can set Webpack to work differently depending on whether the application's operating environment, or <i>mode</i>, is set to production or development.
 
 We can also use webpack's [DefinePlugin](https://webpack.js.org/plugins/define-plugin/) for defining <i>global default constants</i> that can be used in the bundled code. Let's define a new global constant <i>BACKEND\_URL</i> that gets a different value depending on the environment that the code is being bundled for:
 
@@ -778,7 +794,7 @@ const config = (env, argv) => {
 
   // highlight-start
   const backend_url = argv.mode === 'production'
-    ? 'https://obscure-harbor-49797.herokuapp.com/api/notes'
+    ? 'https://notes2023.fly.dev/api/notes'
     : 'http://localhost:3001/notes'
   // highlight-end
 
@@ -831,6 +847,8 @@ const App = () => {
 
 If the configuration for development and production differs a lot, it may be a good idea to [separate the configuration](https://webpack.js.org/guides/production/) of the two into their own files.
 
+Now, if the application is started with the command _npm start_ in development mode, it fetches the notes from the address http://localhost:3001/notes. The version bundled with the command _npm run build_ uses the address https://notes2023.fly.dev/api/notes to get the list of notes.
+
 We can inspect the bundled production version of the application locally by executing the following command in the <i>build</i> directory:
 
 ```js