Узнайте, как использовать библиотеку представлений в стиле «Дарти»

С Новым годом, друзья!

В этой серии из трех частей мы рассмотрим примеры домашней страницы React.js и узнаем, как воспроизвести их в Dart с помощью пакета взаимодействия js.

Посмотреть на YouTube
Получить исходный код

Прежде чем мы начнем:

1. Настройте свой проект

Быстро настройте свой веб-проект с помощью Stagehand:

$ mkdir get_started_react && cd get_started_react
$ stagehand web-simple

2. Установите пакет взаимодействия js.

Убедитесь, что зависимость js добавлена ​​в ваш pubspec.yaml файл:

dependencies:
  js: ^0.6.0

Сохраните и запустите pub get, чтобы обновить свои зависимости.

3. Импортируйте библиотеки React.js.

В web/index.html в <head> перед <script defer src="main.dart.js"></script> импортируйте dev-версии библиотеки:

<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<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>

Посмотреть видео полностью
Получить исходный код

Заключение

Надеюсь, это было проницательно, и сегодня вы узнали что-то новое.

Подпишитесь на мой канал YouTube, чтобы получать уведомления, когда часть 2 будет готова. Спасибо!

Ставьте лайки, делитесь и подписывайтесь на меня 😍, чтобы узнать больше о Dart.

дальнейшее чтение

  1. Пакет js
  2. Как использовать библиотеки JavaScript в ваших приложениях Dart
  3. Полная веб-разработка с Dart