React и ES6 - Часть 1, Введение
React

React и ES6 - Часть 1, Введение

Оригинал: React and ES6 - Part 1, Introduction, Egor Smirnov

Это первая статья из серии, в которой мы будем рассматривать использование React с ECMAScript 6.

Другие части вы можете найти по ссылкам:

В версии ReactJS v0.13.0 Beta 1 появилась совместимость ECMAScript 6 с компонентами React. Какие преимущества это дало разработчикам?

Что ж, ECMAScript 6 (или ECMAScript 2015) — это новый стандарт JavaScript, принесший множество новых особенностей в мир JavaScript. Таких как классы, стрелочные функции, rest параметры, итераторы, генераторы и многое, многое другое.

Если вы не знакомы с особенностями ECMAScript 2015, я рекомендую познакомиться с ними по ссылке.

Это здорово, но вгляните на таблицу совместимости ES6. Выглядит так, будто пройдут годы, пока мы сможем использовать ES6 в браузере (помните ситуацию с поддержкой ES5?).

К счастью, это не совсем так. Вам не придется ждать, пока разработчики браузеров реализуют поддержку ECMAScript 6 в браузерах. Существуют инструменты, называемые трансляторами, конвертирующие код, написанный на ES6, в ES5-совместимый код. Аналогично тому, как CoffeeScript транслируется в JavaScript.

Одно из таких решений называется Babel, действительно удивительный инструмент. Большое спасибо разработчикам. Что хорошо, Babel поддерживает огромное число различных фреймворков, систем сборки, тестовых фреймворков, шаблонизаторов — посмотрите здесь.

Чтобы получить краткое представление о том, как работает Babel, рассмотрим пример. Скажем, у нас есть следующий код:


var evenNumbers = numbers.filter((num) => num % 2 === 0);

После запуска Babel получим следующий код:


var evenNumbers = numbers.filter(function (num) {
  return num % 2 === 0;
});

Аналогичные манипуляции применяются и к другим конструкциям ES6.

Подготовка окружения разработки

Для того, чтобы настроить неперерывную работу Babel, мы будем использовать Gulp. Это сборщик основан на node.js и может упростить вам жизнь, автоматизируя рутинные задачи. Если вы слышали о Grunt, то Gulp — это почти то же самое.

  • Очевидно, вам понадобится Node.js. Установите его в вашей системе, если он еще не установлен.
  • Далее, вам нужно установить Gulp глобально: npm install -g gulp.
  • Перейдите в директорию с проектом. Инициализируйте файл package.json с помощью команды npm init.
  • Запустите команду npm install --save react@0.13.x. Эта команда установит react в директорию node_modules и сохранит в качестве зависимости в package.json.
  • Запустите команду npm install --save-dev gulp browserify babelify vinyl-source-stream babel-preset-es2015 babel-preset-react. Эта команда установит зависимости разработки.

Чтобы узнать больше о модулях, установленных на шаге 5, пожалуйста, прочитайте статью.

Создание gulpfile.js

Создайте файл gulpfile.js в корневой директории проекта со следующим содержимым:


var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');

gulp.task('build', function () {
    return browserify({entries: './app.jsx', extensions: ['.jsx'], debug: true})
        .transform('babelify', {presets: ['es2015', 'react']})
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('dist'));
});

gulp.task('watch', ['build'], function () {
    gulp.watch('*.jsx', ['build']);
});

gulp.task('default', ['watch']);

Надеюсь, некоторые объяснения будут полезны.

Строки 1-4. Мы подключаем необходимые node.js модули и инициализируем соответствующие переменные.

Строка 6. Объявляем задачу gulp с именем build, которая будет запускаться по команде gulp build.

Строка 7. Начинаем описывать, что должна делать команда. Мы говорим Gulp, что нужно использовать Browserify для app.jsx. В дополнение, мы включили режим отладки, который будет полезен при разработке.

Строки 8-11. Мы добавили трансформацию с помощью Babelify. Это позволит сконвертировать код на ECMAScript 6 в ECMAScript 5. Результат будем выводить в файл dist/bundle.js. Также мы подключили необходимые пресеты Babel.

Строки 14-16. Мы определили задачу с именем watch, которую будем запускать по команде gulp watch. Эта задача будет запускать gulp build при каждом изменении jsx файлов.

Строка 18. Мы определили задачу gulp, которая будет запускаться по команде gulp. Эта команда просто выполняет задачу watch.

Теперь ваш воркфлоу будет состоять из ввода команды gulp и нажатия клавиши Enter. Сборщик будет наблюдать за изменениями в компонентах React и пересобирать файлы непрерывно.

JSX и Babel

Вы, возможно, уже заметили, что мы использовали расширение .jsx вместо .js. JSX — это расширение синтаксиса JavaScript, разработанное командой ReactJS. Этот формат используется для упрощения написания компонентов ReactJS.

Больше информации о JSX.

Другая полезная вещь — Babelify понимает синтаксис JSX из коробки (подробнее об этом в статье).

Первый компонент React на ECMAScript 6

Надеюсь, вы не слишком заскучали :)

Пришло время создать наш первый очень простой компонент на ES6. Добавим файл с именем Hello-world.jsx в корень проекта:


import React from 'react';

class HelloWorld extends React.Component {
    render() {
        return <h1>Hello from {this.props.phrase}!</h1>;
    }
}

export default HelloWorld;

Некоторые объяснения:

  • Строка 1. Мы подключаем библиотеку React и инициализируем переменную React.
  • Строки 3-8. Для создания компонента React используем класс ES6, наследующий от класса React.Component. Мы добавили простой метод render, выводящий тег <h1>, содержащий свойство phrase.
  • Строка 9. Экспортируем созданный компонент с помощью export default HelloWorld.

Чтобы упростить понимание, я добавил код такого же компонента, но написанного без использования ES6 классов:


import React from 'react';

var HelloWorld = React.createClass({
    render: function() {
        return (
            <h1>Hello from {this.props.phrase}!</h1>
        );
    }
});

export default HelloWorld;

Обертка

Завершим наш простой пример.

Создайте файл с имененм app.jsx:


import React from 'react';
import HelloWorld from './hello-world';

React.render(
    <HelloWorld phrase="ES6"/>,
    document.body
);

Мы импортируем компонент HelloWorld, созданный на предыдущем шаге и передаем свойство phrase.

Далее, создайте файл index.html:


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>ReactJS and ES6</title>
</head>
<body>
<script src="dist/bundle.js"></script>
</body>
</html>

Теперь запустите команду gulp в терминале (она создаст файл dist/bundle.js) и откройте HTML файл в браузере.

Вы должны увидеть то же, что на изображении ниже.

Для дополнительного чтения

Рассылка
Подпишитесь на рассылку и получайте дайджест новостей и статей.
Никакого спама!
Подписаться