Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript

Начало работы с React

by
Length:LongLanguages:
This post is part of a series called Getting Starting with React.
Data Persistence and Sessions With React

Russian (Pусский) translation by Masha Kolesnikova (you can also view the original English article)

Final product image
What You'll Be Creating

MVC - очень популярная парадигма в веб-разработке и она существует уже довольно давно. Фреймворк React является мощной частью этой троицы Model-View-Controller, поскольку он фокусируется исключительно на представлении. React написан на JavaScript и создан командами разработчиков Facebook и Instagram.

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

На что способен React?

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

Hello World

Чтобы начать работу, вот простой пример приложения React, взятый из официальных примеров:

Этот пример отобразит «Hello John» в контейнере <div>. Обратите внимание на синтаксис XML / HTML, который используется в строках 3 и 8. Это называется JSX.

Что такое JSX?

JSX - синтаксис XML/HTML, который используется для визуализации HTML из кода JavaScript. React преобразует JSX в собственный JavaScript для браузера, а с помощью предоставленных инструментов вы можете конвертировать HTML-код существующих сайтов в JSX!

JSX упрощает написание кода, поскольку очень похож на написание привычного HTML, но только изнутри JavaScript. В сочетании с Node это обеспечивает очень последовательный рабочий процесс.

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

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

Установка React

Существует несколько способов использования React. Официально рекомендуемый способ - из npm или Facebook CDN, но дополнительно вы можете клонировать из git и создавать свои собственные сборки. Также вы можете использовать стартовый комплект или сэкономить время с помощью генератора каркаса приложения от Yeoman. Мы рассмотрим все эти методы, чтобы у вас было полное понимание.

Использование CDN для Facebook

Для обеспечения быстрого доступа просто подключите библиотеки React и React Dom из CDN fb.me следующим образом:

Установка из NPM

В руководстве React рекомендуется использовать React с системой CommonJS, например такими как, browserify или webpack.

В руководстве React также рекомендуется использовать react и react-dom пакеты npm. Чтобы установить их в своей системе, запустите следующую команду в командной строке bash в каталоге проекта или сначала создайте новый каталог и cd в него.

Теперь вы сможете увидеть установку React внутри каталога node_modules.

Установка из Git Source

Зависимости

Вам нужно иметь Node V4.0.0 + и npm v2.0.0 +. Вы можете проверить свою версию node с помощью команды node version и npm с помощью npm version.

Обновление Node через NVM

Я рекомендую использовать диспетчер версий nvm-node для обновления и выбора версии node. Легко приобрести nvm, просто запуская:

Этот скрипт клонирует репозиторий nvm в ~/.nvm и добавляет исходную строку в ваш профиль (~/.bash_profile, ~/.zshrc или ~/.profile).

Если вы хотите вручную установить nvm, вы можете сделать это через git с помощью:

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

Примечание. Добавьте эту строку в файлы ~/.bashrc, ~/.profile или ~/.zshrc соответственно, чтобы автоматически получить доступ к команде при входе в систему.

Использование NVM

Теперь, когда nvm установлен, мы можем получить любую требуемую версию node и можем проверить список установленных версий с помощью команды node list, а так же те, которые доступны с помощью node ls-remote. Нам нужна версия выше 4.0.0 для работы с React.

Установите новейшую версию и установите ее как версию по умолчанию:

Node обновляется, а так же обновится и npm. Теперь вы готовы выполнить установку.

Собираем React из исходников git

Клонируйте себе репозиторий в директорию react в вашей системе:

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

На данный момент в каталоге build/ есть все, что вам нужно для использования React. Посмотрите каталог /examples, чтобы увидеть некоторые основные рабочие примеры!

Использование стартового набора

Прежде всего загрузите стартовый комплект.

Извлеките zip и в корневой каталог создайте файл helloworld.html, добавив следующее:

В этом примере React использует Babel для преобразования JSX в обычный JavaScript через <script type="text/babel">.

Использование отдельного файла JavaScript

Создайте новый файл на src/helloworld.js и поместите в него следующий код:

Теперь все, что вам нужно сделать, это ссылаться на него в вашем HTML, поэтому откройте helloworld.html и загрузите скрипт, который вы только что создали, используя тег script с атрибутом type text/babel:

Обновите страницу, и вы увидите, что helloworld.js отображается с помощью babel.

Примечание. Некоторые браузеры (например, Chrome) не смогут загрузить файл, если он не передается через HTTP, поэтому убедитесь, что вы используете локальный сервер. Я рекомендую проект browsersync.

Автономное преобразование

Вы также можете использовать интерфейс командной строки (CLI) для преобразования своего JSX с помощью инструментов командной строки babel. Это легко сделать с помощью команды npm:

Флаг --global или -g для краткости установит пакет babel глобально, чтобы он был доступен везде в вашей системе. Это очень хорошая практика использования Node для нескольких проектов и инструментов командной строки.

Теперь, когда Babel установлен, давайте сделаем перевод helloworld.js, который мы только что создали на предыдущем шаге. В командной строке из корневого каталога, где вы разархивировали стартовый комплект, запустите:

Теперь файл build/helloworld.js будет автоматически генерироваться всякий раз, когда вы вносите изменения! Если вам интересно, ознакомьтесь с документацией Babel CLI, чтобы получить более продвинутые знания.

Теперь, когда Babel сгенерировал нам файл build/helloworld.js, который содержит только чистый JavaScript, мы можем обновить HTML без каких-либо скриптов с поддержкой babel.

Итак, с помощью babel мы можем загрузить JSX непосредственно внутри тега script с помощью атрибута type text/babel. Это полезно для целей разработки, но для релиза на боевой сервер мы можем предоставить сгенерированный файл JavaScript, который можно будет кэшировать на локальной машине пользователя.

Генерация этой копии выполняется в командной строке, и поскольку это повторяющаяся задача, я настоятельно рекомендую автоматизировать этот процесс с помощью флага --watch. Или вы можете пойти еще дальше и использовать webpack и browsersync, чтобы полностью автоматизировать рабочий процесс разработки. Ну а чтобы максимально упростить это, мы можем автоматизировать настройку нового проекта с помощью генератора Yeoman.

Установка с помощью Yeoman Scaffolding

Yeoman - очень полезный инструмент для быстрого запуска проектов с оптимальным рабочим процессом и настройкой инструментов. Идея состоит в том, чтобы позволить вам тратить больше времени на разработку, чем на настройку рабочей области проекта, и минимизировать повторяющиеся задачи (имейте это в виду - RSI - это причина, по которой кодеры перестают кодировать). Поэтому, как наилучшая практика, экономия времени с помощью инструментов и внедрение D.R.Y (Do not Repeat Yourself) в повседневной жизни повысит ваше здоровье и эффективность и позволит вам тратить больше времени на фактический код, а не на настройку приложения.

Есть много готовых каркасов, которые подойдут вам в разных вариантах и для проектов разных масштабов. Для этого первого примера мы будем использовать каркас приложения react-fullstack от Yeoman; Вы можете увидеть демонстрацию того, как выглядит итоговый результат.

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

Применение

Чтобы использовать yeoman  сначала должны установить его, и если у вас нет требуемых инструментов, таких как gulpbower and grunt-cli, то установите их следующим образом:

Теперь установите React scaffolding с помощью следующей команды:

Теперь создайте каталог для вашего проекта и cd в него:

Наконец, используйте команду yo с генератором React-fullstack для создания вашего React приложения внутри нашего каталога:

Теперь Yeoman создаст необходимые каталоги и файлы; Вы сможете увидеть обновления об этом в командной строке.

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

По умолчанию мы запускаем его в debug режиме, и для перехода в живой релжим мы просто добавляем флаг --release, например так npm run start -- release.

Теперь вы увидите как строится сборка и инициализируется webpack. Как только это будет сделано, вы увидите вывод webpack, в котором вы найдете подробную информацию о сборке и URL-адресах для доступа к приложению.

Получите доступ к своему приложению через URL-адреса, указанные в конце вывода, с браузером по умолчанию по адресу http://localhost:3000. Чтобы получить доступ к интерфейсу администратора перейдите по адресу http://localhost:3001.

Примечание. Возможно, вам нужно открыть порт на вашем сервере для порта разработки. Для пользователей ubuntu / debian с ufw выполните следующие действия:

Преобразование существующего сайта в JSX

Facebook предоставляет онлайн-инструмент, если вам нужно просто преобразовать фрагмент вашего HTML в JSX.

Для более серьезных требований есть инструмент для npm, который называется htmltojsx. Загрузите его с помощью:

Использование его через командную строку так же просто:

Поскольку htmltojsx является модулем node, то вы также можете использовать его непосредственно в коде, например так:

Пример списка

Давайте начнем работу над созданием базового списка дел, чтобы вы могли увидеть, как работает React. Прежде чем начать, настройте свою среду IDE. Я рекомендую использовать Atom.

В командной строке bash установите линт для React через apm:

Примечание. Последняя версия linter-eslint сильно замедлила мой MacBook Pro, поэтому я отключил его.

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

Убедитесь, что ваш сервер запущен с npm start, и теперь давайте начнем вносить некоторые изменения.

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

Изменение отображается мгновенно, без необходимости обновления страницы. Это конфигурация webpack и браузера, которая вступила в силу.

Затем откройте каталог компонентов и создайте новый каталог:

Теперь, в каталоге UserList, создайте файл package.json со следующим содержимым:

Также, находясь в каталоге UserList, создайте файл UserList.js и добавьте следующее:

Теперь, чтобы закончить, нам нужно добавить некоторые данные для этого списка. Мы сделаем это внутри components/ContentPage/ContentPage.js. Откройте этот файл и установите его следующим образом:

Теперь, когда мы сохраняем, webpack будет перевыбирать приложение, а browsersync будет отображать изменения в вашем браузере. Взгляните на исходный код, чтобы увидеть, как он был визуализирован.

Резюме

Мы использовали генератор Yeoman для запуска веб-приложения React и создания react-fullstack приложения на основе стартового набора. Для получения дополнительной информации о макетах файлов и директорий, проверьте readme в git репозитории стартового набора.

Здесь мы отредактировали файл index.jade, так что он сначала был обнулен и затем создали собственное окно просмотра, создавая новый компонент с именем UserList.

Внутри components/UserList/UserList.js мы определяем способ отображения списка:

Здесь важно отметить, что React требует, чтобы все итерированные элементы имели уникальный идентификатор, предоставленный с атрибутом key.

Чтобы отобразить список, мы включаем его внутри файла Content Page.js с помощью import UserList from '.../UserList'; и определяем некоторые тестовые данные с помощью:

Внутри ContentPage.js мы вызываем компонент UserList в JSX <UserList data={listData} />.

Теперь компонент UserList может получить доступ к атрибуту data через this.props.data.

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

Синтаксис расширенных компонентов и React.createClass

Наконец, важно отметить, что в этом примере использовались расширенные компоненты. Что имеет много преимуществ для семантического структурирования вашего кода. Но возможно вы захотите получить доступ к более приблизительному подходу, как это делается во многих других примерах.

Поэтому вместо class ComponentName extends Component, который вы видели ранее в этом учебнике, вы создаете класс React со следующим синтаксисом, например:

На этом мы заканчиваем наше введение в React. Теперь вы должны хорошо понимать следующее:

  • как получить React
  • Как использовать Babel с React
  • Использование JSX
  • Создание компонента посредством метода extend
  • Использование своего компонента и передача ему данных

В следующих частях мы обсудим дальнейшее использование JSX, как работать с базой данных в качестве постоянного источника данных, а также то, как React может взаимодействовать с другими популярными веб-технологиями, такими как PHP, Rails, Python и .NET.

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.