Привет, мои друзья,
В этом посте я попытаюсь объяснить «Как добавить React в доступное веб-приложение .NET Core».
Во-первых, я создаю новый проект для этого поста. Вы можете использовать его и пройти этапы создания проекта.
Я выбираю второй шаг шаблона проекта. Мой проект будет веб-приложением.
Теперь мой проект готов к разработке. Перед тем, как начать разработку, я добавлю несколько пакетов для реакции. Это следующие пакеты.
- React.AspNet
- JavaScriptEngineSwitcher.ChakraCore
- JavaScriptEngineSwitcher.ChakraCore.Native.win-x64 (Если вы используете Windows x86 или другую ОС, вам следует загрузить свою версию для этой ОС.)
- JavaScriptEngineSwitcher.Extensions.MsDependencyInjection
После загрузки пакетов мы изменим файл startup.cs в нашем проекте. Во-первых, мы добавляем новые библиотеки в файл startup.cs. Это библиотеки следующие.
- с использованием Microsoft.Extensions.DependencyInjection
- с использованием JavaScriptEngineSwitcher.ChakraCore
- с использованием JavaScriptEngineSwitcher.Extensions.MsDependencyInjection
- используя React.AspNet
Моя страница выглядит следующим образом.
Мы добавим следующий код в конец метода configureservices.
Мы добавим следующий код в метод настройки. Этот код должен быть перед статическими файлами. Скриншот выглядит следующим образом.
Я создал папку JSX в wwwroot. Я напишу код реакции в этой папке. Давайте начнем.
Во-первых, я добавил новый div в макет главной страницы. (_layout.cshtml) Мои компоненты реакции будут использовать этот div.
Теперь я начну писать код реакции. Я добавляю новый файл jxs в свою папку jsx. Скриншот выглядит следующим образом.
Детали моего компонента следующие.
Напоследок я вызову этот файл на своей странице для работы. Я добавил следующие коды внизу моей главной страницы.
Ссылки на скрипт выглядят следующим образом.
- Https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.development.js
- Https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.development.js
Я запустил localhost, и это сработало!
Вы можете найти пример проекта в этой ссылке. Позже я напишу новый пост для примеров реакции.
Увидимся.
Удачи :)