Ran format

react/modules/tasks/class-components.md

@@ -6,75 +6,83 @@
 2. Language Requirement
    - Use **TypeScript** for the project.
 3. Project Setup
+
    - Initialize the project using [Vite](https://vitejs.dev/guide/) with the [_react-ts_ template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts).
-      ```sh
-      # npm 7+, extra double-dash is needed:
-      npm create vite@latest rs-react-app -- --template react-ts
-      ```
+     ```sh
+     # npm 7+, extra double-dash is needed:
+     npm create vite@latest rs-react-app -- --template react-ts
+     ```
 
 4. Code Quality Tools
+
    1. ESLint
       - ESlint v.9 is already a part of the _react-ts_ setup.
    2. Prettier
+
       - Integrate Prettier for code formatting.
-      You can execute the following command to add missing plugins:
+        You can execute the following command to add missing plugins:
+
       ```sh
       npm install -D eslint-plugin-react eslint-plugin-prettier eslint-config-prettier eslint-plugin-react-compiler@beta
       npm install -D --save-exact prettier
       ```
+
       Now, add a new file `.prettierrc` to the root of the project:
+
       ```json
       {
-         "trailingComma": "es5",
-         "tabWidth": 2,
-         "semi": true,
-         "singleQuote": true
+        "trailingComma": "es5",
+        "tabWidth": 2,
+        "semi": true,
+        "singleQuote": true
       }
-
       ```
+
       And this is how your `eslint.config.js` should look like:
+
       ```js
-      import js from '@eslint/js';
-      import globals from 'globals';
-      import reactHooks from 'eslint-plugin-react-hooks';
-      import reactRefresh from 'eslint-plugin-react-refresh';
-      import react from 'eslint-plugin-react';
-      import tseslint from 'typescript-eslint';
-      import eslintPluginPrettier from 'eslint-plugin-prettier/recommended';
-      import reactCompiler from 'eslint-plugin-react-compiler';
+      import js from "@eslint/js";
+      import globals from "globals";
+      import reactHooks from "eslint-plugin-react-hooks";
+      import reactRefresh from "eslint-plugin-react-refresh";
+      import react from "eslint-plugin-react";
+      import tseslint from "typescript-eslint";
+      import eslintPluginPrettier from "eslint-plugin-prettier/recommended";
+      import reactCompiler from "eslint-plugin-react-compiler";
 
       export default tseslint.config(
-      { ignores: ['dist'] },
-      {
-         extends: [
+        { ignores: ["dist"] },
+        {
+          extends: [
             js.configs.recommended,
             ...tseslint.configs.strict,
             eslintPluginPrettier,
-         ],
-         files: ['**/*.{ts,tsx}'],
-         languageOptions: {
+          ],
+          files: ["**/*.{ts,tsx}"],
+          languageOptions: {
             ecmaVersion: 2020,
             globals: globals.browser,
-         },
-         plugins: {
+          },
+          plugins: {
             react,
-            'react-hooks': reactHooks,
-            'react-refresh': reactRefresh,
-            'react-compiler': reactCompiler,
-         },
-         rules: {
+            "react-hooks": reactHooks,
+            "react-refresh": reactRefresh,
+            "react-compiler": reactCompiler,
+          },
+          rules: {
             ...reactHooks.configs.recommended.rules,
-            'react-refresh/only-export-components': [
-            'warn',
-            { allowConstantExport: true },
+            "react-refresh/only-export-components": [
+              "warn",
+              { allowConstantExport: true },
             ],
-            'react-compiler/react-compiler': 'error',
+            "react-compiler/react-compiler": "error",
             ...react.configs.recommended.rules,
-            ...react.configs['jsx-runtime'].rules,
-         },
-      }
+            ...react.configs["jsx-runtime"].rules,
+          },
+        },
       );
       ```
+
    3. Husky
       - Add Husky and configure it to run `lint` command on pre-commit.
       ```sh
@@ -88,6 +96,7 @@
             "format:fix": "prettier --write ."
         ```
         You can check the final setup [here](https://github.com/kravaring/rs-react-app).
+
 5. Pick a RESTfull api which supports search and pagination (pagination might be reffered as _offset_ and _limit_ params). E.g. https://pokeapi.co/, for Star Wars fans https://swapi.dev/api, for Star Trek fans https://stapi.co/api-documentation (OpenApi spec can be checked here https://editor.swagger.io/?url=https://stapi.co/api/v1/rest/common/download/stapi.yaml), or you can select another one complying with the requirements.
 
 ## Application Requirements