Книга «React.js. Быстрый старт»

Привет, Хаброжители! Ранее у нас вышла незаменимая вводная книга по технологии React для взыскательных JavaScript-разработчиков. Все самое интересное о сверхпопулярном инструменте от компании Facebook. В книге рассмотрены основные концепции высокопроизводительного программирования при помощи React, реальные примеры кода и доступные блок-схемы. Прочитав ее, вы научитесь:

• Создавать и использовать собственные компоненты React наряду с универсальными компонентами DOM.
• Писать компоненты для таблиц данных, позволяющие редактировать, сортировать таблицу, выполнять в ней поиск и экспортировать ее содержимое.
• Использовать дополнительный синтаксис JSX в качестве альтернативы для вызовов функций.
• Запускать низкоуровневый гибкий процесс сборки, который освободит вам время и поможет сосредоточиться на работе с React.
• Работать с инструментами ESLint, Flow и Jest, позволяющими проверять и тестировать код по мере разработки приложения.
• Обеспечивать коммуникацию между компонентами при помощи Flux.

О чем эта книга

Книга посвящена изучению React с позиции веб-разработчика. В первых трех главах изучение начинается с использования пустого HTML-файла, на основе которого выстраивается весь остальной код. Это позволяет сосредоточиться на изучении React, не отвлекаясь на новый синтаксис или на применение дополнительных инструментальных средств.

В главе 4 дается введение в JSX — отдельную дополнительную технологию, обычно используемую в связке с React.

Далее перейдем к изучению приемов разработки реального приложения и освоению дополнительных инструментальных средств, которые могут оказать помощь в этом деле. В их числе средства для создания пакетов JavaScript (Browserify), для блочного тестирования (Jest), для проверки кода (ESLint), проверки соответствия типов (Flow), для организации потока данных в приложении (Flux) и для использования неизменяемых данных (Immutable.js). Рассмотрение дополнительных технологических средств сведено к минимуму, чтобы основное внимание уделялось React, а знакомство с этими средствами поможет осознанно выбирать их для решения ваших задач.

Отрывок из книги. Установка обязательных инструментальных средств

Прежде чем загрузить index.html и посмотреть его в работе, необходимо сделать следующее:

• создать файл bundle.css. Это простое объединение, не требующее использования обязательных инструментальных средств;
• сделать код понятным для браузеров. Для транспиляции вам понадобится Babel;
• создать файл bundle.js. Для этого воспользуемся таким средством, как Browserify.

Средство Browserify понадобится не только для объединения сценариев, но и для:
• разрешения и включения всех зависимостей. Вы просто даете ему путевое имя файла app.js, а оно затем вычисляет все зависимости (React, Logo.js и т. д.);
• включения реализации CommonJS, чтобы работали вызовы require(). Babel превращает все инструкции import в вызовы функций require().

В общем, нужно установить Babel и Browserify. Их установка выполняется с использованием npm (Node Package Manager — диспетчер пакетов Node), инструментального средства, поставляемого вместе с программной платформой Node.js.

Node.js

Для установки Node.js перейдите по адресу http://nodejs.org и получите установщик, соответствующий вашей операционной системе. Следуйте инструкциям установщика (они помогут справиться с поставленной задачей). Теперь можно воспользоваться услугами, предоставляемыми утилитой npm.

Для проверки введите в своем терминале следующую команду:

$ npm --version

Если вы не имеете опыта работы с терминалом (командной строкой), то сейчас самое время его приобрести! Если у вас Mac OS X, щелкните на поиске Spotlight (значок которого в виде увеличительного стекла находится в верхнем правом углу) и наберите Terminal. Если у вас Windows, найдите меню Пуск (щелкните правой кнопкой мыши на значке окна в левом нижнем углу экрана), выберите пункт Выполнить и наберите powershell.

Browserify

Средство Browserify устанавливается с помощью npm путем набора в вашем терминале следующей команды:

$ npm install --global browserify

Для проверки работоспособности средства наберите следующую команду:

$ browserify --version

Babel

Для установки интерфейса командной строки Babel наберите следующую команду:

$ npm install --global babel-cli

Для проверки работоспособности наберите такую команду:

$ babel --version

Уловили суть?

React и прочие

Осталось воспользоваться еще несколькими пакетами (и все будет готово):

• react, разумеется;
• react-dom (распространяется отдельно);
• babel-preset-react (предоставляет Babel поддержку для JSX и других полезных опций, связанных с React);
• babel-preset-es2015 (предоставляет вам поддержку новейших возможностей JavaScript).

Для локальной установки этих пакетов сначала перейдите в каталог своего приложения (например, с помощью команды cd ~/reactbook/reactbook-boiler):

$ npm install --save-dev react
$ npm install --save-dev react-dom
$ npm install --save-dev babel-preset-react
$ npm install --save-dev babel-preset-es2015

Нужно отметить, что теперь у вашего приложения есть каталог node_modules с локальными пакетами и их зависимостями. Два глобальных модуля (Babel, Browserify) находятся в каталоге node_modules, расположенном где-то в другом месте, определяемом вашей операционной системой (например, /usr/local/lib/node_modules или C:\Users{ваше_имя}\AppData\Roaming\npm\).

Займемся сборкой

В процессе сборки выполняются три действия: объединение CSS, транспиляция JS и создание пакета JS. Это не сложнее запуска трех команд.

Транспиляция JavaScript

Сначала транспилируем код JavaScript с помощью Babel:

$ babel --presets react,es2015 js/source -d js/build

Эта команда означает, что нужно взять все файлы из каталога js/source, транспилировать их, задействовав возможности React и ES2015, и скопировать результат в js/build. Команда выведет следующую информацию:

js/source/app.js -> js/build/app.js
js/source/components/Logo.js -> js/build/components/Logo.js

Создание пакета JavaScript

Теперь настала очередь создания пакета:

$ browserify js/build/app.js -o bundle.js

Средству Browserify предписывается начать с файла app.js, учесть все зависимости и записать результат в файл bundle.js, который завершает инструкцию включения в вашем файле index.html. Чтобы проверить, что файл действительно был записан, наберите команду less bundle.js.

Создание пакета CSS

Создание пакета CSS выполняется (на данном этапе) настолько просто, что вам даже не нужно применять никаких специальных средств, следует просто объединить все CSS-файлы в один (используя команду cat). Но поскольку файл перемещается в другое место, ссылки на изображения утратят работоспособность, поэтому перепишем их с помощью вызова команды sed:

cat css/*/* css/*.css | sed 's/..\/..\/images/images/g'
> bundle.css

Об авторе

Стоян Стефанов (Stoyan Stefanov) работает инженером в компании Facebook. Ранее в компании Yahoo! он был создателем интерактивного средства оптимизации изображений smush.it, а также средства выявления проблем производительности YSlow 2.0. Стоян — автор книг JavaScript Patterns (O’Reilly, 2010) и Object-Oriented JavaScript (Packt Publishing, 2008), соавтор публикаций Even Faster Web Sites и High-Performance JavaScript, блогер и частый докладчик на многих конференциях, в числе которых Velocity, JSConf и Fronteers.

» Более подробно с книгой можно ознакомиться на сайте издательства
» Оглавление
» Отрывок

Для Хаброжителей скидка 25% по купону — React