Добавляем React.js в существующее asp.net приложения
Было время, когда
если вы хотели что бы ваше приложение было более динамическим и менее
разговорчивым в плане общения с сервером, вы моглы добавить ссылку на jQuery и это все
чем вы могли пользоваться.
Потом появился Angular 1, который
был призван решить те же проблемы.
Что бы дальше? Ну
дальше было все немного сложнее.
Angular 2 привнес
намного больше новых возможностей и вместе с ними, сделал все намного сложнее.
TypeScript, пре-рендеринг
на сервере, webpack…
Если вы тратили
много времени на работу с MVC/WebForms (или вовсе
на десктопные приложения), то внезапно вы остаетесь сражатся что бы остаться на
месте под солнцем.
Итак как же
взабраться на гору .js когда вы все еще внизу?
Вы можете добавить React в существующее приложение.
Ссылка на
скрипты React
В вашем приложении
понадобятся как минимум два скрипта...
<script
src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script
src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
crossorigin></script>
Этот код нужно добавить в
<head>.
В моем примере ASP.NET Core app, я добавил
это в
Views/Shared/Layout.cshtml.
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"]
- WebApplication1</title>
<!-- other code here -->
<script
src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
crossorigin></script>
</head>
Теперь вы уже
можете писать React компонент. Для этого добавьте .js куда то в wwwroot.
Вот ваш первый код!
var e =
React.createElement;
class HelloWorld
extends React.Component {
render() {
return e(
"div",
null,
"Hello World"
);
}
}
const
containerElement = document.getElementById('content');
ReactDOM.render(e(HelloWorld),
containerElement);
Возможно код выглят
слегка странно, если вы раньше не работали с React, но он
просто создает div который говорит вам “Hello World”.
Как только мы
реализовали компонент
HelloWorld, мы можес его отрисовать.
Последние две
строчки кода находят существующий элемент
#content на вашей странице и
внутри него отрисовывает компонент HelloWorld.
Теперь вы можете
добавить ссылку на этот файл в вашем приложении и протестировать что React действительно
добавил компнент Hello World на страницу.
Для данного примера
я просто добавил компонент внизу страницы.
<h1>This
is an exciting page in my existing application</h1>
<div
id="content" />
<script
src="~/js/hello.js"></script>
Но это не
выглядит тем React, про
который я читал в интернете?!
Вы правы, не
выглядит.
В наши дни
большинство самых первых примеров React выглядят
так:
class HelloWorld
extends React.Component {
render() {
return <div>Hello World</div>;
}
}
const
containerElement = document.getElementById('content');
ReactDOM.render(<HelloWorld
/>, containerElement);
Этот тэг
<div></div> является
не чем иным как JSX.
И выглядит
подозрительно похожим на HTML, не так ли? Но
нет.
В реальности это javascript который
создает html тэг div и добавляет
его на страницу.
Фактически, он
создаст код в точности такой как описано выше.
React.createElement(
"div",
null,
"Hello World"
);
Для большинства из
нас, создавать компоненты с JSX гораздо
проще чем без него.
Но преобразование JSX в javascript не проходит
автоматически, и требует дополнительных действий.
Если вы уже
попробовали добавить JSX на вашу страницу
то наверняка получили ошибку.
Браузер не
может обработать jsx.
JSX это
невалидный javascript. Как результат, браузер понятия не имеет
что с этим делать.
Преобразовать...
<div>Hello
World</div>;
в...
React.createElement(
"div",
null,
"Hello World"
);
Для этого нам потребуется Babel.
Babel это javascript компилятор.
Его главная задача – это взять современный javascript и
скомпилировать его в javascript который
поддерживается в том числе и более старыми браузерами.
Также этот компилятор используется что ыб преобразовать JSX в JS.
<div>Hello
World</div>;
И посмотрите какой javascript вы получите
в результате.
Автоматически
преобразовать ваши JSX файлы в JS
Очевидно, что вы не будете брать каждый ваш jsx файл и
вставлять его на сайте Babel для того
что бы получить javascript код.
Для автоматизации процесса компиляции вам необходимо
загрузить и запустить Babel на своей
машине.
Вам понадобится последняя
версия node.js, которая будет
установлена на вашей машине, поэтому возьмите
ее если вы еще не сделали это.
Теперь откройте командную строку в корне вашего веб
приложения, здесь вам нужно будет выполнить несколько комманд, для того что бы
добавить babel в ваше приложение.
npm это
пакетный менеджер для Node, он обеспечивает
удобный способ управлять зависимостями в вашем приложнии.
npm init -y
npm install
babel-cli@6 babel-preset-react-app@3
Эти зависимости
нужны только для компиляции JSX в JS. Мы не будем использовать пэкеджі node как часть
веб сайта.
Мы просто должны
запускать babel на этапе разработки для компиляции js файлов.
Скрипты React мы добавили на страницу отображения раньше и
они по прежнему нужны нашему приложению для того что бы выполнять компоненты react которые мы
добавляем на страницу.
В конечном счете,
мы запустим маленькую полезную команду «следить за изменениями» наших jsx файлов, и
компилировать их в js сразу же как изменения были сделаны.
npx babel --watch
src --out-dir wwwroot/dist --presets react-app/prod
Npx – это исполнитель пакетов, который
упрощает запуск инструментов, которые находятся в пэкедже.
Вместо того что бы набирать полный путь к
babel.exe (который вы
можете найти в node_modules вашего проекта) вы можете просто написать npx babel и сохранить себе
время и силы.
В данном примере, я говорю бабелю смотреть за папкой
src и
сохранить скомпилированный результат в wwwroot/dist.
(Мой пример скомпилирован как ASP.NET Core проект,
поэтому все что требуется отдавать браузеру
хранится в
wwwroot).
Теперь когда я делаю какие-то изменения в
файлах в
src, то
скомпилированная версия сразу же появится в wwwroot/dist.
Теперь я могу
ссылаться на эти скомпилированные js файлы из моих
страничек.
<h1>This
is an exciting page in my existing application</h1>
<div
id="content" />
<script
src="~/dist/hello.js"></script>
Завершение
Вы можете создавать
React компоненты, писать их используя JSX и добавлять
их на ваши страницы в вашем существующем приложении.
Очевидным
недостатком данного подхода является то, что нужно не забывать запускать
команду
npx watch когда вы работаете
с приложением.