• Как лучше организовать структуру файлов в React?

    miraage
    @miraage
    Старый прогер
    Вот Вам рекомендация от одного из авторов Redux, Дэна Абрамова: https://react-file-structure.surge.sh/
    По делу, так и есть. И Вы абсолютно правы насчёт "в каждой разработке своя организация". Такая же разная организация будет от проекта к проекту.

    При всём этом, могу выделить некоторые общие субъективные рекомендации:
    - разбивайте приложение на слои, например
    — api layer, знает куда сходить за данными и как замапить респонс
    — state layer, знает как изменять и хранить состояние приложения, a.k.a actions/reducers
    — core layer, знает про api и state, аналог application layer в ddd, в react way могут выступать как saga/thunk/context
    — shared/common/utils, всякие вот эти вот тупенькие хеплеры. У меня такое в каждом проекте есть. А кто-то смущается иметь такой слой, мол "как-то не engineer-way". Всё нормально. Вот пара примеров: react, create-react-app.
    - не злоупотребляйте магическими путями (смесь webpack resolve.modules или alias и "модулей" с index.js) - можно отстрелить ногу циклическими зависимостями. Очень мощная штука, однако без уверенных фундаментальных знаний в архитектурной области можно очень быстро намудрить лапши.

    По поводу "посмотреть (простые), на которые равняться" - вот вообще не рекомендую. Я за свою жизнь видел очень много чужого кода, который я внутри себя критиковал, но при этом пытался найти самые "лаконичные" нотки в имплементации. Как результат - видишь очень много всего, как хорошего, так и плохого, что помогает принимать решения в разработке. Желательно закреплять практикой, вроде pet-projects.
    Можно увидеть код от "крутого программиста" и пытаться его копировать, но без глубокого понимания решения, скорее всего, получится каша.

    https://github.com/gothinkster/react-redux-realwor... - простая реализация клона medium.com, содержит многие типовые операции.
    https://github.com/codesandbox/codesandbox-client - исходный код https://codesandbox.io
    Ответ написан
    Комментировать
  • Как избежать использования чрезмерного использования useMemo?

    Robur
    @Robur
    Знаю больше чем это необходимо
    Есть ли предложения, когда следует избегать использования Memo?

    накладные расходы на useMemo - сравнение двух массивов + вызов функции.

    Если то что вы положили в useMemo сложнее этой операции - оно уже даст какой-то выигрыш.
    Думаю сделать такую оценку каких-то трудов не составит.
    Ответ написан
    Комментировать
  • Чем реализация Virtual DOM отличается от createDocumentFragment (), если состояние не наблюдается?

    Robur
    @Robur
    Знаю больше чем это необходимо
    Разница в том что VirtualDom делают на JS на супер простых объектах с ограниченным функционалом и это очень быстро по сравнению с настоящим DOM, которые заметно сложнее и заметно медленнее.

    Я хотел бы знать, если у меня нет представления / компонента, который должен наблюдать за каким-либо состоянием или двунаправленной привязкой (например, просто визуализировать шаблон с помощью переданных опций и обрабатывать события в DOM), действительно ли Virtual DOM изменит это сценарии?


    Если ваш результирующий HTML не меняется в процессе работы - то можно и без virtualDom. Но это будет просто статичный HTML файл.

    Если HTML как-то меняется - то подход с virtualDom может оптимизировать эти изменения.

    Даже если у вас нет явного состояния, но в процессе работы вы хоть как-то меняете страницу - значит где-то это состояние есть. И вы меняете html в момент когда это состояние меняется, например

    просто визуализировать шаблон с помощью переданных опций и обрабатывать события в DOM
    Ответ написан
    Комментировать
  • Какой смысл несет в себе конструкция !! в js?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Получение логического эквивалента значения. Оператор логического отрицания применяется дважды, например:

    !!187 -> !false -> true
    !!NaN -> !true -> false

    Тот же результат даст Boolean(значение).
    Ответ написан
    Комментировать
  • Как перейти на другой экран с помощью navigation и вывести на нем нужные данные из redux?

    RomReed
    @RomReed
    JavaScript, Flutter, ReactNative, Redux, Firebase
    ну тут у вас 2 варианта
    1 вариант это по нажатию вы сохраняете id кликнутой записи в сторе потом переходите на нужный вам экран и зная этот id показываете детальную информацию о новости
    или 2 вариант по нажатию на новость вы с помощью навигации вместе переходом передаете и детали новости
    this.props.navigation.navigate('Details', {
                  itemId: 86,
                  otherParam: 'anything you want here',
                });
    Ответ написан
    Комментировать
  • Можно ли изучить computer science полностью?

    longclaps
    @longclaps
    Можно.
    Только она (computer science) еще не дописана.
    Так что - нельзя.
    А порядок самый обычный:
    • computer science 1й семестр
    • computer science 2й семестр
    • computer science 3й семестр
    и так далее.
    Ответ написан
    3 комментария
  • Как устроиться работать в IT компанию студент 18-ти лет?

    Moskus
    @Moskus
    Если вы хотите быть программистом, вы должны понимать разницу между общим и частным. Так вот, ваш вопрос - общий. А все проблемы и решения - частные. Бессмысленно спрашивать, "бывает ли так", потому что, например, в вашем частном случае, какие-то обстоятельства, которые ни нам, ни вам неизвестны, могут исключать такую возможность. Без логики и абстрактного мышления программисту - никак нельзя. А вы так спрашиваете, будто вам 12, а не 18 - когда логическое мышление только развивается.
    Ответ написан
    Комментировать
  • Как совместить React JS + D3?

    0xD34F
    @0xD34F Куратор тега React
    Ответ написан
    Комментировать
  • Как поменять элемент строки?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Никак. Строки в js иммутабельны. Создавайте новую:

    str = str[0].toUpperCase() + str.slice(1);
    // или
    str = str.replace(/^./, m => m.toUpperCase());
    // или
    str = Array.from(str, (n, i) => i ? n : n.toUpperCase()).join('');
    Ответ написан
    3 комментария
  • Как называется профессия в работу которой входит восстановление данных?

    Zoominger
    @Zoominger
    System Integrator
    Отдельной профессии нет.
    Специалист по восстановлению данных, разве что.
    Ответ написан
    Комментировать
  • Массивы объектов в state - как обновлять?

    @lnked
    onItemHintClick = (index, e) =>
      this.setState(({ items }) => ({
        items: [
          ...items,
          [index]: {
            ...items[index],
            htogle: !items[index].htogle,
          },
        ],
      }));
    Ответ написан
    Комментировать
  • Нужно ли PHP разработчику знать модель OSI?

    sergey-gornostaev
    @sergey-gornostaev
    Седой и строгий
    Во-первых, web-приложения - это разновидность сетевых приложений. Поэтому обязательно нужно понимать, как работают сети. Во-вторых, чем больше знает разработчик, тем он лучше, тем больше на него спрос, тем лучше условия, тем выше зарплата. То есть ваш вопрос звучит примерно так "Зачем мне получать больше денег и не боятся сокращений?"
    Ответ написан
    6 комментариев
  • Много маленьких запросов к REST API или один большой?

    notiv-nt
    @notiv-nt
    Как ваше ничего? Да, моё тоже
    graphql это решает как бы,
    Rest не единственная возможность общения клиент-сервер
    Ответ написан
    2 комментария
  • Делают ли так в React?

    @lnked
    class App extends React.Component {
    
      onTextClick = index => (e) => {
        ...
      }
    
      onHintClick = index => (e) => {
        ...
      }
    
      onExtaClick = index => (e) => {
        ...
      }
    
      render() {
        const items = [{}, {}];
    
        return (
          <ItemsList
            items={items}
            onTextClick={this.onTextClick}
            onHintClick={this.onHintClick}
            onExtaClick={this.onExtaClick}
          />
        )
      }
    }

    Item:
    export default class Item extends React.Component {
      render() {
        const { item, index, onTextClick, onHintClick, onExtaClick } = this.props;
    
        return (
          <div className="item">
            <div className="item-over">...</div>
            <div className="item-main">
              <div className="item-text" onClick={onTextClick(index)} />
              <div className="item-hint"  onClick={onHintClick(index)} />
              <div className="item-extra" onClick={onExtraClick(index)} />
            </div>
          </div>
        );
      }
    }
    Ответ написан
    7 комментариев
  • Странные данные с погодного api, как получить нужные значения?

    hzzzzl
    @hzzzzl
    прицепи к линку &units=metric

    api.openweathermap.org/data/2.5/weather?q=London,u...

    "sunrise":1563422638,"sunset":1563480543
    для new Date умножить на 1000,
    закат
    new Date(1563480543000)
    Thu Jul 18 2019 23:09:03 GMT+0300 (Eastern European Summer Time)

    почему так:
    https://stackoverflow.com/questions/847185/convert...
    Ответ написан
    3 комментария
  • Как работает try/catch?

    @architawr
    "Ok, Google" и все твои проблемы решены
    2 комментария
  • В чем преимущество localStorage перед cookie?

    Думаю, сложно говорить, хуже, лучше, так же...
    Все зависит от конкретной задачи\проекта\ да и вообще потребностей.

    5d306aa4354a6462085788.png
    Ответ написан
    Комментировать
  • Какую библиотеку использовать для загрузки и отображения фотографий?

    @vanillathunder
    Проще и быстрее руками сделать
    Ответ написан
    Комментировать
  • Стоит ли использовать изоморфное приложение в высоконагруженном e-commerce проекте?

    Robur
    @Robur
    Знаю больше чем это необходимо
    В долгосрочной перспективе - то которое будет легче поддерживать.
    Если ваш велосипед залить на прод, то остальным разработчикам надо будет во все это вникнуть, плюс поддержка и развитие, плюс все возможные будущие проблемы - все это надо будет пилить руками и с нуля. Так же архитектура должна быть хорошо подготовлена, и это вы должны явно показать, а учитывая что изначально все будут против - то и убедительно доказать.

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

    Ваш подход лучше если:
    1) ваша нагрузка на самом деле превышает то что можно выжать из ангуляра, сделав все грамотно (бандлы, ssr, кеширование, оптимизация зависимостей и так далее)
    2) ваша фронтенд команда достаточно покачана чтобы пилить сложный проект на ванильном JS и выжимать из него больше чем можно выжать из фреймворка (это очень непросто)

    Что можно сделать:
    - определить реальные проблемы
    - определить критерии их решения (скорость, размер, page speed и так далее)
    - определить время за которое команда готова оптимизировать ангулярное приложение до нужных параметров

    Если не сделают - поднять вопрос еще раз, показав свой вариант.

    В любом случае - продавить велосипед будет сложно, есть достаточно серьезные объективные причины почему этого не стоит делать, польза должна заметно превышать минусы и это надо доказать всем.

    Плюс велика вероятность что ваши девелоперы хотят "модно-молодежно" на "современных технологиях" это уже человеческий фактор и он будет самым проблемным.
    Ответ написан
    4 комментария