Кто сможет проверить небольшой шаблон на react?

Question

[Quintis]

Здравствуйте. Изучаю REACT по официальной документации и по курсу на Udemy. Хочу создать интернет-магазин, для начала сделал небольшой шаблон для меню сайта. Кто может проверить код и дать обратную связь что б я мог сделать меню и интернет магазин лучше? Спасибо.

https://quintis1212.github.io/react-build//build/i...

https://github.com/Quintis1212/react-app-prod продакшн

Comments

[alex-1917]

никто не сможет.
удолието

[Quintis]

alex-1917, а что не так с кодом ?

[alex-1917]

Quintis, да не с кодом. ты же предлагаешь поставить приложуху на гаджет, если я правильно понял? а потом вирусня сожрет все кроме дисплея, да?

[Quintis]

alex-1917, поставить на телефон не предлагаю, предлагаю пройти по ссылкам и посмотреть код , дать обратную связь что можно лучше сделать. Это мой небольшой тренировочный проект по REACT

[Сергей Карвасарный]

Ну с того что я заметил сразу зачем тебе делать в каждом файле state с меню сделай себе файл state.js и сделай себе массив с данными со всего сайта, все равно бд я так понял не знаешь как использовать, меню у тебя вообще странное почитай про route router Navlink switch и организуй меню а не ясную штуку) и если тебе не нужен по функциональности класс то зачем его использовать)

[Quintis]

Сергей Карвасарный, Спасибо ) я еще только учусь , до router не дошел еще ...

[Сергей Карвасарный]

Меню хтаранишь в стейте а толку если ты не будешь вносить изменения? можно просто типа такого, можно разбить на компонент родителя это будет просто ul.menu и все li сделать в компоненте intemMenu и потом использовать в другом место этот компонент, можно передать по пропсу другой файл State d itemMenu и вывести его не в ul.menu компоненте а вообще в footerMenu.

import React from "react";  
import State from './State';  //файл с меню

const ListMenu = props => {
const listMenu = State.menu.map((item,index) =>{
 return (
<ItemMenu key={index} value={item}>
)
});
 return {listMenu }
}

/*itemMenu*/
 <li>
   <NavLink to={`/${props.value.url}`}>
     Profile
    </NavLink>
 </li>

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

const MenuList = [
  {
    id: 1,
    name: "home",
    url: "/"
  },
  {
    id: 2,
    name: "How it work",
    url: "/how-it-work"
  } 
];

export default MenuList;

[Quintis]

Сергей Карвасарный, State - это js файл с массивом для меню?

[Quintis]

Сергей Карвасарный,

Ну с того что я заметил сразу зачем тебе делать в каждом файле state с меню сделай себе файл state.js

а как он должен выглядеть? Класс со стейтом и методами которые возвращают стейт класса ?

[Сергей Карвасарный]

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

[Quintis]

Сергей Карвасарный, Спасибо ) интересно , а где вы изучили REACT) на каких ресурсах или курсах )

[Сергей Карвасарный]

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

[Сергей Карвасарный]

Quintis, Типа так можешь организовать, тут на примере текста для страниц

типа такого

const DataList = {
  banner: {
    text:
      "<p>DEVELOPERS & IT STAFF FROM POLAND</p><h5>Ggreenback IT center help your business grow</h5>"
  },
  home: {
    box1: {
      title: "WHY GGREENBACK IT?",
      text:
        "Israel IT Center is one of the largest Premium Staffing Service for companies — run by creatives, for creatives. We connect interactive professionals with companies looking for full-time talent. Whether you are a hiring manager looking for talent, our team is here to help and give you the best service",
      itemList: [
        {
          id: 1,
          img: "badge.png",
          title: "STAFF’S HIGH PROFESSIONAL LEVEL",
          text: "Excepteur sint occaecat proidentest laborum"
        },
        {
          id: 2,
          img: "startup.png",
          title: "FAST AND PRECISE RECRUITMENT PROCESS",
          text: "Deserunt mollit anim id est laborum"
        },
        {
          id: 3,
          img: "plan.png",
          title: "INDIVIDUAL DEVELOPMENT PLAN",
          text: "Officia deserunt mollit anim id est laborum"
        },
        {
          id: 4,
          img: "disc.png",
          title: "OVER 60% SAVINGS ON LABOR COST",
          text: "Proident, sunt in culpa qui officia deserunt mollit"
        }
      ]
    },
    box2: {
      title: "WE'VE GOT YOU COVERED",
      text:
        "What ever your needs are - we have a right fit for you! Select which area you need talents in and we’ll get them for you",
      itemList: [
        {
          title: "QA",
          img: "test.png"
        },
        {
          title: "MANAGMENT",
          img: "manag.png"
        },
        {
          title: "CONTENT",
          img: "cont.png"
        },
        {
          title: "Test",
          img: "syst.jpg"
        },
        {
          title: "UX/UI DESIGN",
          img: "desig.png"
        },
        {
          title: "DEVELOPER",
          img: "test.png"
        }
      ]
    },
    partners: {
      title: "ABOUT GGREENBACK IT CENTER",
      text:
        "Ggreenback IT Center is a hub of highly qualified and talented software engineers, designers, quality assurance and project managers that can implement any idea into life. Understanding the importance of having right people in your team we recruit the best specialists based on your requirements. Established to help companies and individuals around the world to optimize expenses and have their development team of any quantity at an affordable cost. operating in Warszawa, IT-capital of Poland, allows hiring highly professional developers of any level and type for comparatively lower remuneration.",
      itemList: {
        title: "OUR PARTNERS",
        items: [
          {
            img: "airbnb.png"
          },
          {
            img: "tinder.png"
          },
          {
            img: "waze.png"
          },
          {
            img: "play.png"
          },
          {
            img: "ags.png"
          },
          {
            img: "wooga.png"
          }
        ]
      },
      quote: {
        title: "OUR CLIENTS SAYING",
        text:
          "“We have built great working relationship with Ggreenback IT. I found them very professional, accurate in the profile understanding and due to that we created an amazing team with qualitative human capital. We were referred from colleagues of ours. Not only have we been amazed at the depth of understanding, we found ourselves working with a team of friends..”",
        name: "Peter Bederman",
        img: "user.png",
        mark: "Head Of HR Yellow Head"
      }
    }
  },
  howItWork: {
    box1: {
      title: "WHAT IS INCLUDED IN THE FEE?",
      text: "Ggreenback IT Center is one of the largest Premium Staffing Service for companies — run by creatives, for creatives. We connect interactive professionals with companies looking for full-time talent. Whether you are a hiring manager looking for talent, our team is here to help and give you the best service",
      itemList: [
        {
          img: "working.png",
          title: "Recruitment process from A to Z"
        },
        {
          img: "info.png",
          title: "HR services during employment period"
        },
        {
          img: "budget.png",
          title: "Full payroll services; employment, accounting, all taxes paid"
        },
        {
          img: "office.png",
          title: "Office rent and kitchen supplies"
        },
        {
          img: "lang.png",
          title: "English classes"
        },
        {
          img: "health.png",
          title: "Health care benefits"
        },
        {
          img: "cocktail.png",
          title: "Corporate events"
        },
        {
          img: "gift.png",
          title: "Birthday gifts"
        },
        {
          img: "tea.png",
          title: "Team-buildings"
        }
      ]
    }
  }
};

export default DataList;

[Quintis]

Сергей Карвасарный, а можете сказать где и как REACT изучили ?)

[Сергей Карвасарный]

Quintis, офф документация хорошо, но по ней сразу довольно не просто, мне друг подсказывал у него в этомы опыт хороший) я читал про как сделать меню не мог понять, он мне показал за 1 минуту и там просто легче легкого, а по документации вообще ничего не мог сообразить)

[Quintis]

Сергей Карвасарный, насчет документации согласен )

[Сергей Карвасарный]

Quintis, https://habr.com/ru/company/ruvds/blog/432636/ вот пройди его от начала до конца, я с него начинал, это этого смотрел много других но понятней этого ничего не было, на IT-KAMASUTRA youtube можешь найти он довольно понятно рассказывает но я начал его смотреть когда уже был багаж знаний, а довольно много чего с того что он рассказывал слегка уже не так, но есть штуки которые точно пригодятся, посмотреть точно стоит и документация точно смотри, правильней чем там точно не будет)) у него там на примере соц сети, довольно большой проект много чего охватишь и как раз та тематика, что ты начал делать)

[Quintis]

Сергей Карвасарный, Спасибо)

[Сергей Карвасарный]

Quintis, да нет за что

[Dmitry]

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