🖥 Полезные советы по написанию чистого React кода

▶️Деструктурирование свойств —
— это хороший способ сделать код чище и улучшить возможности по его поддержке. Дело в том, что это позволяет чётко выражать или объявлять то, что использует некая сущность. При этом такой подход не принуждает разработчиков вчитываться в реализацию компонента для того, чтобы выяснить состав свойств, связанных с ним.

// до рефакторинга
async function authenticate({ user_id, token }) {
  try {
    const response = await axios.post('https://someapi.com/v1/auth/', {
      user_id,
      token,
    })
    console.log(response)
    return response.data
  } catch (error) {
    console.error(error)
    throw error
  }
}

// после рефакторинга
async function authenticate({ user_id, jwt_token, token = jwt_token }) {
  try {
    const response = await axios.post('https://someapi.com/v1/auth/', {
      user_id,
      token,
    })
    console.log(response)
    return response.data
  } catch (error) {
    console.error(error)
    throw error
  }
}

Сущность jwt_token будет оцениваться в тот момент, когда код дойдёт до token. В результате, если jwt_token окажется действительным токеном, и сущность token окажется равной undefined, в token попадёт значение jwt_token. Если же в token уже было какое-то значение, не являющееся по правилам JS ложным (то есть — некий реальный токен), то в token просто останется то, что там уже было.


▶️Размещайте файлы компонентов в продуманной структуре папок
Например, эта структура может выглядеть наподобие

- src
    - components
- Breadcrumb
    - index.js
    - Breadcrumb.js
    - CollapsedSeparator.js
- Input
    - index.js
    - Input.js
    - utils.js
    - focusManager.js
- Card
    - index.js
    - Card.js
    - CardDivider.js
- Button.js
- Typography.js

📎 Читать подробнее

@react_tg