Skip to content

Homework 2. Interactive board#1

Open
ILyaCyclone wants to merge 9 commits into
masterfrom
hw-02_board
Open

Homework 2. Interactive board#1
ILyaCyclone wants to merge 9 commits into
masterfrom
hw-02_board

Conversation

@ILyaCyclone
Copy link
Copy Markdown
Owner

Homework task 2

JSX как основа ReactJS. Functional components

Установка и настройка React. JSX как основа ReactJS. Functional components

Цель:
Главная цель - получить достаточно знаний на данном этапе. Внимательно читать документацию и набираться необходимых знаний. Самостоятельно сконфигурировать ReactJS-проект. Учимся разрабатывать сложные компоненты и познаем основы композиции. В результате: получим готовый шаблон приложения для дальнейшей разработки. сможем спроектировать и разработать сложный компонент.

Разрабатываем свой "сложный" компонент с логикой и вложенными компонентами.

Пример, применительно к game of life проекту. Разрабатываем поле и наполняем его квадратиками. Родительский компонент "держит" данные. Дочерние принимают порядковые номера и выводят их. Пока не нужно обращать внимание на стили. Можно обойтись условными обозначениями - границами и числом внутри.

Требования

  • разработку ведем по TDD
  • разработка ведется от storybook

Что нужно сделать?

  • добавить конфигурации для JSX/TSX через babel используем preset-react
  • развернуть storybook
  • настроить jest
  • устанавливаем и настраиваем storybook knobs для манипуляции данными
  • родительский компонент должен принимать данные для отображения
  • проектируем родительский компонент, который будет выводить лист дочерних компонентов
  • правильно добавляем обработчик события click, выводящий номер квадратика
  • покрываем обработчики тестами

Не забываем про loki и снепшот тесты!

Критерии оценки:

  • 1 балл за конфигурации JSX/TSX, за настройку storybook knobs
  • 3 балла за контейнер с логикой и вложенные компоненты
  • 2 балла за storybook, за для всех компонентов
  • 1 балл за обработчик событий
  • 1 балл за тесты
  • 2 балла за loki снепшот тесты

Also small Cell ui tweaks.
So that Eslint is happy with config files.
1) npx mrm lint-staged
2) npx simple-git-hooks (lint-staged/lint-staged#958)
3) `git config core.hooksPath` should be empty or point to `.git/hooks/`.
Otherwise call `git config --unset core.hooksPath` or `git config core.hooksPath .git/hooks/`.
Comment thread package.json
"pre-commit": "npx lint-staged"
},
"lint-staged": {
"*.{js,jsx,ts,tsx,json}": "eslint --cache --fix"
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

а что на счет преттира и его запуска?

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Eslint использует prettier, код форматируется согласно настройкам .prettierrc.

Comment thread package.json
"test": "npx jest && npx loki",
"jest": "jest",
"coverage": "jest --collect-coverage",
"lint": "npx eslint --ext .js,.jsx,.ts,.tsx,.json --fix ./",
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

тут npx не нужен (в других скриптах его у тебя нет)

}) => {
return (
<td
onClick={() => cellClicked(rowIndex, colIndex)}
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

зачем так? useCallback?

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Василий, можешь дать более развёрнутый комментарий, пожалуйста? Не понимаю суть замечания.

Я бы мог переделать это в формате ниже, но особой разницы я не вижу.

  const onClick = () => cellClicked(rowIndex, colIndex);

  return (
    <td onClick={onClick}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants