Александр Талалаев

Запускать нужно в веб сервере с соответствующими настройками.
Когда вы разрабатывали приложение и запускали локальный сервер, который брал всё на себя.
А так, допустим вы используете Apache там свои настройки, Nginx свои. Во множестве облачных сервисах нередко всё оптимизировано и почти ничего делать не нужно. Для условного Github Pages нужны свои небольшие манипуляции.
Поэтому.
1. Определитесь с веб сервером/площадкой где вы будете размещать проект
2. Гуглите "Сервер/площадка react router settings" "Сервер/площадка react router deploymnet" и тп.
Для локального у вас на компьютере нужно скачать какой-нибудь веб сервер(условный wamp или альтернативы), создать сайт там и тестировать.

Сразу отмечу: писать свой велосипед, кроме как для получения личной практики - не советую. Будет бесконечное число подводных камней, костылей и тп, которые разработчики различных БД уже прошли.
А так, если нужно простое решение советую обратить внимание на SQLite. Там не требуется отдельный сервис/демон у вас должна быть реализация под ваш язык/фреймворк/среду и она будет работать.
Достаточно надёжное решение.
PS отдельно отмечу, возможно, вы имели ввиду совсем другое.

Начни с базовых штук, но усилить можешь любимым языком программирования.
В вашем случае это JS. TypeScript - это тот же JS но обернут некоторыми фичами, а React использует JS(и/или TypeScript) вы будете на нём писать, соответственно не зная языка, делать что-то больше простых реактивных кнопочек будет сложно.
Советую глянуть сюда
https://ru.hexlet.io/webinars (там проскролить чуть ниже к "Бесплатные курсы"), там годные указания и начало базового пути.
Ну и конечно же сюда: https://roadmap.sh/frontend
Крайне не советую тупо учить React, вы быстро упретесь в стеклянный потолок условного "скриптокидди", и ничего толкового в любой продуктовой или крупной компании сделать не сможете, да и не возьмут (впрочем такие встречаются чаще чем хотелось бы, так что как-то пролазят хех).
Не бойтесь объёма, идит шажками.

Вы перемудрили с кодом. Зачем заного инициализируете маску через вызов функции и тп.
Нужно проще:

document.addEventListener("DOMContentLoaded", () => {  
   const phoneEl = document.getElementById("textInput");
   const phoneMask = IMask(phoneEl, {    
    mask: '{+7} (#00)-000-00-00',    
    definitions: {
      '#': /[01234569]/
    },    
    lazy: false,    
    placeholderChar: ' '  
  });  

document.getElementById("clearButton").onclick = function(e) {
  phoneMask.value = ""; 
 //Вернём фокус
 phoneEl.focus(); 
}

});

Код конечно же нужно переписать:
использовать fetch API
разделить немного логику.
А так, у вас ошибка, вы в цикле каждый раз переписываете document.getElementById("tbody").innerHTML
Создайте временную переменную для строки с html и document.getElementById("tbody").innerHTMLуже после цикла, либо добавляйте через insertAdjacentHTML

Вот так, только eval обоюдо-острое оружие, потенциально могут быть дыры, поэтому то что туда передаётся должно проходить все возможные проверки.

let operation ='*'
let firstNumber=2;
let secondNumber =2;
let mul= `${firstNumber} ${operation} ${secondNumber}`;
console.log(eval(mul));

Будет как вы захотите. Сам React и Vue - это прежде всего библиотеки для построения интерфейса пользователя, что конечно же часть фронта.
Для удобства разработчика и быстрого создания веб приложений хелперы генерируют удобную структуру папок.
Отдельный момент папка node_modules, она содержит библиотеки которые нужны для разработки самого приложения и интерфейсов, обычно в продакшн не попадает сборщик проекта берёт оттуда всё что нужно при сборке проекта.
На выходе, в классическом случае, у фронтендера будет код js/css и готовые шаблоны(может и без них).
Так что, у вас по умолчанию фронт это независимая штука. Даже от бекенда. Если же нужно, разработчик внутри делате запросы к api и получает нужные данные(а на бекенде уже не важно что, php).
В целом, советую начать с чтения официальной документации, там всё кратко и по делу расписано. Да и уроков в отрытом и бесплатном доступе много.

Технически сам язык конечно же можно перевести в другой, я думаю даже простенькие функции будут работать.
НО! Дальше будет куча но. Обычной трансляцией не обоёдешься, так как много подводных камней и особенностей самого API PHP, принципов работы многих встроенных библиотек, хаков, костылей и просто приёмов которые используют люди в своих проектах и тп.
В таком огромном и сложном проекте как Wordpress этого всего просто нереальное количество.
Вы же понимаете часто даже код больших проектов, в рамках одного языка(любого) тяжело переводить с версии на новую версию. А тут на другой язык/платформу исполнения кода.
Это в любом случае ручной труд, а автоматический транслятор вам только будет помогать переводить конкретные конструкции, а так огромное количество ручного труда для каждого файла/класса/функций и тп.
Технически это возможно, но займёт огромное количество человека-часов, легче с нуля написать.
Второй вариант найти решение с условной виртуальной машиной, которая исполняет php код внутри js окружения. Были когда-то подобные пакеты, но спроса нет и всё заглохло. Это тоже трудоёмкий процесс, нужно бежать и развивать свою такую штуку.
Поэтому сегодня есть только условные прокси на node.js, которые запускают php скрипты на php(тем или иным способом, но исполняет их именно php).
Поэтому мы приходим к технологии WebAssembly, там есть например проект wasmer, с помощью которого можно запускать wasmer-php. Но снова таки, это не трансляция кода, а просто запуск php в среде браузера, js тут уже чисто для управления и запуска самого wasmer...

Всё просто. Используй watch на реактивном объекте

// ...
 const obj = reactive({
      prop1: 'prop1',
      prop2: 'prop2'
    })
watch(
      () => obj.prop1,
      (prop1, prevProp1) => {
        console.log("#######");
        console.log("Lets watch:");
        console.group();
        console.log("obj.prop1: " + prop1);
        console.log("Old prop1: " + prevProp1);
        console.groupEnd();
        console.group();
        console.log("Prop2: " + obj.prop2);
        console.groupEnd();
        console.log("End watch.");
        console.log("#######");        
      }
    )
//...

Вот пример:

Можно написать функцию с такой логикой:

const searchName = "Login2";
const data= [
 {
      "id": "1",
      "login": "Login1",
   },
   {
      "id": "2",
      "login": "Login2",
   }
];
const hasName = (el) => el.login === searchName ;
//Просто проверка
console.log(data.some(hasName));

load() и get() это всего лишь обёртка над jquery axax(), те http запросы.
Альтернатива XMLHttpRequest, либо использовать fetch API.
Есть ещё очень популярная библиотека(многие современном мире js её используют) Axios.
Отличие что вы сами разруливаете логику поведения. Те вначале запрос, потом проверяете что он случился и всё ок, тогда заполняете элемент(ну как в случае get).

Вы пишите в коде :

let currentArrow = document.querySelector(".tab__arrow");

Таким образом выбирая стрелку по слишком общему селектору, попадает первая.

Первое что нужно понять, где выполняется ваш js код.
Если это бекенд и сервер, то php тут вообще не нужен, выполнять код на сервере будет например окружение nodejs или аналоги.
Если в браузере, то сам код либо добавляете в структуру html документа(теги script ):

<script>
console.log('Привет я код на javascript');
</script>

либо кладёте в публично доступное место на сервере и подключаете как скрипт(мы подключаем из того места где и корень сервера):
<script src="/myscript.js"></script>
В форме в action пишут куда сам браузер сделает запрос(get или post) и обычно это бекенд(тот же php)
Вам же, для обработки в браузере, нужно перехватывать отправку формы в самом js скрипте через событие
Допустим у формы id='form'

function formSubmit(event) {  
  event.preventDefault();
 console.log('Форму пытались отправить');
}
const form = document.getElementById('form');
form.addEventListener('submit', formSubmit);

Опять таки, могут быть нюансы, зависит от задачи и скрипта

Добавьте строчку

$(document).on('change','#direct',function(){
  let id = document.getElementById("direct").value;

    $.getJSON("ajax", {id}, function (data) {
    	$("#modules").html('');
        $.each(data, function (index, item) {
      		$("#modules").append('<option value ="'+item.ID+'">'+item.NAME+'</option>');
    	});
    });
});

Ну и чтобы уменьшить обращения к DOM дереву, элемент #modules можно тоже скешировать.

$(document).on('change','#direct',function(){
  let id = document.getElementById("direct").value; // Возможно тут вам тоже не нужен let? мб const
 const modulesEl = $("#modules");

    $.getJSON("ajax", {id}, function (data) {
    	modulesEl.html('');
        $.each(data, function (index, item) {
      		modulesEl.append('<option value ="'+item.ID+'">'+item.NAME+'</option>');
    	});
    });
});

С айфремом ничего путного не выйдет, можно обходить и придумывать разной степени каличности и костыльности методы (не обхода ограничения, а методы примерно узнать что пользователь хотел сделать).
Короче гиблая история.
Лучше тогда быстро собрать через api свое решение, там простые методы(но только чтение/получиение данных) и после реализации получится свой виджет, который можно анализировать уже как угодно с высокой точностью.