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

    image Привет, Хаброжители! Ранее у нас вышла незаменимая вводная книга по технологии 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

    Комментарии 7

      0
      Разве не лучше использовать env вместо es2015 и webpack вместо всей этой ерунды (или gulp на крайний случай)? Понимаю, статья не об этом, но можно было бы дать просто рабочий сниппет, чтобы уменьшить гемор с командами.
      И насколько эта книга лучше официальной документации?
        +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().
          +1
          Жаль, но, похоже, книга устарела к моменту выхода.

          Мне кажется, что любая книга, посвященная современному JS (а особенно какому-то популярному фреймворку) устаревает на момент своего выхода, не говоря уж о ее переводе :-)
          0
          Книга, к сожалению, устарела не успев выйти.
          В отрывке прямо на первой странице написано: mv ~/Downloads/react-0.14.7/
          Хотя, Реакт как был Реактом так им и останется. Просто немного лучше.
            0
            Да и вообще сочетание «книга» и «быстрый старт» противоречивое.
              0

              Все устарело
              typescript вместо flow,
              redux или mobx вместо flux


              В главе 4 дается введение в JSX — отдельную дополнительную технологию, обычно используемую в связке с React.
              Да ну, неужели кто-то использует реакт без jsx?
                +1
                То что оно устарело еще ничего не значит, сейчас полно вакансий по ангуляру первому.

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

                Самое читаемое