brees

В общем так, 2 дня шаманство и куча всяких бесполезных статей, я разобрался во всем.

Внедрение довольно простое. только вместо cURL использовл AJAX.
Скрипт на PHP , пояснения тут.
Я не использовал последний пункт (Create an Authorize Controller), пока не понял для чего он. Если кто сможет, поясните.

Теперь JS:

1. Получаем токен через AJAX.

$.ajax({
    url: "token.php", // Линк API обработчика.
    beforeSend: function(xhr) { 
      xhr.setRequestHeader("Authorization", "Basic " + btoa("testclient:testpass"));  // Логин и пароль по мануалу, заменить на свои после интеграции и сделать hash или md5 для пароля.
    },
    type: 'POST',
    dataType: 'json',
    data: {grant_type:"client_credentials"},
    success: function (data) {
      console.log(JSON.stringify(data.access_token)); // Проверка что токен получен. 
      localStorage.setItem('token', data.access_token); // Помещаем в LocalStorage для последующей проверки на других страницах.
      isAuth(data.access_token); // Запуск глобальной функции для проверки доступа, авторизирован или нет пользователь.
    }
});

собственно глобальная функция.

function isAuth(token){
		$.ajax({
		    url: "resource.php",
		    type: "POST",
		    dataType: "json",
		    //contentType: "application/json",
		        data: {access_token : token},
		    success: function (data) {
		      console.log(JSON.stringify(data));
                      // Функция обработчик.
		    }
		});
	}

Все работает, теперь шаманить с конфигурацией и настройкой глобальных функций.

Redux в React-разработке надо знать обязательно. Еще, хорошо знать MobX, так как все больше компаний используют его в новых проектах.

Так же, вам стоит познакомиться с такими инструментами как:
typescript
webpack/babel
react-router
redux-thunk
redux-act (имхо, лучшая упрощалка бойлерпелйта redux)
styled-components
reselect
next/create-react-app
axios
react-helmet
react-portal
classnames
eslint/tslint/prettier/lint-staged/husky
jest
express

Перечисленные инструменты, кроме redux-act, используют в React-разработке чаще всего.

Примерно так и делается. В компоненте bitrix:catalog.section со списком товаров уникальный ID для товара генерируется так:

$uniqueId = $item['ID'].'_'.md5($this->randString().$component->getAction());
//$item['ID'] - ID товара
//$this->randString() - рандомная строка
//$component->getAction() - по документации "Метод возвращает название текущего действия."

//Ниже пример подключения JS к списку товаров
$obName = 'ob'.preg_replace('/[^a-zA-Z0-9_]/', 'x', $this->GetEditAreaId($navParams['NavNum'])); //название переменной в которой, помещен JS-объект с логикой компонента.

//Ну и создание объекта в который передаются параметры.
var <?=$obName?> = new JCCatalogSectionComponent({
		siteId: '<?=CUtil::JSEscape($component->getSiteId())?>',
		componentPath: '<?=CUtil::JSEscape($componentPath)?>',
		navParams: <?=CUtil::PhpToJSObject($navParams)?>,
		deferredLoad: false, // enable it for deferred load
		initiallyShowHeader: '<?=!empty($arResult['ITEM_ROWS'])?>',
		bigData: <?=CUtil::PhpToJSObject($arResult['BIG_DATA'])?>,
		lazyLoad: !!'<?=$showLazyLoad?>',
		loadOnScroll: !!'<?=($arParams['LOAD_ON_SCROLL'] === 'Y')?>',
		template: '<?=CUtil::JSEscape($signedTemplate)?>',
		ajaxId: '<?=CUtil::JSEscape($arParams['AJAX_ID'])?>',
		parameters: '<?=CUtil::JSEscape($signedParams)?>',
		container: '<?=$containerName?>'
	});