create web3 dapp -Download - create web3 dapp -Source -Code Download

create web3 dapp

AI-Quellcode

1.0.0

Herunterladen

Erstellen Sie Web3 Dapp

Erstellen Sie Web3-dapp

Alles, was Sie benötigen, um Web3 Dapps in 4 Minuten zu erstellen.

Dieses Paket enthält den globalen Befehl zum Starten des Web3 Dapp CLI Builders.

In der Dokumentation dieses Pakets und den folgenden Links finden Sie eine ausführliche Erklärung:

Dokumente - alles, was Sie bei der Verwendung von CW3D wissen müssen
Github - Sehen Sie sich das umfangreiche Code -Beispiel an oder starten Sie mit Beitrag
Website - Erfahren Sie mehr über CW3D und fügen Sie Ihrem Projekt Komponenten hinzu
Vorlagen - Schauen Sie sich die vorgefertigten Projektvorlagen an
Komponentenbibliothek - Fügen Sie Ihrem Projekt über Komponenten direkt Funktionen hinzu
Beispiele - Siehe die Komponenten, die in einer realen DAPP implementiert sind
Community - Treffen Sie andere Bauherren, erhalten Sie Unterstützung und geben Sie Feedback!

? Keine Notwendigkeit zu klonen: Ausführen "NPX create-Web3-dapp@letztes" in Ihrem Terminal, um loszulegen

Was ist enthalten?

Ihre Umgebung hat alles, was Sie benötigen, um einen DApp zu bauen:

Unterstützte Ketten

Mit Create-Web3-DAPP können Sie Multi-Chain-Dapps erstellen, die alle wichtigsten EVM-Basisketten unterstützen:

Die Unterstützung für Nicht -EVM -Ketten ist in der Roadmap

Was ist Create-Web3-Dapp?

Create-Web3-DAPP ist ein NPX-Tool, mit dem Entwickler Web3-Anwendungen in ~ 4 Minuten erstellen können.

Die mit Create-Web3-DAPP erstellte DAPP basiert auf dem nächsten und kompatibel mit den am häufigsten verwendeten Blockchains wie Ethereum, Polygon, Optimismus, Arbitrum und Solana . Mit Create-Web3-DAPP können Web3-Entwickler produktionsbereite dezentrale Anwendungen mit Blitzgeschwindigkeit mithilfe vorgefertigter React-Komponenten, Webhooks und APIs erstellen.

Keine komplizierten Konfigurations- oder Ordnerstrukturen, nur die Dateien, die Sie zum Erstellen Ihrer DApp benötigen.

Vorlagen

Philosophie

Eine Abhängigkeit: Es gibt nur eine Aufbauabhängigkeit. Es verwendet Webpack, Babel, Eslint und andere erstaunliche Projekte, bietet jedoch eine zusammenhängende kuratierte Erfahrung.
Keine Konfiguration erforderlich: Sie müssen nichts konfigurieren. Für Sie wird eine einigermaßen gute Konfiguration von Entwicklungs- und Produktionsergebnissen behandelt, sodass Sie sich auf das Schreiben von Code konzentrieren können.
KEIN LOCK-IN: Sie können jederzeit in ein benutzerdefiniertes Setup „auswerfen“. Führen Sie einen einzelnen Befehl aus, und alle Konfigurations- und Erstellungsabhängigkeiten werden direkt in Ihr Projekt verschoben, sodass Sie genau dort abholen können, wo Sie aufgehört haben.

Wann zu verwenden CW3D

Create Web3 Dapp passt gut zu:

Lernen von Web3 in einer komfortablen und featurereichen Entwicklungsumgebung.
Neue Web3 -Anwendungen starten
Testen Sie Dinge und experimentieren Sie mit React für Ihre Bibliotheken und Komponenten.

Verwendung

 npx create-web3-dapp@latest

Wenn Sie zuvor über npx create-web3-dapp create-web3-dapp weltweit global installiert haben, benachrichtigt der CLI-Builder Sie, wenn eine neue Version veröffentlicht wurde. In jedem Fall empfehlen wir Ihnen, die neueste verfügbare Version mit npx create-web3-dapp@latest auszuführen.

(NPX wird mit NPM 5.2+ und höher geliefert. Siehe Anweisungen für ältere NPM -Versionen)

Schneller Start

So erstellen Sie eine neue App:

In Ihrem Terminallauf:

  npx create-web3-dapp@latest

Wählen Sie die Abhängigkeiten, Komponenten und Verträge, die Sie in Ihre Web3 -Anwendung aufnehmen möchten, aus und erstellen Sie die in Ihrer Web3 -Anwendung einbezogenen Verträge.

Erstellen Sie Web3 DAPP erstellt ein Verzeichnis, das die Dateien enthält, um Ihr Projekt zu kicken und die von Ihnen benötigten Abhängigkeiten zu installieren

npx create-web3-dapp@latest
cd my-create-web3-dapp
npm run dev

Wenn Sie eine Blockchain -Entwicklungsumgebung installiert haben, navigieren Sie zum Frontend -Ordner, bevor Sie NPM Run Dev ausführen.

Navigieren Sie jetzt unter http: // localhost: 3000/um Ihre Dapp zu sehen.

Erfahren Sie als Nächstes, wie Sie eine Web3-Ready-Komponente aus der Bibliothek erstellen-Web3-DAPP hinzufügen.

Smart Contracts Rucksack - CLI Smart Contract Creator

Create Web3 DAPP richtet nicht nur Ihre Blockchain-Entwicklungsumgebung ein, sondern auch für den integrierten Smart Contracts-Rucksack ermöglicht es auch, vollwertige Soliditäts-Smart-Verträge direkt aus der CLI zu erstellen.

Hinweis: Dies funktioniert nur, wenn Sie eine Blockchain -Entwicklungsumgebung installiert haben

Der Smart Contracts -Rucksack kann geprüfte Smart Contracts, Bereitstellungsskripte und Tests für einen der folgenden Standards erstellen:

ERC721: NFT Collection Smart Contract
ERC20: Kryptowährung intelligenter Vertrag
ERC1155: Fungibilität Agnosting Smart Contract

Erfahren Sie mehr über das Erstellen, Erstellen und Bereitstellen des Smart Contracts -Rucksacks in den Dokumenten.

Web3 React -Komponentenbibliothek

Erstellen Sie Web3 DAPP ermöglicht es Entwicklern, ihre DAPPs dank einer vollständigen Bibliothek mit reaktionsschnellen, produktionsbereiten, Web3 -React -Komponenten in wenigen Minuten zu prototypisieren.

HINWEIS: Die Komponenten funktionieren am besten im Inneren erstellen-Web3-DAPP-Projekte, sind jedoch mit jedem NextJS-Projekt kompatibel.

Verwenden Sie die folgenden Links, um zu erfahren, wie Sie die Komponenten in der Bibliothek implementieren :

Dokumente: Ein Brokendown -Handbuch für jede Komponente
Github: Siehe die Komponenten, die in einem realen Projekt implementiert sind

Komponente

Beispielimplementierung:

In /Komponenten erstellen nftcreator.jsx
In/Stile erstellen nftCreator.module.css
IN /PAGES/APICREATEPINFILETOIPFS.JSPINJSONTOIPFS.JS
Kopieren Sie den entsprechenden Code unten in die obigen erstellten Dateien.
Importieren Sie die NFTCreator -Komponente oben auf Ihrer Seite:

 import styles from "../styles/Home.module.css" ;
import NftCreator from "../components/nft-creator" ;
import contract from "../abis/smartContractAbi.json" ;

export default function Home ( ) {
	return (
		< div >
			< main className = { styles . main } >
				< NftCreator
					abi = { contract . abi }
					contractAddress = {
						"0x9FaCAf075Cda7C0947DA0F0B4164332e01422E97"
					}
				/>
			</ main >
		</ div >
	) ;
}

Weitere Komponenten? Überprüfen Sie die detaillierten Anweisungen in den Dokumenten.

DAPP -Vorlagenbibliothek

Erstellen Sie Web3 DAPP können Sie auf eine Produktionsbibliothek mit Bereitschaft auf Web3 -Anwendungen zugreifen, mit denen Sie Ihr Projekt einteilen können. NFTS Explorer und bald kommen bald.

Die Vorlagen können Entwickler wie es sind, oder sie können so angepasst werden, dass sie den Anforderungen ihres jeweiligen Projekts entsprechen.

HINWEIS: Die Abhängigkeiten auf minimaler Weise halten, und der Code schlank ist unsere oberste Priorität. Dies ist, um die Vorlagen zu gewähren, die vollständige Anpassbarkeit.

Verwenden Sie die folgenden Links, um zu erfahren, wie Sie Ihre DAPP mit der Templates Library starten :

Vorlagen docs
Vorlagenbibliothek
Github (bald kommt)

Vorlagen

Ordnerstruktur

Create-Web3-Dapp verfügt über zwei Ordnerstrukturen, basierend auf dem Vorhandensein einer Blockchain-Entwicklungsumgebung oder nicht.

Mit Blockchain -Entwicklungsumgebung

 ?Root
 ┣ components
 ┃ ┣ navigation
 ┃ ┃ ┗ navbar.jsx
 ┃ ┗ InstructionsComponent.jsx
 ┣ layout
 ┃ ┗ mainLayout.jsx
 ┣ pages
 ┃ ┣ api
 ┃ ┣ _app.js
 ┃ ┗ index.jsx
 ┣ public
 ┃ ┗ alchemy_logo.svg
 ┣ styles
 ┃ ┣ Home.module.css
 ┃ ┣ Navbar.module.css
 ┃ ┣ InstructionsComponent.module.css
 ┃ ┗ globals.css
 ┣ .env.local
 ┣ .gitignore
 ┣ next.config.js
 ┣ package-lock.json
 ┗ package.json

Ohne Blockchain -Entwicklungsumgebung

 ?Root
 ┣ .vscode
 ┃ ┗ settings.json
 ┣ backend
 ┃ ┣ contracts
 ┃ ┃ ┗ MyContract.sol
 ┃ ┣ scripts
 ┃ ┃ ┗ MyContract_deploy.js
 ┃ ┣ test
 ┃ ┃ ┗ Lock.js
 ┃ ┣ .env.local
 ┃ ┣ hardhat.config.js
 ┃ ┣ package-lock.json
 ┃ ┗ package.json
 ┣ frontend
 ┃┣ components
 ┃ ┃┣ navigation
 ┃ ┃ ┗ navbar.jsx
 ┃  ┃┗ InstructionsComponent.jsx
 ┃┣ layout
 ┃┃ ┗ mainLayout.jsx
 ┃┣ pages
 ┃┃ ┣ api
 ┃┃ ┣ _app.js
 ┃┃ ┗ index.jsx
 ┃┣ public
 ┃┃ ┗ alchemy_logo.svg
 ┃┣ styles
 ┃┃ ┣ Home.module.css
 ┃┃ ┣ Navbar.module.css
 ┃┃ ┣ InstructionsComponent.module.css
 ┃┃ ┗ globals.css
 ┃┣ .env.local
 ┃┣ .gitignore
 ┃┣ next.config.js
 ┃ ┣ package-lock.json
 ┃ ┗ package.json
 ┣ .DS_Store
 ┣ .env.local
 ┣ .gitignore
 ┣ LICENSE
 ┗ README.md

Beitragen

Wir würden gerne Ihre Hilfe bei create-web3-dapp haben! Weitere Informationen zu dem, wonach wir suchen und wie wir loslegen können, finden Sie unter Beitrags.md.

Unterstützung des Erstellens von Web3 Dapp

Create Web3 Dapp ist ein Community -gepflegtes Projekt und alle Mitwirkenden sind Freiwillige. Wenn Sie die zukünftige Entwicklung der Creating React App unterstützen möchten, sollten Sie an unser offenes Kollektiv spenden.