Книга «React.js. Быстрый старт» +4
Привет, Хаброжители! Ранее у нас вышла незаменимая вводная книга по технологии 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 --versionBabel
Для установки интерфейса командной строки 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
Поделиться с друзьями
Комментарии (7)
MrCheater
24.04.2017 21:04+2Жаль, но, похоже, книга устарела к моменту выхода.
1) Вместо Browserify должен быть Webpack. Вместо npm — yarn
2) Вот это просто дичь какая-то
cat css/*/* css/*.css | sed 's/..\/..\/images/images/g' > bundle.css
тут должны быть или gulp-таски, или webpack + css-loader с CSS-Modules, или Inline Styles библиотеки вроде https://github.com/zeit/styled-jsx
3) В реальной жизни настройки лежат в конфиге. А скрипты описаны в package.json
babel --presets react,es2015 js/source -d js/build
4) Webpack, например, уже умеет нативные
import/export
включения реализации CommonJS, чтобы работали вызовы require(). Babel превращает все инструкции import в вызовы функций require().
RidgeA
24.04.2017 22:23+1Жаль, но, похоже, книга устарела к моменту выхода.
Мне кажется, что любая книга, посвященная современному JS (а особенно какому-то популярному фреймворку) устаревает на момент своего выхода, не говоря уж о ее переводе :-)
inoyakaigor
24.04.2017 21:53Книга, к сожалению, устарела не успев выйти.
В отрывке прямо на первой странице написано: mv ~/Downloads/react-0.14.7/
Хотя, Реакт как был Реактом так им и останется. Просто немного лучше.
knotri
25.04.2017 14:16Все устарело
typescript вместо flow,
redux или mobx вместо flux
В главе 4 дается введение в JSX — отдельную дополнительную технологию, обычно используемую в связке с React.
Да ну, неужели кто-то использует реакт без jsx?
Zet_Roy
26.04.2017 17:55+1То что оно устарело еще ничего не значит, сейчас полно вакансий по ангуляру первому.
vtvz_ru
Разве не лучше использовать env вместо es2015 и webpack вместо всей этой ерунды (или gulp на крайний случай)? Понимаю, статья не об этом, но можно было бы дать просто рабочий сниппет, чтобы уменьшить гемор с командами.
И насколько эта книга лучше официальной документации?