Как создать приложение для чата React.js за 10 минут

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

В этой статье я покажу вам самый простой способ создать приложение для чата с использованием React.js. Это будет сделано полностью без серверного кода, так как мы позволим API-интерфейсу Chatkit обрабатывать серверную часть.

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

Примечание. Я также создал бесплатный полный курс о том, как создать приложение для чата React.js, здесь:
Нажмите на изображение, чтобы перейти к курсу.

Если вы будете следовать этому уроку, в конце вы получите свое собственное приложение для чата, которое вы можете продолжить, если хотите.

Давайте начнем!

Шаг 1: разбить пользовательский интерфейс на компоненты

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

Давайте начнем с рисования прямоугольника вокруг всего приложения. Это ваш корневой компонент и общий предок всех остальных компонентов. Давайте назовем это App:

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

Какие прямые дети имеют этот компонент?

В нашем случае имеет смысл дать ему три дочерних компонента, которые мы будем называть следующим:

  • заглавие
  • MessagesList
  • SendMessageForm

Давайте нарисуем прямоугольник для каждого из них:

Это дает нам хороший обзор различных компонентов и архитектуры нашего приложения.

Мы могли бы продолжать спрашивать себя, у каких детей эти компоненты снова есть. Таким образом, мы могли бы разбить пользовательский интерфейс на еще больше компонентов, например, превратив каждое из сообщений в их собственные компоненты. Однако мы остановимся здесь ради простоты.

Шаг 2: Настройка кодовой базы

Теперь нам нужно настроить наш репозиторий. Мы будем использовать простейшую возможную структуру: файл index.html со ссылками на файл JavaScript и таблицу стилей. Мы также импортируем Chatkit SDK и Babel, которые используются для преобразования нашего JSX:

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

Нажмите на изображение, чтобы поэкспериментировать со всей базой кода.

Кроме того, вы можете скачать проект Scrimba в виде файла .zip и запустить простой сервер, чтобы запустить его локально.

Шаг 3: Создание корневого компонента

Имея хранилище на месте, мы можем начать писать код React, что мы сделаем в файле index.js.

Давайте начнем с основного компонента, приложения. Это будет наш единственный «умный» компонент, поскольку он будет обрабатывать данные и соединение с API. Вот основные настройки (до того, как мы добавили какую-либо логику):

Приложение класса расширяет React.Component {
  
  render () {
    вернуть (
      
                 <MessageList />         <SendMessageForm />      </ DIV>     )   }</pre><pre>}</pre><p>Как видите, он просто визуализирует трех дочерних элементов: компоненты <Title>, <MessageList> и <SendMessageForm>.</p><p>Мы собираемся сделать его немного более сложным, поскольку сообщения чата должны храниться в состоянии этого компонента приложения. Это позволит нам получить доступ к сообщениям через this.state.messages и, таким образом, передать их другим компонентам.</p><p>Мы начнем с использования фиктивных данных, чтобы понять поток данных приложения. Затем мы заменим это реальными данными из Chatkit API позже.</p><p>Давайте создадим переменную DUMMY_DATA:</p><pre>const DUMMY_DATA = [   {     senderId: "perborgen",     текст: "кто победит?"   },   {     senderId: "janedoe",     текст: "кто победит?"   } ]</pre><p>Затем мы добавим эти данные в состояние приложения и передадим их компоненту MessageList в качестве реквизита.</p><pre>Приложение класса расширяет React.Component {      constructor () {     супер()     this.state = {        сообщения: DUMMY_DATA     }   }      render () {     вернуть (       <div className = "app">         <MessageList messages = {this.state.messages} />         <SendMessageForm />      </ DIV>     )   }</pre><pre>}</pre><p>Здесь мы инициализируем состояние в конструкторе и также передаем this.state.messages в MessageList.</p><blockquote>Обратите внимание, что мы вызываем super () в конструкторе. Вы должны сделать это, если хотите создать компонент с состоянием.</blockquote><h3>Шаг 4: рендеринг фиктивных сообщений</h3><p>Давайте посмотрим, как мы можем отобразить эти сообщения в компоненте MessageList. Вот как это выглядит:</p><pre>класс MessageList extends React.Component {   render () {     вернуть (       <ul className = "список сообщений">         {this.props.messages.map (message => {           вернуть (            <li key = {message.id}>              <DIV>                {} Message.senderId              </ DIV>              <DIV>                {текст сообщения}              </ DIV>            </ Li>          )        })}      </ UL>     )   } }</pre><p>Это так называемый тупой компонент. Требуется одна опора, сообщения, которые содержат массив объектов. А затем мы просто выводим свойства text и senderId из объектов.</p><p>С нашими фиктивными данными, поступающими в этот компонент, он будет отображать следующее:</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1568822281416.png" /><p>Итак, теперь у нас есть базовая структура для нашего приложения, и мы также можем выводить сообщения. Отличная работа!</p><p>Теперь давайте заменим наши фиктивные данные реальными сообщениями из чата!</p><h3>Шаг 5: Получение API-ключей из Chatkit</h3><p>Чтобы получать сообщения, нам необходимо подключиться к Chatkit API. И для этого нам, конечно, нужно получить ключи API.</p><p>На данный момент я хочу призвать вас выполнить мои действия, чтобы вы могли запустить и запустить собственное приложение для чата. Вы можете использовать мою игровую площадку Scrimba, чтобы протестировать свои собственные ключи API.</p><p>Начните с создания бесплатной учетной записи здесь. Как только вы это сделаете, вы увидите свою панель инструментов. Здесь вы создаете новые экземпляры Chatkit. Создайте его и дайте ему любое имя:</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1568822282720.png" /><p>Затем вы перейдете к вновь созданному экземпляру. Здесь вам нужно скопировать четыре значения:</p><ul><li>Экземпляр Локатор</li><li>Поставщик тестовых токенов</li><li>Номер комнаты</li><li>имя пользователя</li></ul><p>Начнем с локатора экземпляра:</p><img alt="Вы можете скопировать с помощью значка на правой стороне локатора экземпляра." src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1568822284773.png" /><p>И если вы прокрутите немного вниз, вы найдете провайдера тестовых токенов:</p><img alt="Примечание: вам необходимо установить флажок ENABLED, чтобы получить доступ к токену." src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1568822287062.png" /><p>Следующим шагом является создание пользователя и комнаты, что делается на одной странице. Обратите внимание, что сначала вам нужно будет создать пользователя, а затем вы сможете создать комнату, которая снова даст вам доступ к идентификатору комнаты.</p><img alt="Выберите имя пользователя, создайте комнату, а затем скопируйте имя пользователя и идентификатор комнаты." src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1568822290410.png" /><p>Итак, теперь вы нашли свои четыре идентификатора. Отлично сработано!</p><p>Однако прежде чем мы вернемся к базе кодов, я хочу, чтобы вы также вручную отправили сообщение с панели управления Chatkit, поскольку это поможет нам в следующей главе.</p><p>Вот как это сделать:</p><img alt="Отправка сообщения из пользовательского интерфейса Chatkit" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1568822292928.png" /><p>Это сделано для того, чтобы на следующем шаге у нас было сообщение для рендеринга.</p><h3>Шаг 6: рендеринг реальных сообщений чата</h3><p>Теперь вернемся к нашему файлу index.js и сохраним эти четыре идентификатора в виде переменных в верхней части нашего файла.</p><p>Вот мой, но я бы посоветовал вам создать свой собственный:</p><pre>const instanceLocator = "v1: us1: dfaf1e22-2d33-45c9-b4f8-31f634621d24"</pre><pre>const testToken = "https://us1.pusherplatform.io/services/chatkit_token_provider/v1/dfaf1e22-2d33-45c9-b4f8-31f634621d24/token"</pre><pre>const username = "perborgen"</pre><pre>const roomId = 9796712</pre><p>И с этим на месте, мы наконец готовы соединиться с Chatkit. Это будет происходить в компоненте приложения, а точнее в методе componentDidMount. Этот метод вам следует использовать при подключении компонентов React.js к API.</p><p>Сначала мы создадим ChatManager:</p><pre>componentDidMount () {   const chatManager = new Chatkit.ChatManager ({     instanceLocator: instanceLocator,     userId: имя пользователя,     tokenProvider: новый Chatkit.TokenProvider ({       url: testToken     })  })</pre><p>… А затем мы подключим dochatManager.connect () к API:</p><pre>  chatManager.connect (). then (currentUser => {       currentUser.subscribeToRoom ({       номер комнаты: номер комнаты,       крючки: {         onNewMessage: message => {           this.setState ({             сообщения: [... this.state.messages, message]           })         }       }     })   }) }</pre><p>Это дает нам доступ к объекту currentUser, который является интерфейсом для взаимодействия с API.</p><blockquote>Примечание. Поскольку позже нам потребуется использовать currentUser, сохраните его в экземпляре, выполнив this.currentUser = currentUser.</blockquote><p>Затем мы вызываем currentUser.subscribeToRoom () и передаем ему наш roomId и ловушку onNewMessage.</p><p>Хук onNewMessage срабатывает каждый раз, когда новое сообщение транслируется в комнату чата. Поэтому каждый раз, когда это происходит, мы просто добавляем новое сообщение в конец this.state.messages.</p><p>Это приводит к тому, что приложение извлекает данные из API и затем отображает их на странице.</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1568822294654.png" /><p>Это потрясающе, так как у нас теперь есть скелет для нашего клиент-серверного соединения.</p><p>Woohoo!</p><h3>Шаг 7: Обработка пользовательского ввода</h3><p>Следующее, что нам нужно создать, это компонент SendMessageForm. Это будет так называемый контролируемый компонент, то есть компонент управляет тем, что отображается в поле ввода, через его состояние.</p><p>Взгляните на метод render () и обратите особое внимание на выделенные мной строки:</p><pre>Класс SendMessageForm extends React.Component {   render () {     вернуть (       <форма         = имя класса «отправить-сообщение-формы»>         <вход           OnChange = {this.handleChange}           Значение = {this.state.message}           placeholder = "Напечатайте ваше сообщение и нажмите ENTER"           type = "text" />       </ Форма>     )   } }</pre><p>Мы делаем две вещи:</p><ol><li>Прослушивание пользовательских вводов с помощью прослушивателя событий onChange, чтобы мы могли вызвать метод handleChange</li><li>Установка значения поля ввода явно с помощью this.state.message</li></ol><p>Связь между этими двумя шагами находится внутри метода handleChange. Он просто обновляет состояние до того, что пользователь вводит в поле ввода:</p><pre>handleChange (e) {   this.setState ({     сообщение: e.target.value   }) }</pre><p>Это вызывает повторную визуализацию, и, поскольку поле ввода задается явно из состояния с использованием значения = {this.state.message}, поле ввода будет обновлено.</p><p>Таким образом, даже несмотря на то, что приложение чувствует себя мгновенно для пользователя, когда он вводит что-то в поле ввода, данные фактически проходят через состояние, прежде чем React обновит пользовательский интерфейс.</p><p>Чтобы завершить эту функцию, нам нужно дать компоненту конструктор. В нем мы оба инициализируем состояние и связываем это с помощью метода handleChange:</p><pre>constructor () {     супер()     this.state = {        сообщение: ''     }     this.handleChange = this.handleChange.bind (this) }</pre><p>Нам нужно связать метод handleChange, чтобы у нас был доступ к ключевому слову this внутри него. Вот как работает JavaScript: ключевое слово this по умолчанию не определено внутри тела функции.</p><h3>Шаг 8: Отправка сообщений</h3><p>Наш компонент SendMessageForm почти закончен, но мы также должны позаботиться о отправке формы. Нам нужно получить сообщения и отправить их!</p><p>Для этого мы подключим обработчик handleSubmit к обработчику события onSubmit в <form>.</p><pre>render () {     вернуть (       <форма         onSubmit = {this.handleSubmit}         = имя класса «отправить-сообщение-формы»>         <вход           OnChange = {this.handleChange}           Значение = {this.state.message}           placeholder = "Напечатайте ваше сообщение и нажмите ENTER"           type = "text" />       </ Форма>     )   }</pre><p>Поскольку у нас есть значение поля ввода, сохраненное в this.state.message, на самом деле довольно легко передать правильные данные вместе с отправкой. Мы просто сделаем:</p><pre>handleSubmit (e) {   e.preventDefault ()   this.props.sendMessage (this.state.message)   this.setState ({     сообщение: ''   }) }</pre><p>Здесь мы вызываем опору sendMessage и передаем this.state.message в качестве параметра. Вы можете быть немного смущены этим, так как мы еще не создали метод sendMessage. Однако мы сделаем это в следующем разделе, поскольку этот метод находится внутри компонента App. Так что не волнуйтесь!</p><p>Во-вторых, мы очищаем поле ввода, устанавливая this.state.message в пустую строку.</p><p>Вот весь компонент SendMessageForm. Обратите внимание, что мы также связали это с методом handleSubmit:</p><pre>Класс SendMessageForm extends React.Component {   constructor () {     супер()     this.state = {       сообщение: ''     }     this.handleChange = this.handleChange.bind (this)     this.handleSubmit = this.handleSubmit.bind (this)   }</pre><pre>  handleChange (e) {     this.setState ({       сообщение: e.target.value     })   }</pre><pre>  handleSubmit (e) {     e.preventDefault ()     this.props.sendMessage (this.state.message)     this.setState ({       сообщение: ''     })   }</pre><pre>  render () {     вернуть (       <форма         onSubmit = {this.handleSubmit}         = имя класса «отправить-сообщение-формы»>         <вход           OnChange = {this.handleChange}           Значение = {this.state.message}           placeholder = "Напечатайте ваше сообщение и нажмите ENTER"           type = "text" />       </ Форма>     )   } }</pre><h3>Шаг 9: Отправка сообщений в Chatkit</h3><p>Теперь мы готовы, поэтому отправляйте сообщения в Chatkit. Это сделано в компоненте App, где мы создадим метод с именем this.sendMessage:</p><pre>sendMessage (текст) {   this.currentUser.sendMessage ({     текст,     номер комнаты: номер комнаты   }) }</pre><p>Он принимает один параметр (текст) и просто вызывает this.currentUser.sendMessage ().</p><p>Последний шаг - передать это компоненту <SendMessageForm> в качестве реквизита:</p><pre>/ * Компонент приложения * /    render () {   вернуть (     <div className = "app">       <Title />       <MessageList messages = {this.state.messages} />       <SendMessageForm sendMessage = {this.sendMessage} />   ) }</pre><p>И с этим мы передали обработчик, чтобы SendMessageForm мог вызвать его при отправке формы.</p><h3>Шаг 10: Создание титровального компонента</h3><p>Чтобы закончить, давайте также создадим компонент Title. Это простой функциональный компонент, то есть функция, которая возвращает выражение JSX.</p><pre>название функции () {   return <p class = "title"> Мое замечательное приложение для чата </ p> }</pre><p>Рекомендуется использовать функциональные компоненты, поскольку они имеют больше ограничений, чем компоненты класса, что делает их менее подверженными ошибкам.</p><h3>Результат</h3><p>И с этим на месте у вас есть свое собственное приложение чата, которое вы можете использовать, чтобы общаться с друзьями!</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1568822296050.png" /><p>Если вы закодировали до самого конца, похлопайте себя по спине.</p><p>Если вы хотите узнать, как использовать этот пример, ознакомьтесь с моим бесплатным курсом о том, как создать приложение чата с React, здесь.</p><p>Спасибо за чтение! Меня зовут Пер, я являюсь соучредителем Scrimba, и я люблю помогать людям осваивать новые навыки. Следите за мной в Twitter, если вы хотите получать уведомления о новых статьях и ресурсах.</p></div><ins data-zxname="zx-adnet" data-zxadslot="ZX-SMR53" data-zxw="970" data-zxh="250" data-overlay="true"></ins><div class="neighbor-articles"><h4 class="ui header">Смотрите также</h4><a href="/article/how-to-get-yourself-out-of-rock-bottom-48bea8/" title="Как вытащить себя из бездны">Как вытащить себя из бездны</a><a href="/article/how-to-build-your-online-brand-as-a-software-developer-758ffb/" title="Как создать свой онлайн-бренд в качестве разработчика программного обеспечения">Как создать свой онлайн-бренд в качестве разработчика программного обеспечения</a><a href="/article/bouquets-or-bitterness-how-to-bloom-where-you-are-planted-bbec32/" title="Букеты или горечь? Как цвести там, где вас посадили">Букеты или горечь? Как цвести там, где вас посадили</a><a href="/article/how-to-talk-to-someone-with-abandonment-issues-62ab2a/" title="Как поговорить с кем-то, кто имеет проблемы с оставлением">Как поговорить с кем-то, кто имеет проблемы с оставлением</a><a href="/article/3d-artists-how-to-make-money-working-on-decentraland-projects-5c87e7/" title="3D-художники: как заработать деньги, работая над проектами Decentraland">3D-художники: как заработать деньги, работая над проектами Decentraland</a></div></main><div class="push"></div></div><footer><div class="flags-footer"><a href="https://vi.ceadesc.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="vn flag"></i></a><a href="https://uk.ceadesc.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="ua flag"></i></a><a href="https://tr.ceadesc.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="tr flag"></i></a><a href="https://th.ceadesc.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="th flag"></i></a><a href="https://sv.ceadesc.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="ch flag"></i></a><a href="https://sr.ceadesc.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="rs flag"></i></a><a href="https://sl.ceadesc.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="si flag"></i></a><a href="https://sk.ceadesc.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="sk flag"></i></a><a href="https://ro.ceadesc.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="ro flag"></i></a><a href="https://pt.ceadesc.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="pt flag"></i></a><a href="https://pl.ceadesc.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="pl flag"></i></a><a href="https://de.ceadesc.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="de flag"></i></a><a href="https://ar.ceadesc.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="sa flag"></i></a><a href="https://bg.ceadesc.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="bg flag"></i></a><a href="https://cs.ceadesc.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="cz flag"></i></a><a href="https://da.ceadesc.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="dk flag"></i></a><a href="https://el.ceadesc.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="gr flag"></i></a><a href="https://ceadesc.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="es flag"></i></a><a href="https://et.ceadesc.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="ee flag"></i></a><a href="https://fi.ceadesc.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="fi flag"></i></a><a href="https://fr.ceadesc.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="fr flag"></i></a><a href="https://hi.ceadesc.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="in flag"></i></a><a href="https://hr.ceadesc.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="hr flag"></i></a><a href="https://hu.ceadesc.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="hu flag"></i></a><a href="https://id.ceadesc.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="id flag"></i></a><a href="https://it.ceadesc.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="it flag"></i></a><a href="https://ja.ceadesc.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="jp flag"></i></a><a href="https://ko.ceadesc.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="kr flag"></i></a><a href="https://lt.ceadesc.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="lt flag"></i></a><a href="https://lv.ceadesc.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="lv flag"></i></a><a href="https://ms.ceadesc.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="my flag"></i></a><a href="https://nl.ceadesc.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="nl flag"></i></a><a href="https://no.ceadesc.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="no flag"></i></a><a href="https://uz.ceadesc.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="uz flag"></i></a></div>ceadesc.org<!-- --> © <!-- -->2020<!-- --> </footer></div></div></div></body></html>