Code review react spa

Доброго вечора!

Я вже 3 рік вивчаю Front-end і хов би дізнатись вашу думку.
На даний час почав розробку інтернет магазину.
Пишу на react і хотів би дізнатись на скільки якісно пишу код чи такий код взагалі можна писати. Хто може подивитись хоча б на хвилину і сказати ваші враження буду дуже вдячний.

Проект

Підписуйтеся на Telegram-канал «DOU #tech», щоб не пропустити нові технічні статті

Теми: code review, react

👍ПодобаєтьсяСподобалось0

До обраногоВ обраному0

Facebook

Twitter

Ctrl + Enter

Grisha Buzinov 06.01.2021 05:43

Привет, классный проект, странно что еще не работаешь

Советы
Фронт
Просмотрел пару файлов, везде одни и те же штуки, сделаб на примере Account.js

1) Есть хорошая практика, если уже используешь что-то типа радакса — в него переносить всю бизнес логику из контейнеров и оставлять состояние компонента только в реюзабельных компонентах, то есть я смотрю github.com/...tainer/Account/Account.js
Там используется useState, useEffect во многих местах, это все хорошо бы перенести в отдельный стор, для того что бы в компонентах было меньше логики и тебе не приходилось прыгать между глабольным стором (редакс) и стейтом компонентов

2) линтер + претиер само собой, хорошо подключить что-то типа хаски на пуш или коммит, что бы оно все делало автоматом

3) Могу ошибаться, но в одних местах напрямую вызывается axios и где-то твой собественный модуль API, хорошо это бы все привести к одному виду

4) API.put('/user/changeInf... — хорошо убрать это все в редакс экшены

5) history.push('/') — давно не писал на редаксе, хз как там сейчас, было что-то типа react router redux — что была возможность это юзать в экшенах

6) {showInfo?
  <AccountInfo
        email={email}
       name={name}
      surname={surname}
        gender={gender}
       age={age}
          phone={phone}
         />
        :<></>}

можно просто писать {showInfo ? AccountInfo : null}

7) React.memo — тут просто советы — юзать это все только когда появляются проблемы с частым ненужным перерендером, то есть не делать преждевременную оптимизацию, и не ставить их везде и сразу, ибо любая оптимизация несет в себе свой вес. я могу забиться, что если убрать все эти мемо — проект будет быстрее работать, а если поставить их только там где надо — еще лучше ))))

8) setNewName={(e)=>setNewName(e.target.value)}
— хорошо бы убрать колбеки из рендера и в AccountSettings комоненте передвать уже value, а не e

9) github.com/...ainer/Account/Account.css — если уже используешь бем — используй везде. Так же хорошо подкючить css модули, я так понимаю у тебя используетя react create app — там вроде надо просто добавить Account.module.css — они заработают. Если хочешь все же использовать Бем — хорошо было бы подключить sass или postcss для вложенности стилей — так удобнее

10) хорошо было бы сделать цсс или сасс перменные для всех одинаковых значений в цсс. Это облегчит изменение стилей в будущем

Например
padding-bottom: 10px;
color: red

11) const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

Такие вещи хорошо бы выносить из компонентов и оставлять в том же файле как константы или выности в хелперы

бекенд
1) res.json({ user: false, status: 404, comment: «User not found» }); — ты в куче мест используешь одно и тоже, круто было бы сделать хелпер по ошибкам
2) const getProductListSearch = async (str) => {
return new Promise((res,rej)=>{
const List = productListSchema
   List.find({name:{$regex:'.*'+str+'.*'}}, (err, list)=>{
     if(err) return console.log(err);
  res(list);
});
})
}

Это все очень странно) async — и так возвращает промис, я может что-то не понимаю, но по идеи оно должно выглядеть где-то так
const getProductListSearch = async (str) => {
try {
const list = await productListSchema.find({name:{$regex:'.*'+str+'.*'}})
return {err: null, data: list }
} catch (err) {
console.log(err);
return {err: err}
}
}

Вообще, круто — молодец)) удачи тебе))

Code review react spa

19 коментарів

Підписатись на коментарі