Оценка своего уровня. Как улучшить код?

Здравствуйте, последние месяцы активно изучаю JS и React, стараюсь как можно больше писать код и работать именно над практическими задачами, информацию в основном беру из открытых источников, но нет опытных товарищей кто мог бы оценить насколько правильно ее использую. Сейчас планирую начать проходить собеседования и хочется хотя бы примерно понимать свой уровень и количество говнокода в своих проектах.

Последнее что написал - https://pink-react-app.firebaseapp.com/ - Git - https://github.com/waytolax/pink-react-app

Буду признателен за любые комментарии, оценки и советы, над чем стоит еще поработать, чему уделить внимание.
  • Вопрос задан
  • 3193 просмотра
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
1. Используйте const вместо let для определения переменных которые не переопределяются в коде. Это помогает снизить когнитивную нагрузку с человека читающего код и негласный стандарт в React разработке.

2. Такие вещи как globalStyles и конфигурацию store лучше вынести в отдельные файлы. Они могут со временем хорошо разрастись.
По поводу globalStyles, вы вообще можете вынести их в отдельный css файл.

3. Вместо:
{
  isModal
  ? <Route path="/auth" component={AuthPopup} />
  : null
}

лучше:
{isModal && <Route path="/auth" component={AuthPopup} />}


4. Вместо:
function mapDispatchToProps(dispatch) {
    return {
        autoLogin: () => dispatch(autoLogin()),
        getBrowser: () => dispatch(getBrowser()),
        getMedia: () => dispatch(getMedia())
    }
}


лучше:
const mapDispatchToProps = {
  autoLogin,
  getBrowser,
  getMedia,
};


5. Точки с запятыми в конце то есть, то нет. Определитесь и приведите код к одному виду.

6.
& label {}
& input {}
& span {}

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

7. Почему папка со страницами называется Containers? Дань бойлерплейтам?

8. Использование trailing comma является хорошей практикой.

9.
import {combineReducers} from 'redux';
import photoReducer from './photoReducer';
import authReducer from './authReducer';
import globalReducer from './globalReducer';

export default combineReducers({
    photoReducer, authReducer, globalReducer
})


Все таки приятней работать с хранилищем в котором ключи не имеют в названии слова reducer:
import {combineReducers} from 'redux';
import photo from './photoReducer';
import auth from './authReducer';
import global from './globalReducer';

export default combineReducers({
  photo, 
  auth,
  global,
});


10. Забудьте вообще, что в языке есть возможность использовать вложенный тернарный оператор:
return e === 'invalid-email' ? 'Неверно указан e-mail'
    : e === 'user-not-found' ? 'Указанный e-mail на найден'
    : e === 'wrong-password' ? 'Неверный пароль'
    : e === 'email-already-in-use' ? 'Указанный e-mail уже используется'
    : e === 'network-request-failed' ? 'Нет подключения к интернету'
    : e === 'operation-not-allowed' ? 'Произошла ошибка, попробуйте снова'
    : e === 'popup-closed-by-user' ? 'Окно авторизации закрыто пользователем'
    : e === 'account-exists-with-different-credential' ? 'Аккаунт уже существует с другими данными, используйте другой способ авторизации'
    : e

Это одна из самых худших практик в JavaScript разработке. Тут лучше подойдет конструкция switch case

11. Константы actionTypes лучше вынести в папку constants и разложить по разным файлам, иначе со временем у вас там будет свалка.

12. Вместо:
import {SET_ACTIVE, CHANGE_VALUE, SET_DEFAULT, UPLOAD, UPDATE_IMAGE, SET_IMAGE_ERROR, SET_LIKE, SET_COMMENT, ADD_ARTICLE_SUCCESS, FETCH_ARTICLES_START, FETCH_ARTICLES_SUCCESS, FETCH_ARTICLES_ERROR} from '../actions/actionTypes';

Лучше:
import {
  SET_ACTIVE,
  CHANGE_VALUE,
  SET_DEFAULT, UPLOAD,  
  UPDATE_IMAGE,
  SET_IMAGE_ERROR,
  SET_LIKE,
  SET_COMMENT,
  ADD_ARTICLE_SUCCESS,
  FETCH_ARTICLES_START,
  FETCH_ARTICLES_SUCCESS,
  FETCH_ARTICLES_ERROR,
} from '../actions/actionTypes';


13. Попробуйте внедрить библиотеку reselect. И для получения значения из store вместо записи вида:
function mapStateToProps(state) {
    return {
        browser: state.globalReducer.browser
    }
}


использовать селектор:
const mapStateToProps = state => ({
  browser: browserSelector(state),
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы