hw_2_setupReact_code #1
Conversation
| @@ -0,0 +1,3 @@ | |||
| node_modules | |||
| coverage | |||
| build-storybook.log | |||
| "prop-types": "^15.7.2", | ||
| "react": "^17.0.2", | ||
| "react-dom": "^17.0.2", | ||
| "typescript": "^4.4.4" |
There was a problem hiding this comment.
деинсталировал prop-types
.husky/pre-commit
Outdated
| npx --no-install lint-staged | ||
| npx --no-install lint-staged | ||
| npx --no-install lint-staged | ||
| npx --no-install lint-staged | ||
| npx --no-install lint-staged | ||
| npx --no-install lint-staged | ||
| npx --no-install lint-staged |
There was a problem hiding this comment.
Зачем столько - вот пример настройки typicode/husky#949
tsconfig.json
Outdated
| "skipLibCheck": true, /* Skip type checking of declaration files. */ | ||
| "forceConsistentCasingInFileNames": true, /* Disallow inconsistently-cased references to the same file. */ | ||
| "downlevelIteration": true, | ||
| "types": ["@emotion/core"] |
There was a problem hiding this comment.
вот так TypeScript потерял преимуществ в типизации https://www.typescriptlang.org/tsconfig#types
| describe("Field", () => { | ||
| test("renders Field component", () => { | ||
| render( | ||
| <Field |
There was a problem hiding this comment.
Потерян колбек handleCellClick - из за отключения типизации этого не видно. В след тесте тоже.
TS2741: Property 'handleCellClick' is missing in type '{ sizes: { width: number; height: number; }; cells: { isChecked: false; serialNumber: number; id: number; }[]; }' but required in type 'FieldProps'.
src/components/Field/index.tsx
Outdated
|
|
||
| export type FieldProps = { | ||
| sizes: {width: number; height: number}, | ||
| cells: any, |
There was a problem hiding this comment.
надо избавлятся от ANY - подняв тип из Cell
| @@ -0,0 +1,13 @@ | |||
| import React from "react"; | |||
|
|
|||
| const Row = (props: any) => { | |||
There was a problem hiding this comment.
Надо избавлятсья от Any - например через типизацию PropsWithChildren<{}>
| exports.PROJECT_ROOT = PROJECT_ROOT; | ||
| exports.BUILD_DIRECTORY = resolve(PROJECT_ROOT, './dist'); | ||
| exports.SOURCE_DIRECTORY = resolve(PROJECT_ROOT, './src'); |
There was a problem hiding this comment.
не очень понял зачем это, если даже в конфиге вебпака используется как константа, так и прямое вычисление директорий
webpack.config.js
Outdated
| { | ||
| test: /\.css$/, | ||
| use: ["style-loader", "css-loader"], | ||
| }, |
There was a problem hiding this comment.
в проекте нет css - зачем нужен лодер ?
src/App.tsx
Outdated
|
|
||
| const handleCellClick = (serialNumber: number) => { | ||
| setCells((prevState) => { | ||
| console.log(" prev state ", prevState); |
package.json
Outdated
| "test:watch": "jest --watch", | ||
| "start": "webpack serve --mode development --hot", | ||
| "build": "npx webpack --mode production", | ||
| "prepare": "husky install && npx husky add .husky/pre-commit \"npx --no-install lint-staged\"", |
There was a problem hiding this comment.
&& npx husky add .husky/pre-commit \"npx --no-install lint-staged\"",
Вот это нужно убрать, потому что prepare скрипт запускается при каждом запуске npm install, и вы каждый раз в файл дописываете еще один запуск lint-staged
There was a problem hiding this comment.
Еще хук не имеет прав на запуск, установил chmod +x - заработало
src/App.tsx
Outdated
| const App = () => { | ||
|
|
||
| const sizes = {width: 4, height: 2}; | ||
| const initialCellsState = Array.from({ length: (sizes.height * sizes.width) }, (_, i) => ({ |
There was a problem hiding this comment.
Я бы задал интерфейс для состояния
|
|
||
| const [cells, setCells] = useState(initialCellsState); | ||
|
|
||
| const handleCellClick = (serialNumber: number) => { |
There was a problem hiding this comment.
Возможно в данном задании это некритично, но при клике по одной ячейке перерисовывается все поле, если я не ошибаюсь.
|
|
||
| const [cells, setCells] = useState(initialCellsState); | ||
|
|
||
| const handleCellClick = (serialNumber: number) => { |
There was a problem hiding this comment.
для чего такой проброс handleClick из App в Сеll через Field? Почему не объявить его в Field? и сделать ему там же внутренний state
There was a problem hiding this comment.
подумал, что эти параметры могут задаваться в каком-нибудь другом компоненте
|
Добрый день, можно дополнить readme с необходимыми коммандами для запуска |
| @@ -0,0 +1,47 @@ | |||
| import React from "react"; | |||
| import CSS from "csstype"; | |||
|
Если скачать код с гита, обновить зависимости, то storybook после этого не запускается. |
| <Cell | ||
| key={index} | ||
| cell={props.cells[index]} | ||
| handleCellClick={props.handleCellClick} |
There was a problem hiding this comment.
Если сделать поле 100х100 не много ли обработчиков onClick будут в DOM? Может выгоднее поставить один на родителя?
No description provided.