Join Yalantis and get a $1000 sign-in bonus! React.js, React Native, Python, Java, DevOps, BА. Apply now!
×Закрыть

Code review react spa

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

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

Проект

👍НравитсяПонравилось0
В избранноеВ избранном0
LinkedIn

Похожие топики

Допустимые теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Допустимые теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

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

Советы
Фронт
Просмотрел пару файлов, везде одни и те же штуки, сделаб на примере 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}
}
}

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

я может что-то не понимаю, но по идеи оно должно выглядеть где-то так

Так як Ви написали і повинно бути. Автор просто змішав старий і новий синтаксис, так як не розуміє, як працює async/await в JS.

Ну або метод find не є асинхронним з використанням promise чи async, і тому треба завертати в promise, щоб зробити використання його асинхронним.

о свидетель редакса появился

Велике спасибі вам за приділений час і пояснення.
Буду виправляти недоліки і робити покращення.

Щодо редакс, читав деякі статті, дивився код і там є різноманіття.Хтось все закидає в редакс, хтось роділяє дані на локальні в компонентах і гробальні в редакс і ще деякі використовують контекст.
Для себе я вибрав вибрав варіант де ті дані які мені знадобляться в різних частинах сайту виносити в редакс щоб різні компоненти мали доступ до даних але є дані які пов’язані тільки з одним компонетом. Для цих компонентів я зберігаю дані локально.
Щодо запитів на сервер погоджуюсь потрібно перенести в екшини так буде зручніше.
І ще раз дякую Вам за приділений час.

можно про 8 пункт подробнее, пожалуйста. Я тоже в рендере пишу колбеки, и не знаю как по другому.

Шукаючи в гуглі інфу зустрів багато статей ось наприклад Стаття1 і Стаття2
Якщо коротко використання стрілкової функції створює нову функцію при кожному рендері компонента, що може порушувати оптимізації, які використовують суворе порівняння для визначення ідентичності.
Наприклад в моєму випадку щоб змінити інфу про користувача він вводить нову і коли натискає на клавішу то виконується новий рендер і в мене це викликає близько 60-80 рендерів. Щоб цього не відбувалось я пробую використовувати useCallback.
Приклад useCallback

Коли перевіряв код виявив що даний роут ніде не застосовується тому вирішив закоментувати але на даний момент вже все дізнався але не встиг видалити зайвий код. Після свят знов візьмусь до апгрейду.

Ваш коментар не пройшов модерації по декільком причинам:

— Після коду початку inline коментаря ставиться пробіл.
— Речення граматично неправильне.
— Коментар не має завершеної думки і/чи є недостатньо детальним.
— В кінці коментаря ставиться крапка, або один знак запитання.
— Знак запитання не повинен бути розділеним з реченням пробілом.

В подальшому Ви закоментували блок коду використовуючи аналогічний In-line синтаксис. Якщо потрібно закоментувати декілька рядків поспіль, це робиться з використанням Multi-line синтаксису.

За порушення даних правил кодексу Програміста, вас заблоковано на 30 днів десь там.

Посмотрите мой проект: github.com/...​ora/sport-area-shop-front, может что-то полезное почерпнете.

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

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

может линтер/преттиер?

С виду по папкам вроде все обычно, начинаешь смотреть файлы, а там какие-то лишние строчки, где-то есть отступы, а где-то нет. И после очередного подобного

const AccountSettings = ({
email, emailVerify,goVerify,sendEmail,
setNewName,setNewSurname,setNewGender,setNewAge,setNewPhone,saveChange,
newPhone,newName,newSurname,newGender,newAge,
}) => {

Просто нет смысла тратить время и вникать в логику, когда сам код элементарно раздражающий. Учитывая 3 года «изучения».
Нужен опыт работы в команде. А так, если работает и приносит пользу — отлично, гуд инаф фо диплом, они там все равно не шарят как проверять

Дякую за пораду.
Так це ще не закінчений проект є ще прогавини в коді але система працює якраз на диплом:). Наразі пишу сам і досвіду в роботі в команді нажаль немає але сподіваюсь все зміниться.

але система працює якраз на диплом:)

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

А Ви часом не з КПІ?

Ні далекувато до Києва. Наразі вчусь в НУ «ЛП».

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