Что вы будете создавать, смотрите в живой демонстрации и репозитории GitHub для получения дополнительной информации (не забудьте отметить проект звездочкой).
Введение
В ПЕРВОЙ ЧАСТИ этого руководства мы закодировали часть смарт-контракта этого приложения с помощью Solidity, теперь пришло время объединить его с React.
Если вы не проверили ПЕРВУЮ ЧАСТЬ этого руководства, я рекомендую вам сделать это, прежде чем переходить ко второй части.
Если вы получаете пользу от этого руководства и хотите полностью погрузиться в разработку блокчейна, тогда запишитесь на частный урок со мной.
Давайте прыгнем и начнем кодировать…
Загляните на мой канал Youtube, чтобы получить БЕСПЛАТНЫЕ уроки по web3 прямо сейчас.
Предпосылки
Вы должны пройти ПЕРВУЮ ЧАСТЬ этой статьи, чтобы в полной мере воспользоваться этой частью. Если нет, пожалуйста, быстро проверьте ЧАСТЬ ПЕРВУЮ, разработка блокчейна — не детская игра.
Создание компонентов
Давайте начнем с создания компонентов шаг за шагом, убедитесь, что вы точно следуете шагам…
Компонент заголовка
Как всегда, мы начнем с компонента заголовка, это нормальный поток любого веб-сайта или приложения.
Это было прекрасно обработано с помощью CSS попутного ветра с использованием стилей градиентов. Он просто позволяет пользователю подключить адрес кошелька для минтинга. В проекте перейдите в папку компонентов и создайте новый файл с именем Header.jsx. После этого вставьте в него приведенные ниже коды.
Это все для заголовка, давайте поработаем над компонентом Hero.
Компонент героя
Этот компонент отвечает за инициирование процесса чеканки, как вы можете видеть с помощью кнопки чеканки. Кроме того, требуется запись общего количества отчеканенных NFT по сравнению с оставшимися.
Вот фрагмент кода, отвечающий за эту операцию…
Следующим в нашем списке является компонент художественных работ…
Компонент "Художественные работы"
На этот компонент возложена ответственность за отрисовку произведений искусства одно за другим. Попутный CSS помог нам разработать потрясающий интерфейс.
Давайте посмотрим на коды, отвечающие за поведение этих компонентов…
Давайте перейдем к добавлению компонента нижнего колонтитула…
Компонент нижнего колонтитула
Если вы цените хорошую работу, вам понравится этот дизайн. Tailwind CSS позволил мне создать такие красивые компоненты, как этот. Эй, если вам интересно, я могу пригласить вас на частное занятие по разработке блокчейна, посмотрите мои предложения здесь.
Возвращаясь к этой сборке, этот текущий компонент слегка отличается фирменным отображением бренда и логотипа сайта, ничего особенного в этом компоненте, однако мне нужно было включить его в это руководство.
Ниже приведен код для него…
Фантастика, мы почти закончили с этими компонентами, давайте добавим последние два…
Компонент оповещения
Этот компонент, как бы интуитивно он ни звучал, отвечает за уведомление нас, когда наш процесс чеканки завершен. Опять же, он был создан вручную с использованием Tailwind CSS и некоторых иконок React.
Давайте посмотрим на коды, демонстрирующие его поведение…
Хорошо, давайте завершим эти компоненты, добавив в микс компонент Loader.
Компонент загрузчика
Этот компонент просто отображает счетчик, который также показывает текущий прогресс NFT по мере его создания.
Библиотека управления состоянием react-global-hooks управляет действиями, которые здесь происходят под капотом; подробнее об этом позже.
Вот код этого компонента…
Отлично, теперь, когда мы закончили кодирование компонентов, давайте погрузимся в App.jsx и соединим их вместе.
Компонент приложения
Этот компонент отвечает за подключение всех других компонентов, которые будут использоваться в этом проекте, давайте посмотрим, как он закодирован.
Мы еще не совсем закончили, давайте включим другие важные конфигурации.
Индексные файлы
Убедитесь, что ваши файлы index.jsx и index.css имеют конфигурацию, показанную в приведенном ниже фрагменте кода.
Фантастика, есть еще два важных файла, о которых вы должны знать, давайте посмотрим на них…
Блокчейн-интерфейс Adulam
Чтобы вы могли взаимодействовать с нашим развернутым смарт-контрактом, вам необходимо получить к нему доступ через функции. Приведенные ниже коды позволяют нам взаимодействовать с нашим смарт-контрактом, который сейчас работает в сети блокчейна. Создайте файл с именем Adulam.jsx в папке src этого проекта и вставьте в него следующие коды.
Это такая удобная функциональная структура, которую вы должны использовать в своем последующем блокчейн-проекте. Он объединяет все функции, связанные с блокчейном, и помогает нам сохранять здравомыслие.
Далее давайте обсудим, как наша маленькая, но не такая уж маленькая библиотека управления состоянием координирует всю эту деятельность за кулисами.
Библиотека управления выписками
Мы используем пакет react-global-hook для управления состоянием. Настройка избыточности для такого небольшого проекта может быть громоздкой, и зачем вам это, если у вас есть такая простая реализация, как приведенная ниже?
Создайте папку внутри каталога src с именем store, а также создайте в ней файл с именем index.jsx, теперь вставьте коды ниже в файл и сохраните.
Мы почти закончили здесь…
Папка и файлы ABIs
Позвольте мне обратить ваше внимание на эту папку, которая уже не должна быть пустой…
Во время ПЕРВОЙ ЧАСТИ этой статьи мы указали в truffle-config.js создавать эти файлы в этой папке всякий раз, когда мы компилируем смарт-контракт, поэтому у нас есть эта папка.
Файлы активов
Я должен сказать, что мы почти закончили, за исключением того, что мы не включили папку с ресурсами и файлы. Сделаем это быстро…
Создайте папку в каталоге src с именем assets, затем загрузите и переместите в нее указанный ниже файл.
Используйте эту ссылку на репозиторий git для загрузки изображений.
Теперь, когда мы закончили со всеми сборками, давайте запустим сервер, выполнив приведенную ниже команду на терминале, чтобы сделать это!
yarn start #starts the server on localhost:3000
Поздравляем, вы официально завершили сборку…
Посмотрите мои БЕСПЛАТНЫЕ уроки по web3 на Youtube прямо сейчас.
Заключение
Вы видели еще один классический пример создания приложения web3. Я твердо верю, что если вы программируете вместе со мной, вы являетесь одной из армий блокчейнов, которых ищет децентрализованный интернет.
В настоящее время я преподаю разработку блокчейна онлайн, если вы хотите углубиться в этот навык, запишитесь на частный урок со мной прямо сейчас.
До следующего раза, всего наилучшего!
об авторе
Госпел Дарлингтон начал свой путь в качестве инженера-программиста в 2016 году. За эти годы он приобрел полноценные навыки работы со стеками JavaScript, такими как React, React Native, Vue.js, а теперь и с блокчейном.
В настоящее время он работает фрилансером, создает приложения для клиентов и пишет технические руководства, обучая других тому, что делает он.
Евангелие в Дарлингтоне открыто и доступно для вас. Вы можете связаться с ним в LinkedIn, Facebook, Github или на его сайте.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Присоединяйтесь к нашему сообществу Discord.
