Эта серия статей о том, как с нуля научить Лео стать профессиональным разработчиком. Лео может быть любым из вас, желающим учиться и расти. Подать заявку здесь, это всегда будет бесплатно ♥ https://mentorleo.co

Смотрите историю проекта на медиуме

Соединение всех точек

Вы изучили компоненты React, реквизиты, состояния. Вы научились вызывать API. Как насчет того, чтобы соединить эти 2 вместе?

Мы можем видеть ярлыки (или навыки, или любое другое имя, которое вы использовали для этих компонентов) в виде флажков: если они активированы, мы будем искать этот навык в API заданий, в противном случае мы его не ищем.

Просьба о потрясающем

Забудьте о XmlHttpRequest. Это не совсем чистый способ работы с Ajax. На первой неделе я просто хотел, чтобы вы увидели, как много всего можно сделать с помощью собственного javascript, и что современные библиотеки построены на этом собственном javascript (а также поверх других библиотек).

Установите суперагент для работы с Ajax без проблем:



GitHub — visionmedia/superagent: Ajax с меньшими затратами — (и HTTP-клиент node.js для соответствия)
superagent — Ajax с меньшими потерями — (и HTTP-клиент node.js чтобы соответствовать)github.com



npm i --save superagent

(«npm i» — это псевдоним для «npm install»)

Вам также необходимо установить пакет ниже, чтобы использовать jsonp, чтобы обойти проблемы CORS, которые возникают при получении API Github:



GitHub — lamp/superagent-jsonp: оберните jsonp в красивую оболочку суперагента.
superagent-jsonp — оберните jsonp в красивую оболочку суперагента.github.com



Прочитайте документацию о том, как его использовать. Отредактируйте свой старый код, который извлекает задания с помощью суперагента;)

Сохраняйте состояние приложения

Давайте создадим что-то простое, что работает. В другой раз мы поговорим о паттернах коммуникации в React (flux, redux и т. д.).

Здесь мы хотим соединить ярлыки с JobList. Прямо сейчас вы, возможно, построили свое приложение следующим образом:

| — Корень
| — — — Аватар
| — — — Ярлыки (или Навыки или что-то еще)
| — — — Список вакансий

Для повторного использования компонент Label не должен знать о JobList. Помните, что мы сохраняли состояние меток внутри них? Что ж, теперь мы депортируем это состояние в общий родитель Labels и JobList: Root.

Теперь вам нужно удалить состояние внутри компонента Label. Активация/деактивация теперь обрабатывается реквизитом «activated», а не локальным состоянием, и Label должен вызывать обратный вызов «onToggle» вместо обновления своего состояния. Ваша очередь, обновите компонент Label (или Skills)!

Компонент «Список вакансий»

Хорошо, вы, должно быть, заметили, что я использовал компонент JobList в корневом компоненте. Пора реализовать ;)

Этот компонент принимает только один реквизит: массив строк, представляющих технологии, по которым мы хотим фильтровать предложения о работе.

Шаг 1.

Создайте свой компонент и создайте функцию с именем «fetchJobs». Эта функция не принимает аргументов, и ее цель содержится в имени функции :p.

Создайте переменную в fetchJobs, целью которой является преобразование массива навыков в строку, разделенную знаком +, где навыки указаны в нижнем регистре. Если вы не понимаете почему, прочтите API еще раз.

['HTML', 'CSS', 'Javascript'] -> 'html+css+javascript'

Если вам трудно представить себе, как это сделать, разбейте сложную проблему на более простые подзадачи:

1. ['HTML', 'CSS', 'Javascript'] -> ['html', 'css', 'javascript']
2. ['html', 'css', 'javascript'] -> 'html+css+javascript'
3. ['HTML', 'CSS', 'Javascript'] -> 'html+css+javascript'

Шаг 2.

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

getInitialState() {
  return {
    jobs: []
  };
},

Используйте superagent и superagent-jsonp внутри функции «fetchJobs», чтобы вызвать API со строкой, которую вы создали на шаге 1. В обратном вызове, который вы даете суперагенту, когда запрос возвращается, обновите состояние компонента, чтобы включить список заданий. предложения, содержащиеся в результате запроса (используя this.setState({jobs: …}).

Шаг 3.

Хм, в нашем компоненте мы еще никогда не называли эту функцию «fetchJobs». Время сделать это. Добавьте это в свой компонент:

componentWillMount() {
  this.fetchJobs();
},
componentWillReceiveProps() {
  this.fetchJobs();
}

ВТФ это такие? Reflex: см. документацию ниже (RFTM: Read The Fucking Manual):

https://facebook.github.io/react/docs/react-component.html

Я не буду тебе это объяснять, ты должен понять это сам. После этого вы станете профессионалом в жизненных циклах React ;)

Шаг 4.

Ваш список вакансий будет доступен на this.state.jobs.

Рендерить это дерьмо.

Сделайте так, чтобы это выглядело великолепно.

Конец недели 2

Поздравляю ! Вы научились создавать базовые приложения React, используя современные инструменты и методы;)

На третьей неделе мы перенесем получение задания на серверную часть Node.js. Тогда у вас будет довольно хорошее общее представление о полном стеке (интерфейс и бэкэнд).

→ нажмите здесь, чтобы перейти к неделе 3, дню 1👍

Призыв к действию

Присоединяйтесь к нам ! Мы создаем сообщество мотивированных Лео, помогающих друг другу. Подать заявку здесь, это всегда будет бесплатно ♥ https://mentorleo.co