Симулятор разработки: приложение для заметок (часть 2)

Продолжаем вести наш проект и разрабатывать приложение для заметок. В предыдущей части мы определились с требованиями, базовыми прототипами и архитектурой, а так же сделали доску с задачами для нашего проекта.

Сегодня нам предстоит спланировать этапы, которые будут отвечать за то, в какой последовательности мы будем что-то разрабатывать или настраивать + начнем работать с кодом, мы то знаем, что это самая кайфовая часть)

Давайте посмотрим на то, как выглядит наша доска с задачами в данный момент:

Задача, которая сформулирована как "Создать каркас приложения" - не особо то понятна, помните, что при виде задачи, вы должны с легкостью себе ответить на вопросы:

• Что именно должно быть сделано в этой задаче?
• Как я пойму, что задача завершена?

Определяемся, что нужно для старта

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

Что нужно чтобы сделать фронтовой проект? Ну, давайте подумаем...

1. Создать базовый проект и очистить его от всего ненужного (банальный create-react-app)
2. Определиться со стайлингом и настроить автоматическое исправление
3. Определиться со структурой папок, чтобы не было хаоса
4. Настроить коннект с git

Пакеты все пачкой ставить не будем, лучше этим заниматься по мере необходимости!

И так, после подобных раздумий наша доска проекта выглядит уже примерно следующим образом:

Создаем базовый проект и зачищаем ненужное

Приступаем к первой задаче, просто создадим наше приложение:

yarn create react-app note-app --template typescript

Чтобы у нас не было ничего лишнего, удалим все из папки src, кроме index.tsx, index.css и App.tsx, причем в index.tsx оставим только вот это:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

А в App.tsx вот это:

import React from 'react';

const App = () => {
  return <div>App</div>;
};

export default App;

А в папке public/ оставим только

Настраиваем eslint

Не знаю как вам, но мне уже не комфортно работать в проекта, где нет базовой настройки для поддержания чистого код стайла, поэтому давайте супер быстро выполним простую настройку и пойдем дальше!

Для начала поставим необходимые зависимости для eslint:

yarn add -D eslint-plugin-import @typescript-eslint/parser eslint-import-resolver-typescript

После чего произведем инициализацию:

npx eslint --init

Отвечаем на вопросы в консоли примерно вот так:

How would you like to use ESLint?

-> To check syntax and find problems

What type of modules does your project use?

-> JavaScript modules (import/export)

Which framework does your project use?

-> React

Does your project use TypeScript?

-> Yes

Where does your code run?

-> Browser, Node

What format do you want your config file to be in?

-> JSON

Would you like to install them now?

-> yes

Which package manager do you want to use?

-> yarn

После этого нужно будет внести некоторые изменения в .eslintrc.json чтобы внести немного своих правил + чтобы у нас не было дальше конфликта с prettier, итоговый файл выглядит вот так:

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true,
    "jest": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "overrides": [],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": [
    "react",
    "react-hooks",
    "@typescript-eslint",
    "prettier"
  ],
  "rules": {
    "react/react-in-jsx-scope": "off",
    "spaced-comment": "error",
    "quotes": ["error", "single"],
    "no-duplicate-imports": "error"
  },
  "settings": {
    "import/resolver": {
      "typescript": {}
    }
  }
}

Настраиваем prettier

Устанавливаем необходимые зависимости:

yarn add -D prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react-hooks

И создаем файл .prettierrc.json:

{
  "semi": true,
  "tabWidth": 2,
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "all",
  "jsxSingleQuote": true,
  "bracketSpacing": true
}

И так, на этом настройка утилит закончена, осталось только добавить новые скрипты в package.json:

"lint": "eslint src/**/*.{js,jsx,ts,tsx,json}",
"lint:fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx,json}'",
"format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"

Структура папок

Для крупного приложения сложно с самого начала продумать хорошую структуру хранения кода, но основу заложить стоит, чтобы команда, которая состоит из нескольких разработчиков не писала как кому придет в голову.

И так, я предлагаю придерживаться в нашем проекте вот такой структуры:

-src/
----components/
------App/
--------index.ts
--------component.tsx
--------test.tsx 
------- style.css
------Sidebar/
--------index.ts
--------component.tsx
--------test.tsx 
------- style.css
------...

----hooks/
----context/
----typings/
----configs/

----services/
------Database/
--------index.ts
--------service.ts
--------test.ts

• components/ - для хранения компонент нашего приложения
• hooks/ - для общих хуков, которые используются в разных местах
• context/ - для описание различных контекстов приложения
• typings/ - для описание типов в приложении
• configs/ - для хранения различных кончиков (например, роутинг)
• services/ - для описание различных утилит, которые пригодятся нам при работе

Данная структура, возможно, не является оптимальной, да и для большого проекта скорее всего не подойдет, но скорее всего достаточно хорошо ляжет на наш простой проект с заметками.

Если у вас есть свои идеи по структуре файлов, то жду ваши комментарии)

Следующая задача - подключение к Git, думаю, это достаточно простое действие, так что описывать не буду, гайдов на эту тему очень много...

Ну а мы, пойдем дальше...

Приступаем к планированию разработки

Для начала давайте вспомним формальные требования, которые мы составили в прошлый раз:

Если подумать, то нужно сделать примерно следующие задачи:

• Настроить навигацию, чтобы иметь возможность перемещаться между заметками
• Подключить базу данных
• Настроить общий контекст
• Отображение списка существующих заметок
• Открытие текста определенной заметки
• Создание простой текстовой заметки
• Удаления заметки
• Редактирование заметки
• Поиск по списку заметок
• Отображение заметки в виде отрендеренного Markdown
• Что-то еще?

Возможно, сейчас я что-то упустила, но мы это с вами обнаружим в ходе работы, если что!

Унесите эти задачи себе на доску проекта, чтобы ничего не потерять!

На этой стадии проекта мы сегодня закончим, в следующий раз мы уже приступим к написанию кода!

Если вам интересен такой формат разора работы над проектом, то очень жду ваших реакций и комментариев!