Как связать node js и react

Как связать node js и react

В прошлых вводных темах весь код приложения определялся на веб-странице:

Такой подход хорош для вывода сообщения «Hello React», но в реальности весь код JSX обычно выносится во внешние файлы. Поэтому определим в той же папке, где находится данная веб-страница, новый файл index.jsx :

const rootNode = document.getElementById("app"); // элемент для рендеринга приложения React // получаем корневой элемент const root = ReactDOM.createRoot(rootNode); // рендеринг в корневой элемент root.render( 
Hello React
 // элемент, который мы хотим создать );

Обычно код JSX определяется в файлах с расшиением *.jsx , хотя можно использовать и стандартное расширение js.

И изменим веб-страницу:

Вроде бы у нас все то же самое, используется тот же код, только в отдельном файле. Но если мы просто кинем страницу в браузер, то мы столкнемся с ошибкой:

Дело в том, что Babel подтягивает код JSX через AJAX-запросы. Поэтому просто кинуть веб-страницу в браузер у нас не получится, нам надо использовать для обращения к ней веб-сервер, то есть все файлы приложения должны быть размещены на веб-сервере. Здесь не столь важно, какой именно веб-сервер использовать — Apache, Node.js, IIS. Но в рамках данных статей преимущественно будет использоваться Node.js как более демократичный вариант. Поэтому для работы также необходимо установить Node.js.

Подробнее про работу с Node.js можно почитать в соответствующем руководстве.

После установки Node.js в каталог проекта добавим новый файл app.js . То есть в итоге в папке проекта будет три файла:

• index.html
• index.jsx
• app.js

Определим в файле app.js следующий код:

const http = require("http"); const fs = require("fs"); http.createServer(function(request, response) < let filePath = "index.html"; if(request.url !== "/")< // получаем путь после слеша filePath = request.url.substring(1); >fs.readFile(filePath, function(error, data) < if(error)< response.statusCode = 404; response.end("Resourse not found!"); >else < response.end(data); >>); >).listen(3000, function()< console.log("Server started at 3000"); >);

Это простейший веб-сервер на Node.js, который мы бы могли определить в нашей ситуации для наших скромных целей — оправить пользователю страницу index.html со всеми сопутствующими файлами. В частности, в начале подключаем для модуля — http и fs , которые необходимы соответственно для обработки http-запросов и для работы с файлами:

const http = require("http"); const fs = require("fs");

Далее создаем собственно веб-сервер с помощью функции http.createServer() :

http.createServer(function(request, response)

В качестве параметра она принимает функцию, которая будет запускаться для обработки каждого приходящего на сервер запроса. И эта функция имеет два параметра: request — объект, который хранит все данные запроса, и response — объект, который позволяет определить нам ответ на запрос.

В данном случае у нас очень простая ситуация — нам надо отправить статический файл: либо index.html , либо index.jsx . Для этого в начале смотрим на запрошенный путь. Если запрос идет к корню сайта, то есть по адресу «localhost:3000/», то отправляем страницу «index.html». А для всех остальных адресов, в частности, для файла «index.jsx», получаем запрошенный путь

filePath = request.url.substring(1);

Далее с помощью функции fs.readFile() считываем из файловой системы запрошенный файл:

fs.readFile(filePath, function(error, data)
И с помощью метода response.end() отправляем считанный данные пользователю:
response.end(data);
В конце функция listen() запускает созданный веб-сервер на 3000-м порту, и после этого мы сможем обращаться к приложению по адресу "http://localhost:3000"
.listen(3000, function()< console.log("Server started at 3000"); >);
И теперь, когда все готово, запустим приложение. Для этого откроем командную строку/терминал и перейдем с помощью команды cd к папке проекта. Затем запустим приложение с помощью команды
node app.js






После этого в браузере перейдем по адресу "http://localhost:3000", по которому запущен сервер, и нам откроется веб-страница index.html:
 
В итоге компилятор Babel при запуске страницы подгрузит файл index.jsx и скомпилирует из него код JavaScript, который будет применяться к странице.
Как подружить React и Бэкенд часть на Node.js?
Только начал разрабатывать приложения, никак не соображу. Как связать frontend - на React и сервер на Node.js? 
Удалённо - купил VPS, настроил, выложил node.js , запустил. С браузера открыл своё React приложение, отправил AJAX запрос, и я получил ответ с своего сервера. Окей. А как мне простите разрабатывать все локально? Я запустил приложение npm node app.js на 8000 порту. Запускаю своё реакт приложение через npm start, оно открывается на 3000 порту. Но Ajax запросы не получают никакого ответа. Пробовал выставлять заголовки "Content-Type": "application/json", 
"Access-Control-Allow-Origin":"*" , на удаленном сервере это дало результат. Локально , не дало. Как разрабатывать локально ?

Вопрос задан более трёх лет назад
480 просмотров

Комментировать

Решения вопроса 1







A posteriori
Как же сильно я (не) люблю эти вопросы про node.js и порты.
Ставите себе nginx на локалхост который роутит правильно запросы с 80 порта до 3000 или 8000 порта в зависимости от запроса и живете себе радуетесь.
Как правильно? да так же как VPS вы настраивали.






Как настроить Node.js Express сервер для React
Это руководство поможет вам разработать простое приложение на React и подключить его к серверу, созданному с использованием Node.js.

React – это библиотека JavaScript для разработки пользовательских интерфейсов. Она позволяет создавать эффективные и масштабируемые веб-приложения, основанные на компонентной архитектуре.
Express.js – это минималистичный и гибкий веб-фреймворк для Node.js, который облегчает разработку веб-приложений и API. Он предоставляет простой интерфейс и набор функций, позволяющих быстро создавать серверы и маршрутизировать запросы.
Введение
Это руководство поможет вам разработать простое приложение на React и подключить его к серверу, созданному с использованием Node.js. Мы начнем с создания React приложения с помощью команды create-react-app , а затем настроим его подключение к серверу Node.js c помощью proxy






Необходимые условия
Для успешного выполнения данного гайда будет полезно иметь следующее:

Знакомство/небольшой опыт работы с Node.js, Express, npm и React.js.


Установленный Node.js.
Текстовый редактор, предпочтительно VS Code.
Веб-браузер, в данном случае Google Chrome.

Настройка структуры папок

 Файловая структура приложения
Первым шагом будет создание корневой папки для нашего приложения с именем express-react-app , в котором будут содержаться все файлы приложения. Затем мы создадим папку client , которая будет содержать все файлы React приложения.






Папка node_modules будет автоматически создана при установке пакетов NPM и будет содержать все пакеты NPM для файла server.js .
Далее нам потребуется создать файл server.js . В этом файле будет размещен сервер Express, который будет выступать в качестве нашего бэкенда.
Файл package.json будет автоматически сгенерирован, когда в терминале будет выполнена команда npm init -y .
Создание React приложения
Из терминала перейдите в корневую директорию с помощью команды cd и выполните следующие команды:
$cd express-react-app $npx create-react-app client 
Вышеуказанные команды создадут React приложение названием client внутри корневой директории.






Настройка сервера Express
Следующий шаг состоит в создании сервера Express в файле server.js .
Из терминала перейдите в корневую директорию и выполните следующую команду:
$npm init -y 
Команда автоматически сгенерирует файл package.json . Затем нам потребуется выполнить следующую команду для установки Express, и она будет сохранена в качестве зависимости в файле package.json .
$npm install express --save 
Теперь отредактируйте файл server.js следующим образом:
const express = require('express'); //Строка 1 const app = express(); //Строка 2 const port = process.env.PORT 5000; //Строка 3 // Сообщение о том, что сервер запущен и прослушивает указанный порт app.listen(port, () => console.log(`Listening on port $`)); //Строка 6 // Создание GET маршрута app.get('/express_backend', (req, res) => < //Строка 9 res.send(< express: 'YOUR EXPRESS BACKEND IS CONNECTED TO REACT' >); //Строка 10 >); //Строка 11 
Строки 1 и 2 – подключают модуль Express и позволяют использовать его внутри файла server.js .






Строка 3 – Установка порта, на котором будет работать сервер Express.
Строка 6 – будет отображено сообщение в консоли о том, что сервер работает исправно.
Строка 9 и 11 – установка GET маршрута, который позже мы будем получать из нашего клиентского React приложения.
Настройка proxy
На этом шаге Webpack Development Server был автоматически сгенерирован при выполнении команды create-react-app . Наше React приложение работает на Webpack Development Server на стороне фронденда.
Webpack Development Server (WDS) – это инструмент, который помогает разработчикам вносить изменения во фронтенд веб-приложения и автоматически отображает эти изменения в браузере без необходимости обновления страницы.






Мы можем настроить проксирование запросов API с клиентской стороны на API на серверной стороне. API на серверной стороне (Express сервер) будет работать на порту 5000.
Сначала настройте прокси для перехода в директорию client и найдите файл package.json . Добавьте следующую строку в него:
“proxy”: “http://localhost:5000” 
Измененный файл package.json будет выглядеть следующим образом:
< "name": "client", "version": "0.1.0", "private": true, "dependencies": < "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" >, "scripts": < "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" >, "eslintConfig": < "extends": [ "react-app", "react-app/jest" ] >, "browserslist": < "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] >, "proxy": "http://localhost:5000" > 
Измененный файл package.json позволит Webpack проксировать запросы API на сервер бэкенда Express, работающий на порту 5000.
Вызов бэкенд сервера Express из React
Сначала перейдите в папку client/src и отредактируйте файл App.js , чтобы он выглядел следующим образом:






import React, < useEffect, useState >from 'react'; import logo from './logo.svg'; import './App.css'; function App() < const [state, setState] = useState(null); const callBackendAPI = async () => < const response = await fetch('/express_backend'); const body = await response.json(); if (response.status !== 200) < throw Error(body.message) >return body; >; // получение GET маршрута с сервера Express, который соответствует GET из server.js useEffect(() => < callBackendAPI() .then(res =>setState(res.express)) .catch(err => console.log(err)); >, []) return (  
 className="App-logo" alt="logo" /> 
Edit src/App.js and save to reload.
 Learn React 
  ); > export default App; 
Внутри хука useEffect() вызывается функция callBackendAPI() . Эта функция будет получать данные с ранее созданного маршрута на сервере Express. При получении ответа от запроса fetch , значение res.express устанавливается в состояние state с помощью функции setState() .
Затем значение state выводится внутри элемента для отображения на странице.
Запуск приложения
Для запуска приложения перейдите в корневую директорию express-react-app






и выполните следующую команду:
$cd express-react-app $node server.js 
После запуска файла server.js следующим шагом будет переход в веб-браузер по адресу http://localhost:5000/express_backend, и будет отображено следующее сообщение:

 Успешный запуск бэкенда Express
Вышеуказанное демонстрирует, что наш сервер Express работает должным образом, и созданный нами маршрут GET функционирует, а также возможно получение этого маршрута с клиентской стороны.






Также обратите внимание, что путь URL совпадает с путем, который мы указали в нашем маршруте GET в файле server.js .
Затем перейдите в директорию client в терминале и выполните следующие команды:
$cd client $npm start 
Вышеуказанные команды запустят React сервер разработки, который работает на порту 3000, и автоматически откроется в веб-браузере.
На экране будет отображено следующее сообщение:






 Успешный запуск React App
Наконец, мы отобразили данные, полученные с маршрута GET в server.js , в нашем фронтенд React приложении, как было показано выше.
Если сервер Express отключен, сервер React всё равно будет продолжать работать. Однако связь с бэкендом будет потеряна, и ничего не будет отображаться.
Заключение
С помощью сервера Express можно сделать многое, например, осуществлять вызовы к базе данных. Однако в этом руководстве мы сосредоточились на том, как быстро подключить клиентское React приложение к серверу Express на стороне бэкенда.
Кодовые фрагменты и файлы, использованные в этом руководстве, можно найти в репозитории GitHub по этой ссылке.






Учебник. Создание приложения Node.js и React в Visual Studio
В Visual Studio можно легко создать проект Node.js, а также использовать IntelliSense и другие встроенные функции, поддерживающие Node.js. При работе с этим руководством вы создадите проект веб-приложения Node.js на основе шаблона Visual Studio. Затем вы создадите простое приложение с помощью React.
В этом руководстве описано следующее:

Создание проекта Node.js
Добавление пакетов npm
Добавление кода React в приложение
Транскомпиляция JSX
Подключение отладчика

Начиная с Visual Studio 2022, можно также создать проект React с помощью рекомендуемого типа проекта на основе CLI. Некоторые сведения в этой статье относятся только к типу проектов Node.js (расширение файла NJSPROJ). Шаблон, используемый в этой статье, больше недоступен, начиная с Visual Studio 2022 версии 17.8 ( предварительная версия 2).
Прежде чем приступить к работе, изучите краткий список вопросов и ответов, который познакомит вас с некоторыми основными понятиями.

Что такое Node.js? Node.js — это серверная среда выполнения JavaScript, выполняющая код JavaScript.
Что такое npm? npm —это стандартный диспетчер пакетов Node.js. Диспетчер пакетов упрощает публикацию и совместное использование библиотек исходного кода Node.js. Диспетчер пакетов npm упрощает установку, обновление и удаление библиотек.
Что такое React? React — это интерфейсная платформа для создания пользовательского интерфейса.
Что такое JSX? JSX — это расширение синтаксиса JavaScript. Обычно оно используется с React для описания элементов пользовательского интерфейса. Прежде чем запускать код JSX в браузере, его нужно преобразовать в обычный код JavaScript.
Что такое Webpack? Пакет webpack объединяет файлы JavaScript, чтобы они могли работать в браузере, а также может преобразовывать или упаковывать другие ресурсы. Webpack может указать компилятору, например Babel или TypeScript, преобразовать код JSX или TypeScript в обычный код JavaScript.

Необходимые компоненты
Для работы с этим руководством требуется следующее:


Visual Studio с установленной рабочей нагрузкой "Разработка Node.js". Если вы еще не установили Visual Studio:

Перейдите на страницу загрузки Visual Studio, чтобы установить Visual Studio бесплатно.
В Visual Studio Installer выберите рабочую нагрузку Разработка Node.js и щелкните Установить. 


Если решение Visual Studio уже установлено, но требуется установить рабочую нагрузку Node.js, сделайте следующее:

В Visual Studio выберите Средства>Получить средства и компоненты.
В Visual Studio Installer выберите рабочую нагрузку Разработка Node.js и щелкните Изменить, чтобы скачать и установить рабочую нагрузку.


После создания проекта щелкните правой кнопкой мыши узел проекта и выберите Панель свойств.
На панели Свойства задайте путь Node.exe для ссылки на глобальную или локальную установку Node.js. Вы можете указать путь к локальному интерпретатору в каждом из своих проектов Node.js.

Это руководство было протестировано с помощью Node.js 18.5.0.
Это руководство было протестировано с Node.js 12.6.2.
Создание проекта
Прежде всего, создайте проект веб-приложения Node.js.


Откройте Visual Studio и нажмите клавишу ESC, чтобы закрыть начальное окно.
Нажмите клавиши CTRL+Q, введите node.js в поле поиска, а затем выберите в раскрывающемся списке элемент Blank Node.js Web Application - JavaScript (Пустое веб-приложение Node.js — JavaScript). Хотя в этом руководстве используется компилятор TypeScript, выполнение приведенных в нем инструкций необходимо начинать с шаблона JavaScript. Если параметр Пустое веб-приложение Node.js не отображается, нужно установить рабочую нагрузку "Разработка Node.js". Соответствующие инструкции см. в разделе Предварительные требования.
В диалоговом окне Настроить новый проект выберите команду Создать. Visual Studio создаст новое решение и откроет проект в области справа. Файл проекта server.js откроется в области редактора слева.
Структуру проекта можно изучить в Обозревателе решений в области справа.

На верхнем уровне находится решение (1), имя которого по умолчанию совпадает с именем проекта. Решение, представленное на диске файлом SLN, является контейнером для одного или нескольких связанных проектов.
Ваш проект (2) с именем, которое вы указали в диалоговом окне Настроить новый проект, выделен полужирным шрифтом. В файловой системе этот проект представляет собой файл .njsproj в папке вашего проекта. Чтобы просмотреть и задать свойства проекта и переменные среды, нажмите клавиши ALT+ВВОД или щелкните проект правой кнопкой мыши и в контекстном меню выберите пункт Свойства. Вы можете использовать и другие средства разработки, так как файл проекта не вносит изменений в источник проекта Node.js.
В узле npm (3) представлены все установленные пакеты npm. Чтобы найти и установить пакеты npm, щелкните правой кнопкой мыши узел npm. Вы можете установить и обновить пакеты с помощью параметров в package.json, или щелкнув узел npm правой кнопкой мыши.
Npm использует файл package.json (4) для управления зависимостями и версиями для локально установленных пакетов. Дополнительные сведения см. в разделе Управление пакетами npm.
Файлы проекта (5) отображаются в узле проекта. Файл запуска проекта server.js выделяется полужирным шрифтом. Задать файл запуска можно, щелкнув правой кнопкой мыши файл в проекте и выбрав Задать как файл запуска Node.js.





Откройте Visual Studio.
Создание проекта Нажмите клавишу ESC, чтобы закрыть окно запуска. Нажмите CTRL+Q, чтобы открыть поле поиска, введите Node.js и выберите Пустое веб-приложение Node.js (JavaScript). (Хотя в этом учебнике используется компилятор TypeScript, в шагах указано, что нужно начинать с шаблона JavaScript.) В появившемся диалоговом окне выберите Создать. Если шаблон проекта Пустое веб-приложение Node.js отсутствует, необходимо добавить рабочую нагрузку Разработка Node.js. Подробные инструкции см. в разделе с предварительными требованиями. Visual Studio создаст решение и откроет проект. (1) Полужирным шрифтом выделен ваш проект, имя которого вы указали в окне Новый проект. В файловой системе этот проект представлен файлом NJSPROJ в папке проекта. Вы можете задать свойства и переменные среды, связанные с проектом, щелкнув его правой кнопкой мыши и выбрав пункт Свойства (или нажав сочетание клавиш ALT + ВВОД). Вы можете одновременно использовать и другие средства разработки, так как файл проекта не вносит изменения в источник проекта Node.js. (2) На верхнем уровне находится решение, имя которого по умолчанию совпадает с именем проекта. Решение, представленное на диске файлом SLN, является контейнером для одного или нескольких связанных проектов. (3) В узле npm представлены все установленные пакеты npm. Вы можете щелкнуть узел npm правой кнопкой мыши, чтобы найти и установить пакеты npm с помощью диалогового окна. Кроме того, установить и обновить пакеты можно с помощью параметров, доступных в файле package.json и контекстном меню узла npm. (4) package.json — это файл, который npm использует для управления зависимостями и версиями пакетов для локально установленных пакетов. Дополнительные сведения см. в разделе Управление пакетами npm. (5) Файлы проекта, такие как server.js, отображаются в узле проекта. server.js — это файл запуска проекта, поэтому он выделяется полужирным шрифтом. Задать файл запуска можно, щелкнув правой кнопкой мыши файл в проекте и выбрав Задать как файл запуска Node.js.

Добавление пакетов npm
Для правильной работы этого приложения требуются следующие модули npm:

react
react-dom
express
path
ts-loader
typescript
webpack
webpack-cli


В Обозревателе решений щелкните правой кнопкой мыши узел npm и выберите элемент Установка новых пакетов npm.
В диалоговом окне Установка новых пакетов npm выполните поиск пакета react и щелкните команду Установить пакет.




Вместо поочередного поиска и добавления остальных пакетов в пользовательском интерфейсе вы можете вставить в файл package.json требуемый код пакета.

   Из Обозревателя решений откройте package.json в редакторе Visual Studio. Добавьте следующий раздел dependencies перед концом файла:


"dependencies": < "express": "^4.18.2", "path": "^0.12.7", "react": "^18.2.0", "react-dom": "^18.2.0", "ts-loader": "^9.4.2", "typescript": "^5.0.2", "webpack": "^5.76.3", "webpack-cli": "^5.0.1" >, 


Примечание. Кроме того, пакеты npm можно установить с помощью командной строки. В Обозревателе решений щелкните правой кнопкой мыши имя проекта и выберите пункт Открыть командную строку здесь. Используйте стандартные команды Node.js для установки пакетов.
Добавление файлов проекта
Теперь добавьте в проект четыре новых файла.
Для этого простого приложения новые файлы проекта добавляются в корень проекта. В большинстве приложений файлы добавляются во вложенные папки, после чего ссылки в виде относительных путей соответствующим образом изменяются.

В Обозревателе решений выберите имя проекта и нажмите клавиши CTRL+SHIFT+A или щелкните правой кнопкой мыши имя проекта и выберите элементы Добавить>Новый элемент. Если вы не видите все шаблоны элементов, выберите "Показать все шаблоны" и выберите шаблон элемента.
В диалоговом окне Добавление нового элемента выберите JSX-файл TypeScript, введите имя файла app.tsx и нажмите кнопку Добавить или ОК.
Повторите эти шаги, чтобы добавить файл JavaScript с именем webpack-config.js.
Повторите эти шаги, чтобы добавить HTML-файл с именем index.html.
Повторите эти шаги, чтобы добавить файл конфигурации TypeScript JSON с именем tsconfig.json.

Добавление кода приложения

В Обозревателе решений откройте файл server.js и замените его содержимое следующим кодом:

'use strict'; var path = require('path'); var express = require('express'); var app = express(); var staticPath = path.join(__dirname, '/'); app.use(express.static(staticPath)); // Allows you to set port in the project properties. app.set('port', process.env.PORT || 3000); var server = app.listen(app.get('port'), function() < console.log('listening'); >); 
declare var require: any var React = require('react'); var ReactDOM = require('react-dom'); export class Hello extends React.Component < render() < return ( 
Welcome to React!!
 ); > > ReactDOM.render(, document.getElementById('root')); 
Настройка параметров компилятора Webpack и TypeScript
Затем добавьте код конфигурации Webpack в webpack-config.js. Вы добавляете простую конфигурацию Webpack, указывающую входной файл, app.tsx и выходной файл, app-bundle.js, для объединение и транспилирование JSX в обычный JavaScript. Для транскомпиляции также настраиваются некоторые параметры компилятора TypeScript. Этот базовый код конфигурации — это введение в Webpack и компилятор TypeScript.

   В Обозревателе решений откройте файл webpack-config.js и добавьте приведенный ниже код.


module.exports = < devtool: 'source-map', entry: "./app.tsx", mode: "development", output: < filename: "./app-bundle.js" >, resolve: < extensions: ['.Webpack.js', '.web.js', '.ts', '.js', '.jsx', '.tsx'] >, module: < rules: [ < test: /\.tsx$/, exclude: /(node_modules|bower_components)/, use: < loader: 'ts-loader' >> ] > > 
< "compilerOptions": < "noImplicitAny": false, "module": "commonjs", "noEmitOnError": true, "removeComments": false, "sourceMap": true, "target": "es5", "jsx": "react" >, "exclude": [ "node_modules" ], "files": [ "app.tsx" ] > 
Транскомпиляция JSX


В Обозревателе решений щелкните правой кнопкой мыши имя проекта и выберите пункт Открыть командную строку здесь.
В командной строке введите следующую команду Webpack: node_modules\.bin\webpack --config webpack-config.js В окне командной строки будут выведены результаты. Если вместо приведенных выше выходных данных будут выведены ошибки, их необходимо будет устранить, чтобы приложение работало. Отличие версий пакетов npm от версий, указанных в этом руководстве, может привести к ошибкам. Чтобы устранить ошибки, попробуйте следующее:

Используйте точные версии, показанные на предыдущем шаге, если вы еще не сделали Или, если вы по-прежнему видите ошибки:
Установите последние версии пакетов npm, щелкнув правой кнопкой мыши узел npm в Обозреватель решений и выбрав установить пакеты npm.



Если одна или несколько версий пакетов устарели и приводят к ошибке, может потребоваться установить более последнюю версию для устранения ошибок. Дополнительные сведения об использовании package.json для контроля версий пакетов npm см. в разделе Конфигурация package.json.


Щелкните правой кнопкой мыши узел проекта в Обозревателе решений, а затем выберите элементы Добавить>Существующая папка.
Выберите папку dist, а затем щелкните команду Выбрать папку. Visual Studio добавит в проект папку dist, которая содержит файлы app-bundle.js и app-bundle.js.map.
Откройте файл app-bundle.js, чтобы просмотреть транскомпилированный код JavaScript.
Если будет предложено перезагрузить файлы, которые были изменены в других средствах, выберите вариант Да, для всех. 

В любое время, когда вы вносите изменения в app.tsx, необходимо повторно запустить команду Webpack. Чтобы автоматизировать этот шаг, можно добавить скрипт сборки для транскомпиляции JSX.
Добавление скрипта сборки для транскомпиляции JSX
Для версий Visual Studio, начиная с Visual Studio 2019, требуется скрипт сборки. Вместо транскомпиляции JSX в командной строке (как показано в предыдущем разделе) можно транскомпилировать JSX при сборке из Visual Studio.

   Откройте Package.json и добавьте следующий раздел после раздела dependencies :


"scripts":
Выполнить приложение

На панели инструментов Отладка выберите целевой объект отладки, например веб-сервер (Microsoft Edge) или веб-сервер (Google Chrome).




Если вы уверены, что нужный вам целевой объект отладки доступен на компьютере, но его нет в списке вариантов, выберите пункт Просмотр с помощью из раскрывающегося списка целей отладки. Выберите в списке целевой браузер, который хотите установить по умолчанию и щелкните элемент По умолчанию.
Чтобы запустить приложение, нажмите клавишу F5, выберите зеленую стрелку или выберите элементы Отладка>Начать отладку. Откроется окно консоли Node.js, в котором отображается порт прослушивания отладчика. Visual Studio запускает приложение с помощью файла запуска server.js. 
Закройте браузер и окно консоли.

Установите точку останова и запустите приложение.
Точки останова — это самая основная и важная функция надежной отладки. Точка останова указывает, где решение Visual Studio должно приостановить выполняемый код. Так вы сможете проверить значения переменных или поведение памяти, а также узнать, выполняется ли определенная ветвь кода.

   В файле server.js щелкните в поле слева от объявления staticPath , чтобы установить точку останова:




Установка и срабатывание точки останова в коде React на стороне клиента
В предыдущем разделе вы подключили отладчик к коду Node.js на стороне сервера. Чтобы использовать точки останова на стороне клиента React, необходимо присоединить отладчик к нужному процессу. Ниже описан один из способов настройки отладки в браузере и подключения к процессу.
Включение отладки в браузере
Можно использовать Microsoft Edge или Google Chrome. Закройте все окна целевого браузера. Для Microsoft Edge также отключите все экземпляры Chrome. Так как оба браузера используют одну базу кода Chromium, лучше всего завершить работу обоих браузеров.
Другие экземпляры браузера могут препятствовать его открытию при включенной отладке. Расширения браузера могут препятствовать режиму полной отладки. Для поиска и завершения работы всех работающих экземпляров Chrome может потребоваться диспетчер задач.
Запустите браузер с включенной отладкой.


В раскрывающемся списке на панели инструментов Отладка выберите элемент Просмотр с помощью.
На экране Просмотр с помощью выберите нужный браузер и нажмите Добавить.
В поле Аргументы введите --remote-debugging-port=9222.
Присвойте браузеру новое понятное имя, например Edge с отладкой или Chrome с отладкой, а затем нажмите кнопку ОК.
На экране Просмотр с помощью выберите элемент Просмотр. 


Кроме того, вы можете открыть интерфейс Выполнить, щелкнув левой кнопкой мыши кнопку Пуск в среде Windows, и ввести следующий текст: msedge --remote-debugging-port=9222 or chrome.exe --remote-debugging-port=9222

Откроется окно браузера с включенной отладкой. Так как приложение еще не запущено, страница браузера пуста.
Подключение отладчика к сценарию на стороне клиента

В редакторе Visual Studio задайте точку останова в исходном коде app-bundle.js или app.tsx.
Для app-bundle.js задайте точку останова в функции render() . Чтобы найти функцию render() в файле app-bundle.js, нажмите клавиши CTRL+F или выберите элементы Правка>Найти и заменить>Быстрый поиск и введите render в поле поиска.





Если вы задаете точку останова в app.tsx, обновите webpack-config.js, чтобы заменить приведенный ниже код. После этого сохраните изменения. Замените этот код:
output: < filename: "./app-bundle.js", >, 
Вставьте следующий код:
output: < filename: "./app-bundle.js", devtoolModuleFilenameTemplate: '[resource-path]' // removes the webpack:/// prefix >, 
Совет После первого подключения можно быстро подключаться к этому же процессу, выбрав элементы Отладка>Повторно подключиться к процессу или нажав клавиши SHIFT+ALT+P.


В диалоговом окне Присоединить к процессу получите отфильтрованный список экземпляров браузера для присоединения. Убедитесь в том, что в поле Подключить к отображается правильный отладчик для вашего целевого браузера — JavaScript (Chrome) или JavaScript (Microsoft Edge - Chromium) Введите chrome или edge в поле фильтра, чтобы отфильтровать результаты.
Выберите процесс браузера с соответствующим портом узла (localhost в этом примере). Номер порта 1337 или localhost также могут отображаться в поле Заголовок, чтобы вам было проще выбрать нужный процесс.
Выберите Вложить. В следующем примере показано окно Подключиться к процессу для обозревателя Microsoft Edge. 

Совет Если отладчик не присоединяется и вы видите сообщение Unable to attach to the process. An operation is not legal in the current state (Не удалось подключиться к процессу. Операция недопустима в текущем состоянии) с помощью диспетчера задач закройте все экземпляры целевого браузера перед запуском браузера в режиме отладки. Возможно, в браузере выполняются расширения, которые препятствуют переходу в режим полной отладки.

Если вам не удается попасть в точку останова в файле app.tsx, повторите процесс с операцией Подключиться к процессу, которая подключает отладчик, как описано в предыдущих шагах. Убедитесь, что ваша среда настроена правильно:

Закройте все экземпляры браузера, включая расширения Chrome, с помощью диспетчера задач. Обязательно запустите браузер в режиме отладки.
Убедитесь, что сопоставитель с исходным кодом содержит ссылку на ./app.tsx, а не webpack:///./app.tsx, что не позволяет отладчику Visual Studio найти app.tsx.

Кроме того, можно использовать инструкцию debugger; в файле app.tsx или задать точки останова в средствах для разработчиков (Chrome) или в средствах F12 (Microsoft Edge).


Похожие публикации:

Bstkdrv bgp sys как удалить
Как изменяется двоичное число при сдвиге влево
Как расставить приложения на айфоне
Почему не двигаются столбцы таблицы в ворде