Данный пост ориентирован на тех кто имеет некоторое понятие о javascript, и в большей степени знаком с jquery, например для

  • Дизайнеров, которые имеет понятие о верстке, с использованием HTML/CSS/jQuery.
  • WordPress разработчиков которые знают как использовать jQuery плагины
  • Начинающих разработчиков которые изучают основы HTML/CSS/JS самостоятельно
  • Бекенд разработчики которые используют Bootstrap и jQuery для своих нужд во фронтенде
  • Тем, кто использует метод копи-паста 🙂

Если вы отлично знаете нативный javascript или другие фронтенд фрейморки такие как Backbone/Ember/Angular, то этот краткое пособие не для вас, так как вы будете разочарованы очень подробным и не глубоким стилем письма — для вас официальный учебник React.

Итак, с теми кто еще с нами, начнем!

Примерное время на изучение 1-2 часа, если вы реально быстры и используете метод копи-паста, вы сможете осилить этот пост даже быстрее, если вы подходите ко всему основательно то возможно вы потратите более 2-х часов.

Забегая вперед, мы будем кодить Твиттер

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

Интерфейс нашего примера будет похож на интерфейс твиттера, это будет не точная копия — но будет очень похоже. Надеюсь вы найдете этот пример весьма практичным.

twitter-box

Окно для отправки сообщений в твиттере

Шаг первый. Знакомство с JSBin. (5-10 минут)

В качестве онлайн редактора HTML/CSS/JS мы будем использовать JSBin, он поддерживает оба фреймворка Jquery и React. Возможно вы знакомы с подобными сервисами, например CodePen, JSFiddl, Plnkr — все они очень похожи, так что если особой разницы нет — начнем с JSBin.
Здесь пример JSBin:

JS Bin on jsbin.comПопробуйте изменить код в левой части и увидите изменения справа. Вот так JSBin работает.

Создаем аккаунт JSBin

Если у вас еще нет Jsbin аккаунта его нужно создать. Кликните на Login или Register для того что бы его создать. После создания аккаунта вы можете клонировать публичные Jsbin, аналогично как клонируют GitHub репозитории. Попробуем, кликните «Save» на меню в окне с JSbin. на сайте JSBin, вы можете выбрать в выпадающем списке «Add Library» популярные CSS/JS библиотеки. Выбираем последнею версию bootstrap и добавляем классы btn btn-primary для кнопки. JS Bin on jsbin.com

Создаем textarea

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

<div class="well clearfix">
  <textarea class="form-control"></textarea><br/>
  <button class="btn btn-primary pull-right">Твитнуть</button>
</div>

между тегами body.

JS Bin on jsbin.com

Уже не плохо,не правда ли?

Воплощаем в жизнь первую фишку — Кнопка «Твитнуть» должна быть неактивной (5 минут)

Теперь настало время для javascript. Воплотим в жизнь следующую функцию:
Изначально кнопка «Твитнуть» не активна, когда мы вводим несколько символов, кнопка становиться активной. Это демо, как вы видите кнопка изначально заблокирована, если вы введете что-нибудь в textarea кнопка становиться активной.

JS Bin on jsbin.com