Jul 9 2019 at 18:57

Как добавить к уже созданному приложению компоненты ReactJS

Invite pending

В этом посте я попытаюсь подробно рассказать, как добавить в существующий проект фреймворка ASP .NET Core версии 3.0 библиотеку ReacJS и как её использовать в будущем.

Создание ReactJS шаблона

Так, как я использую ОС Windows, то процесс установки буду рассказывать именно под него, но думаю, что и на другие ОС не составит труда переделать под него. Если же у вас есть и готовое React приложение, то можете пропустить следующие шаги.

Прежде, чем приступить к скачке соответствующего пакета, нам нужно установить пакетный менеджер. Для этого нужно перейти на сайт: nodejs.org/en/download

И скачать пакет с NodeJS, который содержит в себе уже npm соответствующей версии.

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

Installing Node.js (and npm) on Windows 10

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

npm install -g create-react-app

После того, как пакет установился, нужно прописать команду:

create-react-app *здесь название вашего приложения*

Если же эта команда возвращает ошибку, попробуйте прописать команду

npx create-react-app *здесь название вашего приложения*

После того, как все пакеты будут установлены и скачаны, вы увидите соответствующий надпись об успешном завершении создании программы.

ASP.NET CORE

Тут уже ожидается, что в вашем приложении уже есть готовая часть кода на ASP.NET Core, по этому эту часть создания мы упустим. Для начала нужно установить библиотеку под названием Microsoft.AspNetCore.SpaServices.Extensions, любым удобным для вас способом:

Nuget
dotnet Cli

После этого нужно добавить в файл Startup.cs в метод void ConfigureServices(IServiceCollection services):

services.AddSpaStaticFiles(configuration =>
            {
                configuration.RootPath = "ClientApp/build";
            });

Где параметр — RootPath, это путь к названию скрипта, который должен вызывать функцию:
react-scripts build, или аналогичной ей.

А в метод Configure(IApplicationBuilder app, IWebHostEnvironment env) добавить:

services.AddSpaStaticFiles(configuration =>
app.UseSpaStaticFiles();
app.UseSpa(spa =>
            {
                spa.Options.SourcePath = "ClientApp";

                if (env.IsDevelopment())
                {
                    spa.UseReactDevelopmentServer(npmScript: "start");
                }
            });

Отличие UseSpaStaticFiles() от обычного UseStaticFiles() в том, что позволяет использовать директории, файлы лишь внутри использованного SPA-фреймворка.

В app.UseSpa() — используем для настройки, где spa.Options.SourcePath — указываем путь к папке с нашим SPA-приложением. А spa.UseReactDevelopmentServer(npmScript: «start») задаем сценарии запуска для нашего фреймворка.

Аналогично ему можно использовать: spa.UseProxyToSpaDevelopmentServer( *адресс сервера на котором уже запущен реакт приложение* localhost:3000"); отличие от предыдущего метода в том, что нам нужно запускать сервер реакта вручную и раньше, чем вы запускаете сервер с ASP.NET Core, после этого вы можете использовать сервер, как если бы создавали приложение с шаблоном в начале проекта.

Hubs: