Ответы пользователя по тегу React
  • Как дать свойство изображению в ReactDOM?

    Vlad_IT
    @Vlad_IT
    Front-end разработчик
    Также, только не разделяйте название свойств дефисом или подчеркиванием.
    <script type="text/babel">
                var TeamCard = React.createClass({
                    render: function () {
                        return  (
                            <article className="open hidden">
                                <img className="article-img" src={this.props.imagePath} alt={this.props.name} />
                                    <h1 className="article-title">
                                        <a href="">{this.props.name}</a>
                                    </h1>
                            </article>
                        )
                    }
                })
    
                ReactDOM.render(
                    <div>
                        <TeamCard imagePath="svg/charlotte-hornets.svg" name="Charlotte Hornets"/>
                        <TeamCard imagePath="svg/charlotte-hornets.svg" name="Charlotte Hornets"/>
                    </div>,
                    document.getElementById("cards")
                )
            </script>

    PS: вместо class пишите className, такая особенность jsx
    Ответ написан
    Комментировать
  • Как работать параллельно верстальщику с React разработчиком?

    Vlad_IT
    @Vlad_IT Куратор тега CSS
    Front-end разработчик
    По этой причине, на бэке люди используют шаблоны, чтобы верстальщик не лез в логику, чтобы ему не нужно было понимать серверный язык, а достаточно простой синтаксис шаблонов (twig, jinja2). И это всегда работало хорошо. На фронте же мы придумали себе костыль, JSX, и теперь фигачим логику прям в шаблонах. В vue красота, шаблоны на месте.
    Поэтому могу посоветовать, либо держать отдельную ветку со статичной версткой, и менять отображение только там. Либо учить React, т.к. styled-component не подпустит верстальщика в проект.
    Ответ написан
    2 комментария
  • Почему не рендерится, как исправить?

    Vlad_IT
    @Vlad_IT
    Front-end разработчик
    Вы вставили html теги script в поле, где должен быть JS код.
    Нужно вставить их в поле HTML, а код класса оставить в поле JS (только без тега script), для поддержки JSX, у поля JS нажмите на текст "javascript +...", там в поле Language выберите Babel + JSX.
    Получится вот так https://jsfiddle.net/hLtsu2cm/
    UPD: вообще, если нажать на облако в левом верхнем углу, то вам предложат создать фидл на основе шаблона, там можно выбрать React + JSX и не париться с подключением реакта.
    Ответ написан
  • Как изменить тип в TypeScript?

    Vlad_IT
    @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    Можно использовать оператор |, объединение типов (Union Types). Пример
    class UserEntity {
        public name: number | string;
    }

    тут name может быть как числом, так и строкой.
    Подробнее тут https://www.typescriptlang.org/docs/handbook/advan...
    Ответ написан
  • Как с помощью map отрендерить array объектов только по одному параметру?

    Vlad_IT
    @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    Используйте filter. Или же можно разместить условную конструкцию (с оператором &&)
    const itemList = products.map(item => item.category === "Category Two" && <ProductCard
            key = {item.id}
            title = {item.title}
            category = {item.category}
            />)
    Ответ написан
    Комментировать
  • Как выполнить функцию 1 раз?

    Vlad_IT
    @Vlad_IT
    Front-end разработчик
    Никогда не пишите в render код/функции, которые меняют состояние setState, т.к. почти за каждым setState следует render, а render опять вызовет setState, а тот опять render - и так вечно, что у вас и происходит. Вы можете вызвать checkUserBd внутри componentDidMount.
    Ответ написан
    1 комментарий
  • Как правильно перезаписать значение state?

    Vlad_IT
    @Vlad_IT
    Front-end разработчик
    Вам нужно получить ваш объект, изменить поле и отослать обратно в setState

    1) через клонирование объекта
    let checkboxes= Object.assign({}, this.state.checkboxes); // Создаем копию, можно просто ссылку взять, но копию безопаснее
    checkboxes[e.target.value] = false; // изменяем поле
    this.setState({checkboxes}); // Сохраняем

    2) через оператор spread
    this.setState({
        checkboxes: {
              ...this.state.checkboxes,
              [e.target.value]: false // измененное поле объекта checkboxes
        }
    })
    Ответ написан
    1 комментарий
  • Как правильно сверстать такие блоки?

    Vlad_IT
    @Vlad_IT Куратор тега CSS
    Front-end разработчик
    Почему не использовать таблицы? colspan для td позволяет объединять ячейки, а rowspan - строки. т.е. вместо двух колонок, для отображения одной большой (на две колонки), пишите
    <td colspan="2">Я широкая колонка!</td>
    Ответ написан
    2 комментария
  • Не работают компоненты при запуске, как исправить?

    Vlad_IT
    @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    File url protocol не имеет под-путь в файле. Вы же не можете в винде написать D:\Dir\file.txt\ahaha\, поэтому там роутинг не может работать, разве что основанный на location.hash
    Ответ написан
    2 комментария
  • Почему не работает ref?

    Vlad_IT
    @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    Вы неправильно указываете. Если вы заранее определили ref через createRef, то вам не нужно писать стрелочную функцию в атрибуте ref, достаточно просто указать свойство
    ref={ this.input }
    UPD: а, у вас не в этом проблема. На момент выполнения console.log в handleShowForm, ref еще не создался, т.к. форма не нарисовалась. this.setState асинхронная функция, она не сразу вызывает render функцию, чтобы показать ваше поле. У setState есть callback, который выполняется после изменения состояния. Напишите так
    this.setState({
          showForm: true
        }, () => {
        console.log(this.input);
        });
    Ответ написан
    2 комментария
  • Заполнить поле input из json-а?

    Vlad_IT
    @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    Не надо копировать пропсы компонента в локальный state. Уберите setValue, просто работайте с данными props.data реактивно.
    К тому же, у вас onHandleFetch - это асинхронный метод, а вы пытаетесь получить результат его работы сразу
    getValueForInput() { 
        this.onHandleFetch(this.props.params.idValue); // передача id
        console.log(this.state.data); // здесь не выводятся данные
        return this.state.data.value; // тут тоже не получается значение, т.к. onHandleFetch его еще не успел подготовить
      }
    Ответ написан
  • Над чем нужно работать, что улучшать?

    Vlad_IT
    @Vlad_IT
    Front-end разработчик
    1. Закомментированный код на гитхабе - не хорошо. https://github.com/marinarodkin/aviasales-app/blob...
    2. Минимум логики в render функции компонента. Все сложные конструкции переносите в методы, а лучше в отдельные компоненты (тогда сможете легче контролировать перерисовку компонентов через shouldComponentUpdate , чтобы они не перерисовывались, если данные не поменялись). Вы можете прямо как методы писать стрелочные функции:
      class Flight extends Component {
          getWeekDay = (date) => {
              //..
          }
          // ....
      }

    3. Вы в половине случаев используете точку с запятой, а в половине нет. Используйте чаще.
    4. Атрибут for нельзя использовать в jsx (как и class, как вы знаете). Вместо for пишите htmlFor
    5. Смотрите консоль инструментов разработчика, там есть ошибки.
    6. Освойте shouldComponentUpdate, он позволяет контролировать перерисовку компонента при изменении состояния или пропсов. У вас при изменении кол-во пересадок, перерисовывается весь список билетов, даже те, которые уже были в этом списке. Многие скажут, что еще рано такое учить, но я не согласен. Если не учиться контролировать перерисовку еще в начале обучения, то можно написать очень много тормознутого софта.
    7. У вас данные ticket.json подгружаются хардкодно из github, это не хорошо, т.к. этот файлик с данными есть в папке public, и если потенциальный работодатель захочет поменять там что-то, он не увидит изменений (т.к. грузится с гитхаба).
    8. У вас если в данных в параметре departure_date стоит 11.10.2018 (т.к. сегодня), то отобразится это как "11 окт 2018, вс", т.е. день недели неправильный. А он неправильный потому, что это не октябрь, а ноябрь. Ошибка в методе getDateFormat
      const newDate  = new Date (year, month, day, );
      const monthName = ["дек", "янв", "фев", "мар", "апр", "мая", "июня", "июля", "авг", "сент", "окт", "ноя", "дек"];
      const newMonth = monthName[newDate.getMonth()];

      конструктор Date вторым аргументом ожидает номер месяца, нумерация которого начинается с нуля. т.е. 0 - январь, 1 - февраль, 11 - декабрь. Судя по monthName вы подозвевали, что есть что-то неладное, но ошибись с реализацией. monthName должен иметь обычный вид, начинаться с января и заканчиваться декабрем, т.к. нулевой элемент массива как раз подходит по логике с нулевым месяцем. В getDateFormat, а также в getWeekDay, вычтите из month - 1
      const newDate = new Date(year, month - 1, day)
    9. У вас в тех же getDateFormat и getWeekDay в конструкторе Date вы в конце аргументов пишите запятую, так не нужно делать. Это не вредно и не полезно, просто дурной тон. Там в любом случае будет undefined, хоть с запятой хоть без нее.
    10. Картинки тоже грузятся с marinarodkin.github.io, измените.

    11. const getStopsNumber = (stop) =>{
            switch (stop) {
              case 3:
                return "3 пересадки"
              case 2:
                return "2 пересадки"
              case 1:
                return "1 пересадка"
              case 0:
                return "без пересадок"
              default:
                return // это не нужно делать, писать return. Если вы удалите эту (и строку выше), то результат будет такой же - undefined
            }
          }

    12. Если бы в SideBar пропс stopsData был не объектом, а строкой или числом, то компонент SideBar можно было бы безболезненно превратить в PureComponent. Ну это так, к слову об оптимизации.
    13. Я бы в stopsClick передавал не объект события e, из которого вы потом берете id элемента через e.target.id (что не есть гуд), а сделал бы стрелочную функцию (или bind), в которую бы передавал id. Вот так
      <input onClick={() => this.props.stopsClick("allStops")} />
      <input onClick={() => this.props.stopsClick("noStops")} />

      Если это читают опытные ReactJS разработчики, рассудите пожалуйста. Согласен, что на каждый компонент будет создана своя копия функции, но по крайней мере, не нужно взаимодействовать с DOM напрямую.
    14. Это не красиво
      if( this.state.stops.allStops === false && this.state.stops.noStops === true && this.state.stops.oneStop === true && this.state.stops.twoStop === true && this.state.stops.threeStop === true  ){
               newStops = {...this.state.stops, allStops: true}
          }

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


    Может я многое высосал из пальца, но это будет вам полезно. Учитесь, развивайтесь. Удачи вам в этом :-)
    Ответ написан
    1 комментарий
  • Как работать с media queries в React?

    Vlad_IT
    @Vlad_IT Куратор тега CSS
    Front-end разработчик
    Можно вот такое добро использовать https://github.com/contra/react-responsive а можно сделать событие на ресайз окна, и там подставлять значение в state и выводить блок в зависимости от значения этого state.
    Можно через css, точно также, ставите блоку className, и этот класс в css прячьте. Но учтите, спрятанный блок не спрячется по настоящему, он будет висеть и работать, просто не будет отображаться.
    Ответ написан
    Комментировать
  • Можно ли после основ JS перейти к изучению React?

    Vlad_IT
    @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    Мне кажется, вопрос должен звучать так
    Хватит ли моих знаний для создания SPA?

    ReactJS сам по себе простой в освоении фреймворк, но без опыта разработки на чистом JS будет сложно понять, зачем вообще нужен ReactJS. И тут вопрос стоит в том, как быстро вы сможете разработать, и как качественно, имея очень маленький багаж знаний. Если у вас на работе есть старшие разработчики, которые в нужный момент могут подсказать, как делать не надо, то можете попробовать. Если вы один, то через год вы придете к мысли, что легче переписать эту SPA заново, чем допиливать этот страшный код.
    Ответ написан
  • React drag&drop между секциями?

    Vlad_IT
    @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    Я думаю, вот эта штука вам подойдет https://github.com/atlassian/react-beautiful-dnd
    Ответ написан
  • Range slider под styled components?

    Vlad_IT
    @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    Эээ, а вы пробовали гуглить вот так?
    range slider react
    Ответ написан
  • Как в реакте заменять один компонент другим по клику?

    Vlad_IT
    @Vlad_IT
    Front-end разработчик
    Делаете из них отдельные компоненты и рендерите по условию.
    Грубо, вот так
    Ответ написан
  • Как вывести на страницу вложенные комментарии на React?

    Vlad_IT
    @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    Вы в компоненте при вызове самого себя не передаете комментарий. Еще бы хорошо сделать так, чтобы вызов Comment происходил только при наличии комментариев. Да и в комменте вы один раз вызываете Comment, а не список комментов.
    Я бы сделал так. Создал компонент CommentList, в нем сделал вызов текущих комментов Comment в цикле. И в компоненте Comment сделал проверку на наличие комментов, если они есть, вызывал бы CommentList (передавая ему список комментов), тот в свое время опять циклом пройдет по комментам и вызовет компонент Comment, и.т.д.
    Ответ написан
    5 комментариев
  • JQuery есть смысл использовать вместо Реактов?

    Vlad_IT
    @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    Как только получим более удобный продукт чем Реакт, так и начнем его хейтить, и как в старые добрые времена, плеваться на HTML-IN-JS
    Ответ написан
    2 комментария