Использование React в реальном мире

Теперь мой клиент может интегрировать компонент React, просто:

• загрузка React
• загрузка скомпилированного файла JS
• вызов функции с некоторыми параметрами

Да, есть некоторые издержки при загрузке всей библиотеки React только для одного компонента. Но это только 38 КБ после минимизации и сжатия. Например, размер jQuery составляет 29 КБ, и никто не унывает.

Кроме того, если вы используете общедоступный CDN, многим пользователям даже не придется загружать React. Тогда это всего лишь 400 байтов, чтобы подтвердить, что у вас установлена ​​последняя версия. Совсем неплохо.

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

Мы можем сделать лучше.

Реагируйте на компоненты как плагины jQuery, подтверждение концепции

Мы можем упаковать компоненты React в виде плагинов jQuery. Да, мы могли бы сделать представления Backbone, да, мы могли бы сделать компоненты Angular, да, это оскорбление для всего разумного.

И все равно идеально. Назовите один веб-сайт или веб-приложение, созданное за последние 10 лет или около того, у которого нет jQuery? Назовите одного веб-разработчика, который не может помочь себе с плагином jQuery?

Точно.

Вот подтверждение концепции, которую я подготовил ранее:

Вы смотрите на компонент, который говорит вам, сколько раз вы нажали на кнопку. Вот и все. Ничего фантастического.

Остальная часть примера — обычное веб-приложение старой школы. Есть несколько jQuery для рендеринга компонента и две кнопки jQuery для взаимодействия с компонентом после его рендеринга.

Правильно, белые кнопки могут как читать, так и записывать внутреннее состояние компонента. И им не нужна никакая реакция, чтобы сделать это. Они выглядят как обычные jQuery для тех, кто их реализует.

Использование компонента / плагина

Код «сделать мой компонент здесь» выглядит следующим образом:

$(".container .counter").clickCounter();

Легко и просто — выберите элемент, вызовите плагин jQuery. Bam.

И компонент выставляет свое внутреннее состояние через val()функцию. Использование выглядит следующим образом:

$(".btn-10x").click(function () {
    var counter = $(".container .counter")
            .clickCounter()[0];

    counter.val(counter.val()+10);
});

$(".btn-get").click(function () {
    var val = $(".container .counter")
            .clickCounter()[0]
            .val();

    alert("Current counter value is: "+val);
});

const React = require('react'),
      Counter = require('./Counter');

function RenderCounter(selector) {
    React.render(
        <Counter />,
        document.querySelectorAll(selector)[0]
    );
}

module.exports = RenderCounter;
window.RenderCounter = RenderCounter;

if (typeof jQuery !== 'undefined') {
    (function ($) {
        var pluginName = "clickCounter",
            defaults = {
                value: 0
            };

        function Plugin(element, options) {
            this.element = element;
            this.settings = $.extend({}, defaults, options);
            this._defaults = defaults;
            this._name = pluginName;
            this.init();
        }

        $.extend(Plugin.prototype, {
            init: function () {
                this.component = React.render(
                    <Counter value={this.settings.value},
                    this.element
                );
                return this;
            },

            val: function (val) {
                if (!arguments.length) {
                    return this.component.state.counter;
                }else{
                    this.settings.value = val;
                    this.init();
                }
            }
        });
    })(jQuery);
}

        $.fn[pluginName] = function (options) {
            return this.map(function () {
                if (!$.data(this, 'plugin_'+pluginName)) {
                    $.data(this, 'plugin_'+pluginName, new Plugin(this, options));
                }
                return $.data(this, 'plugin_'+pluginName);
            });
        };
    })(jQuery);

module.exports = {
    entry: [
        './src/main.jsx'
    ],
    output: {
        filename: 'counter.js',
        path: path.join(__dirname, 'build'),
        publicPath: '/build/'
    },
    module: {
        loaders: [
            {
                test: /\.jsx$/,
                loaders: ['babel'],
                include: path.join(__dirname, 'src')
            }
        ]
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    externals: {
        "react": "React",
        "react/addons": "React",
        "jQuery": "jQuery"
    },
};