Автор оригинала: FreeCodeCamp Community Member.
Чат ест мир, и реагировать съесть предельное развитие. Так что же может быть лучше, чем изучение реагировать через приложение для строительства чата? В моем последнем курсе в Scrimba вы сделаете именно это.
Он состоит из 17 интерактивных уроков (плюс вступление и OUTRO) и пять задач, в которых вам придется редактировать код самостоятельно.
И лучшая часть: все это сделано в браузере. Вам не нужно писать какой-либо серверный код. Chatkit API Позаботьтесь о тяжелом подъеме на спине, чтобы мы могли сосредоточиться на создании клиента чата.
В конце курса вы останетесь от собственного персонализированного приложения чата, который включает в себя несколько номеров, возможность создавать новые номера, автоматическую прокрутку и многое другое. Кроме того, это будет очень легко настраивать благодаря CSS Grid и CSS-переменным.
Я предполагаю, что вы знаете JavaScript, и что вы видели немного реагирования раньше (например, прочитайте мой вступительная вступительная статья и, возможно, проверили пару учебников). Но кроме того, для курса нет никаких предпосылок.
Теперь давайте посмотрим, как он выложен!
Урок № 1: Введение курса
Я начну, давая вам быстрое вступление к курсу. Мы пойдем за то, что вы узнаете, и я буду представиться тоже. Я также даст вам Skeak Peak в том, как вы сможете настроить свое собственное приложение чата в конце курса.
Урок № 2: архитектура компонентов
Прежде чем начать создание приложения RACT, вы должны начать с обзора в архитектуре компонентов и, таким образом, нарушать UI на компоненты. Так что в этой лекции я покажу вам, как именно это сделать.
Урок № 3: архитектура кодовой базы
Далее посмотрим, как наша архитектура компонента переводится в код. Я также посмотрю на то, как настроен остальная часть REPO, так как я не буду вас не быть путать в различных файлах по всему репо, когда мы начнем кодировать.
Я не буду создавать репозиторий с нуля, так как есть много учебных пособий, которые помогут вам получить настройку вашей среды DEV, и это не так, как платформа Scrimba лучше всего адаптирована.
Урок № 4: компонент Messagelist
Теперь мы наконец готовы начать кодирование, так что в этом уроке мы вырещим файлы в наших Мессагелист компонент. Это представит вас с JSX, и вы узнаете, как динамически создавать элементы, используя, например, карта () Метод массива.
{DUMMY_DATA.map((message, index) => {
return (
{message.senderId}
{message.text}
)
})}
В этом уроке вы также получите свой первый вызов!
Урок № 5: Введение в Chatkit
[! Нажмите на изображение, чтобы добраться до API Chatkit.] ( https://pusher.com/chatkit?utm_source=scrimba&utm_medium=medium&utm_campaign=announcment-post ) Нажмите на изображение, чтобы добраться до API Chatkit.
Теперь, когда мы можем решить данные на странице, мы начнем интегрироваться с Chatkit API , что позаботится о задней части приложения. В этом уроке я даю вам быстрый обзор на API.
Урок № 6: Подключение к ChatKit
Next Up просто кодирует Чаткит Интеграция, которая является Super Simple: код выше, это все, что вам нужно, чтобы начать получать сообщения из чата. Вы будете подвержены реакции ComponentDidMount () Метод жизненного цикла, который находится в том случае, если вы должны подключить свой компонент с сторонним API.
Урок № 7: Состояние и реквизит
Состояние и реквизиты – это два способа справиться с данными в реакции, и вам нужно понять разницу между двумя. В этой лекции нам нужно будет использовать оба типа, поскольку мы оба храним сообщения чата в состоянии нашего Приложение компонент, а также передавать их как реквизит к Мессагелист компонент.
constructor() {
super()
this.state = {
messages: []
}
}
Урок № 8: компонент сообщения
В этой лекции мы построим компонент сообщения. Он имеет одну работу: сделать имя пользователя и текст, который он передается от своих родителей. Я также даю вам вызов, чтобы изменить его из компонента на основе класса в функциональный компонент.
function Message(props) {
return (
{props.username}
{props.text}
)
}
Урок № 9: Компонент SendMessageForm
Вы не можете иметь приложение для чата без формы для отправки сообщений. Так что в этой лекции мы создадим именно это. Это научит вас о контролируемых компонентах, что является критической концепцией в реакции. Это означает, что сам компонент решает, что оказывается на поле ввода, вместо самого узла DOM удерживает это внутреннее состояние.
Урок № 10: Вещательные сообщения
sendMessage(text) {
this.currentUser.sendMessage({
text,
roodId: 9434230
})
}
Теперь, когда у нас есть Sendmessageform На месте нам нужно отправить сообщения для Chatkit так, чтобы она мог рассылать их. Это заставит вас узнать другую основную концепцию реагирования: обратный поток данных.
В реакции данные протекают вниз, от родителя к ребенку. Однако иногда нам нужны дочерние компоненты для достижения их родителей и вызвать их методы, а также некоторые данные из себя.
Урок № 11: Компонент по комнате
Поскольку у нас есть основные функции чата сейчас (отправка и отображение сообщений), пришло время перейти к Слоулист Компонент, который отображает все номера, которые вы имеете доступные на вашем экземпляре Chatkit.
Он познакомит вас с несколькими новыми концепциями в Chatkit, плюс затвердевают ваши знания о том, как отправлять данные вниз из родительских компонентов до дочерних компонентов. Мы также пересмотрим оператор ES6 SPRECT, который является Super Handy, чтобы узнать при создании приложений React.js.
Урок № 12: Подписаться на комнаты
Тогда вам нужно научиться подписаться на конкретные номера. Мы подключимся к слушателю события с каждой из комнат, отображаемых в Слоулист компонент. Это будет вызвать метод в Приложение Компонент, который говорит Chatkit, что пользователь хочет подписаться на то, что конкретная комната.
subscribeToRoom(roomId) {
this.setState({ messages: [] })
this.currentUser.subscribeToRoom({
roomId: roomId,
hooks: {
onNewMessage: message => {
this.setState({
messages: [...this.state.messages, message]
})
}
}
})
}
Урок № 13: Заказ в помещении и выделение текущей комнаты
Эта лекция представит вас с .sort () Метод массива в JavaScript, поскольку нам нужно будет убедиться, что наши номера отсортированы в правильном порядке, независимо от того, где данные исходятся от первоначально.
Const Underureds = [… this.props.rooms] .sort ((a, b) => a.id – b.id)
Мы также добавим Активный Класс в комнату, которую мы в настоящее время общаемся, чтобы сигнализировать его пользователю.
Урок № 14: Добавление автосалонов
AutoScrolle необходим для автоматического перехода до последних сообщений, поскольку они появляются в Мессагелист компонент. Это аккуратный маленький трюк, который вводит вас в следующие методы жизненного цикла компонентов:
ComponentWillUpdate ()ComponentDidupdate ()
Нам также нужно будет использовать Reactom.finddomnode () Метод, так что вы тоже узнаете, что один тоже.
Урок № 15: Новомерный компонент
Этот компонент позволяет создавать новые номера. Это будет ресадно на контролируемых компонентах из девятого урока.
С этим мы закончили со всем React Code для приложения. Так что для остальной части курса мы сосредоточимся на дизайне с использованием CSS.
Урок № 16: Создание собственного приложения чата
Прежде чем мы начнем изменять дизайн приложений, я хочу клонировать свой код, чтобы вы получите свою собственную копию репо. Это устанавливает вас на следующие скринкасты, где вы будете персонализировать дизайн. Я направляю вас через каждый шаг, пока не получишь собственную копию и бесплатные API-ключи от Chatkit.
Урок № 17: Изменение макета с помощью CSS Grid
Мы используем CSS Grid для управления расположением приложения, что дает вам супер приятную гибкость, когда речь идет о том, чтобы меняться на нем, благодаря Сетка-шаблоны-зоны Отказ Я научу вас, как вы можете перемещать элементы на странице через просто изменение нескольких строк CSS.
Урок № 18: Изменение темы с переменными CSS
До и после модификации переменных.
Как мы используем переменные CSS для наших цветов, вы также можете легко изменить тему приложения. Здесь я дам вам вызов найти хорошую палитру онлайн, а затем реализовать его в ваше приложение.
Если вы объедините изменение макета с предыдущего урока с новой палитрой в этом, вы останетесь с вашим собственным персонализированным приложением чата! Вот один, который я сделал для себя, просто для удовольствия:
Урок № 19: Вызовы Outro и закрытие
Если вы дойдете до этого далеко: поздравляю! Вы действительно инвестировали в улучшение ваших навыков, и я на 100% уверен, что он окупится. На этом скринкасте я даю вам пару закрытия проблем, которые вы можете сделать, если вы действительно за это.
Если бы вы были довольны курс Мы были бы очень благодарны, если бы вам порекомендули его другу или поделитесь им в социальных сетях, так как вот как люди обнаруживают, что наши бесплатные курсы Scrimba.
Удачи с курсом, и счастливым кодированием:)