string15

parser - это некий код (функция), который анализирует текст и извлекает из него данные.
parser в JS - это парсер, написанный на JavaScript.

class Parent extends React.Component {
  state = {
    someStateKey: false,
  };
 
  someHandler = () => {
    this.setState({ someStateKey: true });
  };
  
  render() {
    return (
      <Wrapper>
        <ChildA someHandler={this.someHandler} />
        <ChildB stateKey={this.state.someStateKey} />
      </Wrapper>
    );
 }  
}

Lifting state up

Советую все таки осилить официальный Tutorial и документацию.

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 Не говорю, что у вас сразу получится, это приходит с опытом. Но просто попытайтесь подумать, как это можно сократить.
    

Может я многое высосал из пальца, но это будет вам полезно. Учитесь, развивайтесь. Удачи вам в этом :-)

Javascript - это одна из реализаций ECMA-262. Если вам нужно именно "официально-стандартно" - вам именно сюда.
Обратите внимание, это девятая редакция, которая вышла в июле. В следующем году скорее всего выйдет новая редакция. Ну и в этом СТАНДАРТЕ вы не найдете всяких новых экспериментальных штук. Экспериментальные штуки обычно описаны в черновиках.

BOM и DOM - это на самом деле не часть javascript, это API браузеров.

В 99% случаев вам будет удобнее всего ориентироваться на MDN, там все неплохо структурировано, и поддерживается в довольно актуальном состоянии.

Дичь конечно.

Не надо определять переменные с именами как у каких-то глобальных объектов, так что window - долой. Ну и в целом - как-то многословно, это могла бы быть и одна строка:

const closeInfoWindows = (...windows) => windows.forEach(w => w && w.close());

В офисе

Действительно, уважаемый. Это слишком. Вряд ли я затрону все тонкости, но попробую наметить примерный путь:

0) Пользователь вбивает в адресную строку браузера адрес сайта (нажимая клавиши на клавиатуре, которые замыкают определённую дорожку в матрице, по которой происходит определение нажатой клавиши, что через шину USB в какой-то момент передастся OS, где это поймает HID-драйвер и вызовет определённое прерывание, что OS передаст как событие/или_ещё_как в программу, которая вызовет соотвествующую функцию из API менеджера окон, которая изменит содержимое строки и в результате когда-то будет перерисован UI-элемент, а если нажат был Enter, то начнётся следующее).
1) Браузер вытащит из input'а строку с запросом и посмотрит, похоже ли это на адрес. Если да, то добавит недостающие уточнения (например, http или file протокол, порт и подобные довольно стандартные вещи). Если нет - то скорее всего создаст запрос в поисковую систему, установленную по умолчанию (я более не буду опускаться до таких бессмысленных деталей, как вызовы API-функций, иначе я буду набирать это сообщение ОЧЕНЬ долго). В любом случае на выходе мы по сути получим URL, который надо загрузить. Протокол file:// мы рассматривать не будем, ftp далеко не везде есть, https:// на не хватит вечности, так что остановимся на http, который по сути есть tcp/ip по умолчанию на 80 порту с определённым форматом общения.
2) Окей, url есть. Теперь нам нужен адрес, к которому обращаться. Так как http это tcp/ip - нам нужен ip адрес. Здесь нам помогают dns-сервера. Обычно, нормальный провайдер устанавливает у себя кэш-сервера dns, которые не обращаются по стопицот раз за vk.com к ответственному серверу com-зоны. Давайте не будем отвлекаться на то, как происходит там общение, если что - вот (вики тем хороша, что часто содержит внизу релевантные ссылки). Скажу лишь то, что на выходе мы получаем ip адрес(а).
3) Имея адрес мы можем запросить страницу. Собственно, всё что после первого слэша - это как-бы параметры для http-сервера: какую именно страницу запрашивать, он всё же не телепат. Конечно, можно было бы немного схитрить и отправить читать про tcp/ip, но ведь существует и shared-hosting. Ограничемся лишь его упоминанием. Собственно, по полученному адресу отправляется GET запрос, который и обрабатывает сервер, находящийся по полученному IP-адресу.
4) Сервер же, получив адрес, начинает распарсивать строку, медленно вытягивая нужные данные из баз-данных и настроек, выполняются сотни скриптов, иногда делается ещё не одна сотня различных запросов на другие сервера (здесь и разного вида метрики и разного вида HADOOP и т.д.). Пройдя сквозь скрипты и темплейторы в самом конце мы получаем html-страницу, готовую к употреблению. Её-то сервер и отправит в ответе (после заголовков, конечно).
5) Вот и началось самое интересное. Получив html страницу браузер начинает жутко надругаться над CPU, HDD и GPU, попутно сжирая тонны RAM и мусоря в swap. Виной всему нереальные для полного соблюдения стандарты от небезызвестной w3c.org. Для облегчения многие делают костыли, вроде webkit, а некоторые и вовсе забивают на него и пилят свой стандарт с преферансом и картёжницами (впрочем, в последнее время становиться лучше). Здесь снова начинаются сотни вызовов API ОС, windows manager'а и прочих библиотек, вроде boost, qt или libpng. В ходе работы в RAM строится макет, по которому потом строится нечто вроде PDF (тоже сильно векторный), что, потом, обрабатываясь быстрыми шейдерами на GPU, выдаётся на экран. Опять же, многое пропущено, но вряд ли кому-либо, кроме парня в свитере с оленями, действительно интересно, как работает GDI, DirectX или OpenGL.
6) Ах да, мы же забыли про тысячи js-скриптов, миллионы картинок и анимации с котиками, а также о таких дополнительных плюшках, как flash-player или java-weblets. В кратце, что js, то и flash и java - это виртуалка, со специальной архитектурой. Они, виртуалки, конечно разные (хотя flash и js довольно похожи, ещё бы - ECMAScript один и тот же). JS - самый интегрированный внутрь браузера, он же и самый медленный чисто визуально (ибо последние два имеют доступ к быстрому GPU), хотя самый быстрый в попугаях. Второй постепенно вымирает и представляет из себя, так же как и третий специальную shared-библиотеку, о которой браузер как-нибудь узнал и которой скармливает специальное содержимое помечанное специальным тегом html. Третий уже почти умер и встречается лишь изредка или в каком-нибудь энтерпрайзед со страшным legacy-базой. Ну здесь из сылок разве только гугл. Ибо сколько всего - даже не сообразишь. Да и вообще, эта тема ещё скучнее GDI, DirectX и OpenGL и к свитеру с оленями требуются ещё очки с толстенными стёклами, дающие стопицот к терпению и задроству над матаном. Если в кратце, то в случае JS, всё что было загружено в память и не думает выгружаться и формирует этакое дерево - DOM, над которым с помощью специального API и происходят модификации. При этом, перед тем как исполниться, весь JS-код компилируется, в нативный для VM байт-код. То же самое в общем-то и со вторым и третьим, разве только они не имеют доступа к DOM и организовать его - дело тех ещё костылей. Ах да, забыл ещё про Silverlight (или как оно там пишется), который сдох, не успев родиться. Так же как и Java, жив в серьёзном энтерпрайзе, не поскупившийся не "дешёвую" поддержку MS.
7) Ну... А дальше пользователь нажимает на нужную гиперссылку и всё по новой.

За кадром остались такие костыли, как ajax, websockets и прочая асинхронная ересь. С ней всё в миллионы раз сложнее. И к очкам со свитером потребуется ещё и... а чёрт их знает, что они там ещё носят. Ну да ладно, я искренне завидую тем парням (и девушкам), которые разбираются во всей этой машине. Целиком. Ибо это лишь верхушка айсберга. Разбавленная не лучшей памятью и ужасным гуглом.

P.S. Не бейте сильно за грамматические и синтаксические ошибки. Спеллчекер приказал долго жить, да и 5 утра как никак.

UPDATE
На хабр выложили неплохой перевод дающий некоторое представление, как браузер ругается над памятью и процессором. Хотя и весьма поверхностное,

Вам нужно хранить состояние фильтров в редьюсере (или редьюсерах), и затем в компонентах подписываться на эти "кусочки" с помощью mapStateToProps. Вот и все)

Суть Redux как раз в том, что у вас есть единое состояние всего вашего проекта, и где бы вы ни были (через роутер или без) - вы можете просто приконнкектиться к стору (connect) и вытащить нужные данные через mapStateToProps

arr1.filter(x => arr2.includes(x))
jsfiddle.net/0bra97c2

Не согласен с предыдущими ораторами. Фронтэндер должен обладать хотя бы минимальным "чувством прекрасного". Также не согласен с тезисом, что "это либо дано либо нет".

Возьмите книжек по UI и UX и просвещайтесь.

Компаний много. Проектов много. Руководителей много.

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

И если вам на тостере все скажут "да не нужно никому ВО", а руководитель проекта скажет "нет ВО - досвидания", вы его скриншотами с тостера не переубедите.

Идите к ним напрямую и спрашивайте при трудоустройстве.

Да, программист - не так романтично на деле, как кажется)
Потому что, в отличии от всяких мечтаний, в реале вопрос завязан на деньги, а деньги - на время.
Программист работает на заказчика, заказчику нужно быстро и дешево - отсюда готовые решения и костыли сейчас, с прицелом разобрать это потом (но потом тоже костыли)
Поначалу все это очень напрягает и срывает башню - нас учили не такому, нас учили стремиться к простому и оптимальному коду, а везде вокруг накручивают дичайшие костыли, и это жесть, но...
Со временем понимаешь, что лучше сейчас быстро сделать костыль, и забыть об этом, возможно навсегда, чем потратить времени в 3-4 раза больше, но сделать по канонам... Просто у программиста нет столько времени...
В конце концов в реальности работа программиста не так сложна, и во многом не так красива, как ожидается - по большей части это рутина и разгребание чужого страшного кода, отладка и ваяние своего страшного кода, сожаление о том, что не было возможности сделать хорошо, и радость, когда попадается что-то интересное, или то, что сделал хорошо, качественно
Как и на любой работе, есть свои светлые и темные стороны. И деньги не так легко достаются - программист за них щедро платит нервами. Как и врач, и любой другой специалист

Вы мутируете state:

this.state.data[this.state.id][e.target.name] = !checked;

До этого присваиваете ему значение props:

this.setState({
  data: this.props.data,
  id: this.props.id
});

Естественно props изменяется после мутации.

Банальный пример:

const a = { key: 'value' };
const b = a;
b.key = 'new value';
console.log(a.key); // new value

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

this.state.data[this.state.id][e.target.name] = !checked;

Изменение state только через this.setState.

Для решения этой задачи можно использовать data атрибут:

handleTodoClick = e => {
  const { id } = e.target.dataset;
  this.props.toggleTodo(id);
};
render() {
  return todos.map(item => (
    <div key={item.id} data-id={item.id} onClick={this.handleTodoClick} />
  ));
}