вторник, 30 апреля 2019 г.

Добавляем React.js в существующее asp.net приложения


Добавляем 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  когда вы работаете с приложением.


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