diff --git a/react/modules/tasks/class-components.md b/react/modules/tasks/class-components.md index fca22fa9b..2caf88ded 100644 --- a/react/modules/tasks/class-components.md +++ b/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