Всем привет! Создадим команду. Мы вместе создадим небольшое приложение с делами, используя ReactJS. У меня хорошее предчувствие!

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

Это вводное руководство должно быть идеальным, если вы погружаетесь в React или хотите отправиться в путь, чтобы стать полноценным разработчиком React. На данный момент я предполагаю, что на вашем компьютере установлен Узел и у вас есть некоторые базовые знания о Git, HTML и JS. Мы будем учиться по ходу дела, и у меня будет много полезных ссылок.

В части 1 мы создадим приложение с нуля и познакомимся с компонентом React. Готовый?

Подождите, что мы делаем?

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

Требования:
1) отображать текст загрузки (при «загрузке» задач)
2) загружать и отображать задачи
3) добавлять новые задачи
4 ) переключение задач выполнено / отменено
5) удалить задачи

Это хорошая база возможностей. На данный момент мы не будем особо беспокоиться о стилях (CSS), а сосредоточимся на JS и React. У нас не будет никаких зависимостей (никаких redux или mobx). React сам по себе достаточно мощный инструмент, и учиться так ему тоже интереснее.

Давайте наращивать!

Давайте настроим, чтобы мы могли быстро вникать в код. Раньше это было перетаскивание, чтобы подключить проект React, скомпилировать его и связать для Интернета; но не волнуйтесь, дорогой друг, теперь это стало довольно тривиальным делом. Мы будем использовать create-response-app для начальной загрузки с без конфигураций сборки.

Откройте свой терминал и установите cra глобально на свой компьютер с помощью этой команды:

> npm install create-react-app -g

Теперь мы можем создать проект React (готовый к работе с babel, webpack и eslint), введя это команда:

_2 _ («response-todo-app», или как вы хотите, конечно, назвать приложение)

Некоторые пакеты будут установлены для вас прямо сейчас, и вам будет представлено это дружеское приветствие:

Фактически, мы сделаем именно то, что они предлагают:

> cd react-todo-app для перехода во вновь созданный каталог
> npm start для запуска проекта в режиме разработки

Теперь вы должны увидеть новое яркое приложение React, работающее в вашем браузере. Просто так! (И так же легко собрать его для производства).

На данный момент мы ничего не трогаем. Мы просто инициализируем репозиторий с помощью git init, разместим все файлы в каталоге для нашей первоначальной фиксации и начнем чувствовать себя хорошо, о да.

(Если вы попадаете в GIT и не очень хорошо чувствуете себя при использовании командной строки, я бы порекомендовал GitUp в качестве графического интерфейса пользователя).

Первый взгляд на компонент React

Мы будем делать большую часть, если не всю, нашу работу в файле src/App.js. Откройте проект в своем любимом редакторе кода (VSCode и Atom - популярные варианты) и давайте подробнее рассмотрим вышеупомянутый App.js:

Мы познакомились с мощным компонентом React! Рискну сказать, что это довольно просто даже для неподготовленного глаза: у нас есть class в строке 5 с методом render, который возвращает некоторый JSX… который, по-видимому, переводится в HTML, который мы только что видели в браузере.

Также есть много className, которые нужно использовать для CSS, но мы их удалим. Пока что там нет динамических данных, так что это круто, но на самом деле никакого волшебства не происходит (если вы не будете слишком долго останавливаться на том, что в вашем файле JS есть биты, похожие на HTML, то есть :).

Если вы склонны, попробуйте заменить статические данные «Добро пожаловать в React» в строке 11 на что-нибудь другое, и вы сразу увидите, как это изменение отразится в браузере. Вы должны любить быструю обратную связь!

«Нафф сказал об этом, давайте уберем это cra вступление, которое нам не нужно. Мы быстро удалим этот большой заголовок, обновим заголовок в index.html, удалим логотип реакции и зафиксируем наши изменения, вуаля:

(Еще один совет разработчика, если вы еще не используете его: Prettier. Он форматирует код для вас. Это изменило правила игры для меня. Прошли те времена, когда выстраивались в очередь абзацы, вкладки и т. Д. Прямо, снова и снова, в редакторе кода).

Пространственные стили

Мы установим самые основные стили, где мы просто расставим все по интервалам с полями для всех элементов * { margin: 5px 5px 5px 0px; }. У нас будет приличный промежуток между элементами, и нам не придется снова много думать о стилях, пока наша функциональность не будет запущена и не будет работать (и наши дизайны будут готовы!). Давайте совершим:

Макет базы данных

Последний шаг начальной загрузки: мы добавим в проект фиктивную базу данных. Я подготовил этот файл, чтобы его можно было легко заменить позже на Firebase Firestore, а пока мы можем разрабатывать без подключения к Интернету.

Небольшая имитация базы данных хороша тем, что мы сохраняем гибкость в выборе серверного решения позже и можем сразу погрузиться в забавы с пользовательским интерфейсом. Обратной стороной является то, что на данный момент у нас не будет постоянных данных, что меня устраивает на этой самой ранней стадии. Возможно, мы сможем добавить настойчивость в другую серию блогов :)

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

Время пришло

Теперь мы готовы приступить к работе с React! После того, как мы очистили cra шаблон, наш src/App.js выглядит следующим образом:

В каком состоянии мы находимся?

Так что же нам делать? Хорошо, давайте подумаем о нашем приложении и о том, в каком состоянии оно может находиться. Каково наше первое требование?

  • отображать индикатор загрузки (при «загрузке» задач)

Таким образом, на странице должен быть текстовый индикатор «загрузка…» до тех пор, пока нам не будет что показать; то есть до тех пор, пока некоторые задачи не будут извлечены и загружены. Очевидно, что приложение может находиться в двух состояниях: «не загружено» (мы получаем данные) или «загружено» (мы получили данные - или, возможно, даже пустые данные).

Давайте продолжим и просто добавим состояние загрузки прямо в наш компонент. Я не выбираю имя state случайно, оно особенное в классе React. Мы будем использовать поле класса, краткий синтаксис, доступный нам через cra и компиляцию babel (в качестве альтернативы, мы могли бы добиться того же в конструкторе класса без babel).

Мы также добавим оператор if в метод render, чтобы мы возвращали текст «загрузка…», когда состояние loaded равно false, что по умолчанию и всегда будет в этой точке. Взглянем:

Вы это чувствуете? Безусловно, наше приложение на данный момент является довольно сложной задачей, поскольку оно застряло в этом loaded: false состоянии навсегда, но здесь оно, тем не менее, находится в браузере во всей красе:

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

setState (и повторный рендеринг)

Ясно, что нам нужно обновить начальное состояние, которое мы только что описали. Как нам разыграть такое волшебство? В React мы используем this.setState в компоненте. (Полагаю, это все-таки не столько волшебство).

Давайте напишем первое демонстрационное действие (так мы будем называть наши функции, запускающие изменение состояния). Кроме того, давайте добавим <button> в наш render метод, чтобы мы могли сами запустить это действие и протестировать его. Как насчет этого?

Потрясающие! Мы создали setLoaded() метод в строке 8, а затем прикрепляем его к кнопке в строке 18. setState - наш друг. Мы передаем ему обновления состояния, которые хотим выполнить, и он запускает новую визуализацию для нас с обновленным состоянием. Нам не нужно вносить изменения в DOM вручную. Вкратце, это и есть React.

Мы также можем просмотреть, как мы устанавливаем обработчик кликов в JSX. Обратите внимание, это onClick, а не onclick, как в HTML. Есть несколько подобных ошибок с JSX (это className, а не class). Другое дело, что у вас может возникнуть соблазн написать onClick = {this.setLoaded}, но это сломается, потому что вы не привязываете this (см. Стрелочная функция против привязки).

Хорошо, тогда ... так что мы фактически отбросим этот последний шаг, я просто хотел показать вам setState, но действие, которое мы подготовили setLoaded, само по себе не имеет особого смысла, как и эта кнопка в режиме загрузки . Вы можете git stash и вернуться к этой ситуации здесь:

Это идеальное время для короткого перерыва и недавнего твита, объясняющего работу React, от Дэна Абрамова, который работает в команде React в Facebook.

Во второй части этой серии блогов мы расскажем о конструктивных особенностях

[обновление]: Часть 2 уже доступна

Если вы не можете полностью утолить жажду, вот несколько хороших онлайн-инструментов для рисования (или большего количества) с помощью React:
http://react.jsbin.com/
https : //codesandbox.io/

Я на Github, и вы также можете подписаться на меня в Twitter.
Большое спасибо за чтение!

Фото:
- Человек, составляющий контрольный список в блокноте, автор Гленн Карстенс-Петерс