Бесплатный курс React, который разовьет ваши навыки React JS, создав приложение для чата

1656591260 besplatnyj kurs react kotoryj razovet vashi navyki react js sozdav
Нажмите на изображение, чтобы попасть на курс

Чат поедает мир, а React ест фронтенд разработку. Итак, что может быть лучше, чем изучение React из-за создания программы для чата? На моем последнем курсе в Scrimba вы сделаете именно это.

Он состоит из 17 интерактивных уроков (плюс введение и результат) и пяти задач, в которых вам придется самостоятельно редактировать код.

И самая лучшая часть: все это делается в браузере. Вам не нужно писать код на стороне сервера. API Chatkit заботится о тяжелой работе на сервере, чтобы мы могли сосредоточиться на создании клиента чата.

В конце курса вы получите собственную персонализированную программу для чата, которая включает в себя несколько комнат, возможность создавать новые комнаты, автоматическую прокрутку и т.д. Кроме того, это будет очень легко настроить благодаря CSS Grid и CSS Variables.

1*Ik3tRrwdvnBFu3_B0rpimw

Я предполагаю, что вы знаете JavaScript, и что вы видели немного React раньше (например, прочтите мою пятиминутную вступительную статью и, возможно, просмотрели несколько учебных пособий). Но, кроме этого, для курса нет никаких предпосылок.

Теперь давайте посмотрим, как это изложено!

Урок №1: Введение в курс

1*zcRbKlNUmWNxStHWrQJEOw

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

Урок №2: Архитектура компонентов

1*JD33BOZnuutza8G_trur1A

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

Урок №3: Архитектура кодовой базы

1*xr6dWMCFWVA942U1w2r90Q

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

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

Урок №4: Компонент MessageList

Теперь мы наконец-то готовы начать кодирование, поэтому в этом уроке мы отразим фиктивные данные в нашем MessageList компонент. Он познакомит вас с JSX, и вы научитесь динамически создавать элементы, используя, например, map() способ массива.

{DUMMY_DATA.map((message, index) => {  
   return (  
     <div key={index} className="message">  
        <div className="message-username">{message.senderId}</div>  
        <div className="message-text">{message.text}</div>  
     </div>  
   )  
})}

На этом уроке вы получите свой первый вызов!

Урок №5: Введение в Chatkit

[!Click the image to get to the Chatkit API.](https://pusher.com/chatkit?utm_source=scrimba&utm_medium=medium&utm_campaign=announcment-post)
Нажмите на изображение, чтобы перейти к Chatkit API.

Теперь, когда мы можем отображать данные на странице, мы приступим к интеграции с API Chatkit, который будет заботиться о серверной части программы. В этом уроке я дам вам краткий обзор API.

Урок №6: Подключение к Chatkit

1*dRgHCdd44zgpOOFoqPwRPg

Дальше просто кодирование интеграции Chatkit, которая очень проста: приведенный выше код – это все, что вам нужно, чтобы начать получать сообщения из комнаты чата. Вы будете разоблачены через React componentDidMount() метод жизненного цикла, где вы должны подключить свой компонент к сторонним API.

Урок No7: Состояние и реквизит

State и props – это два способа обработки данных в React, и вам нужно понимать разницу между ними. В этой лекции нам нужно будет использовать оба типа, поскольку мы оба будем сохранять сообщения чата в состоянии нашего App компонента, а также передать их как реквизит к MessageList компонент.

constructor() {  
  super()  
  this.state = {  
    messages: []  
  }  
}

Урок №8: Компонент сообщения

В этой лекции мы построим компонент Message. У него одна задача: отображать имя пользователя и текст, получаемый от родителей. Я также дам вам задачу изменить его из компонента на основе класса на функциональный компонент.

function Message(props) {  
  return (  
    <div className="message">  
      <div className="message-username">{props.username}</div>  
      <div className="message-text">{props.text}</div>  
    </div>  
  )  
}

Урок №9: Компонент SendMessageForm

1*bYkfM_KQ54Qxyh41g-XnvQ

Вы не можете иметь чат-приложение без формы для отправки сообщений. Поэтому в этой лекции мы создадим именно это. Он научит вас о контролируемых компонентах, что является важной концепцией React. Это означает, что компонент сам решает, что воспроизводится в поле ввода, вместо того чтобы сам узел DOM удерживал это внутреннее состояние.

Урок №10: Трансляция сообщений

sendMessage(text) {  
  this.currentUser.sendMessage({  
    text,  
    roodId: 9434230  
  })  
}

Теперь, когда мы имеем SendMessageForm на месте, нам нужно отправить сообщение в Chatkit, чтобы он мог их транслировать. Это заставит вас изучить другую основную концепцию React: обратный поток данных.

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

Урок №11: Компонент RoomList

1*rqi85uI26PUeQ_cAJVkbIg

Поскольку у нас уже есть основные функции чата (отправка и отображение сообщений), пора перейти к RoomList компонент, отображающий все комнаты, доступные в вашем экземпляре Chatkit.

Он познакомит вас с новыми концепциями Chatkit, а также закрепит ваши знания о том, как передавать данные от родительских компонентов до дочерних. Мы также вернемся к оператору ES6, который очень удобно знать при создании приложений React.js.

Урок №12: Подписка на комнаты

Тогда вам нужно будет узнать, как подписаться на некоторые комнаты. Мы подключим прослушиватель событий к каждой комнате, отображенной в RoomList компонент. Это запустит метод в App компонент, сообщающий Chatkit, что пользователь хочет подписаться на эту конкретную комнату.

subscribeToRoom(roomId) {  
  this.setState({ messages: [] })  
  this.currentUser.subscribeToRoom({  
    roomId: roomId,  
    hooks: {  
      onNewMessage: message => {  
        this.setState({  
          messages: [...this.state.messages, message]  
        })  
      }  
    }  
  })  
}

Урок №13: Порядок комнат и выделение текущей комнаты

Эта лекция познакомит вас с .sort() array в JavaScript, поскольку нам нужно убедиться, что наши комнаты отсортированы в правильном порядке, независимо от того, откуда поступают данные.

const orderedRooms = […this.props.rooms].sort((a, b) => a.id — b.id)

Мы также добавим active класса в комнату, в которой мы сейчас общаемся, чтобы сообщить об этом пользователю.

Урок №14: Добавление автопрокрутки

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

  • componentWillUpdate()
  • componentDidUpdate()

Нам также нужно будет воспользоватьсяReactDOM.findDOMNode() метод, так что вы также познакомитесь с ним.

Урок №15: Компонент NewRoomForm

Этот компонент позволяет создавать новые комнаты. Это будет обновление по контролируемым компонентам из девятого урока.

На этом мы закончили со всем кодом React для программы. Поэтому к концу курса мы сосредоточимся на дизайне с помощью CSS.

Урок №16: Создание собственного приложения для чата

1*0N6xXGInxOYIGin0rjkFKg

Прежде чем мы начнем изменять дизайн приложения, я хочу клонировать свой код, чтобы вы получили собственную копию репо. Это подготовит вас к следующим скринкастам, где вы сможете персонализировать его дизайн. Я буду вести вас через каждый шаг, пока вы не получите свою копию и бесплатные API-ключи от Chatkit.

Урок №17: Изменение макета с помощью CSS Grid

Мы используем CSS Grid для управления макетом приложения, что дает вам отличную гибкость, когда дело доходит до его изменения, благодаря grid-template-areas. Я научу вас, как вы можете перемещать элементы на странице, просто изменяя несколько строк CSS.

1*yAyieAB9wQk-s2lJbO4Ybw

Урок №18: Изменение темы с помощью сменных CSS

1*23UzFS7KCSj9d0Ten6WZsw
До и после смены переменных.

До и после смены переменных.

Поскольку мы используем переменные CSS для наших цветов, вы также можете легко изменить тему программы. Здесь я дам вам задачу найти хорошую палитру в Интернете, а затем ввести ее в свое приложение.

Если вы соедините изменения макета с предыдущего урока с новой палитрой в этом, у вас останется собственное приложение для чата! Вот один, который я сделал для себя, просто для развлечения:

1*r7YvAzkhlZ2E8Yjfdh-SBw

Урок №19: Завершение и заключительные задания

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

1*Rk3YHJTml0Au8SzkZgN-CA

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

Удачи в курсе и удачного кодирования 🙂

Добавить комментарий

Ваш адрес email не будет опубликован.