首页 前端知识 基于React、Typescript和Solidity的NFT完整教程

基于React、Typescript和Solidity的NFT完整教程

2024-07-10 22:07:48 前端知识 前端哥 545 730 我要收藏

基于React、Typescript和Solidity的NFT完整教程

了解如何使用 React / Next JS、Solidity 和 Pinata(IPFS) 在以太坊上创建 NFT 市场

课程英文名:NFT Marketplace in React, Typescript & Solidity - Full Guide

此视频教程共5.0小时,中英双语字幕,画质清晰无水印,源码附件全

下载地址

课程编号:300 百度网盘地址:https://pan.baidu.com/s/1gDdZ0VL5NEd-SdSszDGO6w?pwd=52f0

课程内容

你将会学到的

  • 创建一个真正的 NFT 市场!

  • 以实用有趣的方式理解复杂的主题

  • 获取与任何[区块链]一起使用的完整工具包

  • 在区块链上开发一个真正的应用程序

要求

  • React JS的知识

  • Solidity的基础知识

  • 熟悉区块链

说明

Next.js 为您提供生产所需的所有功能的最佳开发人员体验:混合静态和服务器渲染、TypeScript 支持、智能捆绑、路由预取等。无需配置。

以太坊 是一种可以让你向任何人发送加密货币的技术,但首先,它还为每个人都可以使用并且没有人可以删除的应用程序提供支持。这是世界上可编程的区块链。

Solidity 是一种面向对象的高级语言,用于实现智能合约。智能合约是管理以太坊状态内账户行为的程序。

Pinata 是一种固定服务,允许用户在 IPFS 网络上托管文件。星际 文件系统 ( IPFS ) 是一种协议和点对点网络,用于在分布式文件系统中存储和共享数据。

本课程涵盖哪些内容?

该课程涵盖了根据 ERC721 标准的去中心化 NFT 应用程序所需的一切。本课程的学生将通过创建真实世界的应用程序来了解 NFT。

学生将了解 ERC721 智能合约是什么以及如何创建一个。

课程中涵盖的 dApp 前端是使用 React JS 库和 Next JS 框架创建的。CSS 和设计是使用 Tailwind 框架构建的。

NFT 市场应用:

该课程的核心部分涵盖了交互式 NFT 市场的创建。该平台的客户将能够使用以太数字货币购买 NFT。

该应用程序是在 Next JS 框架中创建的,构建在 React JS 之上。

课程的第一部分包括页面布局的设置、首页的创建和组件。Tailwind CSS 框架涵盖了应用程序的样式部分。

学生将探索如何将 Web3 JS 代码提供到应用程序中,代码负责与加密钱包进行通信,从而与区块链进行通信。

我们将使用 Provider/Consumer 的概念来提供这一层,这在 React JS 中很常见。这将保证所有组件和页面都能够访问负责与区块链通信的功能。

应用程序的状态和数据管理通过 SWR(stale while revalidate) 库处理。这将为应用程序提供一种反应性的感觉,并在接收到新数据时提供组件的反应性渲染。

毕竟,实现了与区块链的必要通信,学生将开始研究智能合约的实施。

该课程遵循公认的 ERC721 令牌标准。

智能合约是项目的重要组成部分。它充当 NFT 的区块链"存储",并提供验证 NFT 所有权和与媒体存储链接的功能。

课程的最后一部分包括准备和存储与 NFT 相关的数据。所谓的 NFT 元数据。

NFT 元数据数据将存储在基于 Pinata (IPFS) 的存储中。学生将学习从表单中收集数据,然后将其提交到 Pinata 存储。以下重要部分是链接此元数据并创建 NFT。

此应用程序中最值得提及的主题是:

  • Next JS 与 Web3 和区块链的集成

  • 与 Hooks 和 SWR 的反应性

  • 创建 NFT(ERC721) 智能合约

  • Pinata 上的 NFT 数据操作和存储

  • 打字稿

此课程面向哪些人:

  • 对区块链技术感兴趣的初级到中级开发人员

  • 人们正在寻找实用的 Solidity/Ethereum/[NextJS] 开发指南。

  • 本课程适合所有渴望了解如何从头开始构建应用程序的人

     

转载请注明出处或者链接地址:https://www.qianduange.cn//article/13944.html
标签
区块链
评论
发布的文章

jQuery-w3school(2020

2024-08-04 23:08:08

jQuery常用方法总结

2024-08-04 23:08:34

Vue2使用echarts树图(tree)

2024-08-04 23:08:29

图表库-Echarts

2024-08-04 23:08:57

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!